看了网上一些文章,做了点总结,顺便再加点自己的东西,简单的说下。

1.利用浏览器的304缓存,但是304叫协商缓存,还是需要与服务器通信一次

2.强制使用浏览器使用本地缓存(cache-control/expires),但是问题来了,不让浏览器发资源请求,资源怎么更新。

3.使用版本号,类似于a.css?v=1.0,b.css?v=1.0,做了更改的时候都变成a.css?v=2.0,b.css?v=2.0,有时候a.css改变了,b.css没有改变,不是多此一举吗?

4.使用数据摘要算法,类似于a.css?v=0abc23,b.css?v=65ao1j,如果a.css做了更改的话,a.css=v=1asd2j,b.css还是b.css?v=65ao1j。

5.很多企业,现在都静态文件cdn部署了,类似于http://static.cdn.com/css/a.css?v=0abc23,与页面分开部署了,

  a.如果先部署页面,再部署资源:在二者部署的时间间隔内,如果有用户访问页面,就会在新的页面结构中加载旧的资源,并且把这个旧版本的资源当做新版本缓存起来,其结果就是:用户访问到了一个样式错乱的页面,除非手动刷新,否则在资源缓存过期之前,页面会一直执行错误。

  b.如果先部署资源,再部署页面:

在部署时间间隔之内,有旧版本资源本地缓存的用户访问网站,由于请求的页面是旧版本的,资源引用没有改变,浏览器将直接使用本地缓存,这种情况下页面展现正常;但没有本地缓存或者缓存过期的用户访问网站,就会出现旧版本页面加载新版本资源的情况,导致页面执行错误,但当页面完成部署,这部分用户再次访问页面又会恢复正常了。
解决方法:改变命名方式,改成a_0abc23.css,上线的时候先部署静态资源,再部署页面。

如何高效部署前端代码,如css,js...的更多相关文章

  1. Nginx部署前端代码实现前后端分离

    实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不 ...

  2. 通过nginx部署前端代码实现前后端分离

    实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不 ...

  3. 压缩前端文件(html, css, js)

    1:原因 在写前端代码时, 因为要尽可能的适合阅读会加入许多注释, 空格等, 这些在开发时是必要的, 但当你要发布时, 就需要让代码更加精简, 精简压缩的同时也混淆了代码, 安全性也加强了, 可以说是 ...

  4. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  5. 前端、HTML+CSS+JS编写规范(终极版)

    HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式: HTML文档必须使用HTML5的标准文档格式: HTMLCSS编写规范 HTML和CSS的标签.属性.类名.ID都必须使用小写 ...

  6. 前端三件套 HTML+CSS+JS基础知识内容笔记

    HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...

  7. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  8. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  9. Web前端:HTML~CSS~JS

    网页主要由3部分组成:结构.表现.行为.目前网页的新标准是W3C,模式是HTML.CSS.JavaScript,这是前端开发最核心的3个技术.前2个技术的最新版本分别为HTML5.CSS3.  “HT ...

随机推荐

  1. 【书单】book list

    正在看: [泡沫经济学].(日)野口悠纪雄 数学模型--姜启源 R in action Programming with R Scrapy Parallel R     准备看: Advanced.A ...

  2. Spring AOP Schema aop:config、tx:advice

    Spring AOP Schema  aop:config.tx:advice 一.      利用aop:config标签实现AOP 首先看个例子,如下 接口代码: package com.lei. ...

  3. Spring3系列7- 自动扫描组件或Bean

    Spring3系列7- 自动扫描组件或Bean 一.      Spring Auto Scanning Components —— 自动扫描组件 1.      Declares Component ...

  4. Hadoop 2.4.1 Map/Reduce小结【原创】

    看了下MapReduce的例子.再看了下Mapper和Reducer源码,理清了参数的意义,就o了. public class Mapper<KEYIN, VALUEIN, KEYOUT, VA ...

  5. window 内核详尽分析

    http://bbs.pediy.com/showthread.php?t=185055

  6. SQL Server2008如何设置开启远程连接

    登陆SQL Server 2008(windows身份认证),登陆后右击,选择“属性”. 2 左侧选择“安全性”,选中右侧的“SQL Server 和 Windows 身份验证模式”以启用混合登录模式 ...

  7. Android之layout_alignBottom失效问题

    外面是一层RelativeLayout,前面的text和后面按钮都是设置centerParent_vertical,第二个hello是需要与第一个底部对齐,虽然设置alginBottom指向第一个he ...

  8. 安装cvxpy遇到的问题与解决方案(ubuntu14.10,python 2.7.8)

    应该说,cvxpy的安装说明是很棒的,一步一步非常清楚,www.cvxpy.org/en/latest/install/index.html 可是,我照着做完之后,还是不能import cvxpy,不 ...

  9. Ubuntu下的防火墙

    Ubuntu下的防火墙Gufw-ufw Gufw是ufw的桌面版本,网上有Gufw的安装和配置方法,但是我认为并不是很好.网上的教程也有点愚弄大众的嫌疑,因为按照他的说法,最后防火墙根本就无法自动启动 ...

  10. 配置 Sublime Text 用 Node.js 执行 JavaScript 程序

    1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> ...