规则1——减少HTTP请求
- 合并图片，合并样式表，合并脚本
规则2——使用cdn发布静态资源
规则3——为问价添加长久的expires头 || 设置cache-control的max-age值
- web服务器通过Expries头来告诉web客户端它可以使用一个文件的当前缓存，直到指定的时间为止。expries头使用一个特定时间，它要求服务器的时间和客户端的时间严格同步，另外过期日期需要经常检查，一旦到期，则需要重新设置。
- cache-control使用max-age指令指定文件被缓存多久，它以秒为单位定义了一个更新时间。一个长久的max-age头可以将刷新时间设置为未来10年。（只支持http1.1以上的浏览器）
- 最佳实践：同时指定expries头和max-age值，如果两者同时出现，HTTP规范规定max-age指令将重写expries头。
规则4——压缩文件、压缩脚本样式表、图片等
- gzip是目前最流行和最有效的压缩方法
- 用构建工具gulp压缩脚本(gulp-uglify)和样式表(gulp-minify-css) 图片用tinypng这个网站压缩，也用构建工具(gulp-imagemin)压缩图片，但是压缩效果不佳
规则5——将样式表放在文档顶部
- 使用link标签的方式将样式表放在文档的head中
- 尽量不要使用@import的方式引用样式表，因为这种方式引用的样式表会在文件加载完毕后才会下载，也就是导致页面下载的无序性
规则6——将脚本放在文档底部
- 脚本会阻塞页面的呈现，即dom树的渲染
- 浏览器会并行下载文件，HTTP1.1规范建议浏览器从每个主机名并行地下载两个文件，所以如果一个web页面平均的将其文件分别放在两个主机名下面，整体响应时间了可以减少约一半。
- 脚本会阻塞并行下载，原因：①脚本可能使用document.write()来修改页面内容，因此浏览器会等待，以确保页面能够恰当的布局；②为了保证脚本能够按照正确的顺序执行，如果并行下载多个脚本，就无法保证响应时按照特定的顺序到达浏览器的，例如，如果后面的脚本比前面的小，就可能先执行，如果这两个脚本存在依赖关系，就会出错。
- 除了放在底部，还可以添加defer和async属性来阻止页面提前加载，使用这两个属性时，脚本中不能调用document.write()方法
- 如果一个script加了defer属性，即使放在head中，它也会在html页面解析完毕之后再去执行，也就类似于把这个script放到了页面底部。js的加载不会阻塞页面的渲染和资源的加载，同时defer还会按照原来的js顺序执行，如果后面有依赖关系也可以放心使用
- async是HTML5中新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载，不过它是加载完成后就立即执行，如果脚本之间有依赖关系则有可能会发生错误
规则7——避免CSS表达式
- 可以使用一次性表达式和事件处理程序来代替CSS表达式
规则8——将javscript和css文件放置在外部文件中
规则9——减少DNS查找
- 可以通过Keep-Alive和较少的域名来减少DNS查找
网友评论