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

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. ch4 MySQL 安全管理

    第 4 章 MySQL 安全管理 前言 对于任何一个企业来说,其数据库系统中所保存数据的安全性无疑是非常重要的,尤其是公司的有些商业数据,可能数据就是公司的根本,失去了数据的安全性,可能就是失去了公司 ...

  2. 表格类似Excel

    只是很简单的实现表格,使用GridView控件-->可以上下左右滚动,但是不能合并 直接上代码: 1.主要布局 <?xml version="1.0" encoding ...

  3. Android中AutoCompleteTextView的使用

    1.http://blog.csdn.net/FX_SKY/article/details/9326129 此博客讲解了auto组件如何使用baseAdapter来扩展功能,推荐参照此博客写demo ...

  4. C# 调用 WebService 连接ORACLE 11g

    这几天开发一个WebService遇到很多问题,记录下来顺便帮助一下以后遇到情况的人. 我是通过ADO.NET来连接ORACLE的,也可以用ORACLE提供的ODP.NET. 通过正常的连接后部署II ...

  5. 谷歌面经 Tree Serialization

    http://www.careercup.com/question?id=4868040812396544 You should transform an structure of multiple ...

  6. 墓地雕塑-LA3708

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=20& ...

  7. DevExpress.XtraGrid winform试用分享

    DevExpress.XtraGrid在winform里使用还挺麻烦,为了减少重复代码和代码复用,本人针对DevExpress.XtraGrid封装了一个Form的基类,其中涵盖了DevExpress ...

  8. ruby -- 进阶学习(十六)ckeditor去除“浏览服务器”按钮

     FROM:http://blog.163.com/zjc_8886/blog/static/2408175201011222590967/ 实现方法: 由于ckeditor中的"上传图片& ...

  9. 设计模式之Interator模式(1)

    interator是java容器遍历的一种手段,当然遍历容易你可以使用普通的for(;;)或者for(Object o : new Arraylist<Object>()),都是可以的. ...

  10. @import和link的区别

    @import和link的区别 1.link语法结构    <link href="CSSurl路径" rel="stylesheet" type=&qu ...