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

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. Changing the type of a property with EF Code First

    The smartest way is probably to not alter types. If you need to do this, I'd suggest you to do the f ...

  2. [原]shader实现矩形圆角

    哎!竭力想说清楚这个实现原理,并解释清楚shader里面的算法,结果发现越解释越不好理解,见谅! 一.实现目标:矩形四角是圆弧效果 二.实现的原理:通过每个角绘制1/4圆弧,剔除掉圆弧以外的部分. 原 ...

  3. 使用WebApi时Post和Put的区别

    简单的说Post是添加,Put是修改 吃不准的话,尝试用相同参数访问二次接口,结果不同的是Post(会产生多条记录),结果相同的是Put(仅为一条记录),例如:写博客就是Post:更新签名就是Put

  4. [转]一个小试验验证对象的指针计数置为nil的情况

    本文转载于新风作浪的博客专栏,博客地址:http://blog.csdn.net/duxinfeng2010/article/details/8757211 以下博客原文: 最近遇到这样一个问题,以前 ...

  5. jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  6. 修改 上传图片按钮input-file样式。。

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 配置ST3在浏览器中打开

    打开Preferences - 「Key Bindings - User」,添加此行: {"keys": ["f1"],"command": ...

  8. css3整理--filter

    只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filt ...

  9. Linux多线程编程(不限Linux)【转】

    ——本文一个例子展开,介绍Linux下面线程的操作.多线程的同步和互斥. 前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步 ...

  10. linux下mysql的root密码忘记解决方法

    1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录 ...