cqupt-yifanwu
commented
7 years ago defer 与 async
- async模式 当浏览器遇到script标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。
- defer模式 当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。
- 总结 所以async和defer的最主要的区别就是async是异步下载并立即执行，然后文档继续解析，defer是异步加载后解析文档，然后再执行脚本。主要的参考是如果脚本不依赖于任何脚本，并不被任何脚本依赖，那么则使用 defer，如果脚本是模块化的，不依赖于任何脚本，那么则使用 async。
准则（概述）
减少HTTP请求
减少HTTP请求是上面性能准则中最为显著的一条，我们可以分为三个主要方面来讨论
使用CDN加速（内容分发系统）
CDN是一个拥有很多服务器、经过策略性部署的、可以覆盖全球的网络系统，当用户访问一个比较大的网站时，CDN会从最近的一个节点为用户提供服务。但是动态数据的处理最好放在集中的服务器中，因为跨地域同步数据库是一个令开发者头痛的问题，所有大多数互联网公司都把购买、登陆等数据相关的事物放到一个地方处理。另外，CDN服务是很贵的，如果网站的流量值得去付出这么多钱，它无疑会给性能带来提升。
避免空的src和href属性
我们使用javascript给空的src赋值时，javascript放在文档的最后，此时虽然src是空的仍然会发出一个HTTP请求。当我们点击一个空的href属性的链接时，同样会发出一个HTTP请求，虽然这个HTTP请求不会有影响加载时间但是会给服务端造成一定的流量浪费。我们可以创建一个带有描述性信息的很href属性，并阻止这次HTTP请求 ` TriggerName
` 另外，空的src和href也是会产生报错的
增加过期头
增加了过期头之后浏览器便会缓存这些文件，当用户第二次访问这个网站的时候就不会再像服务端请求这个文件。关于缓存的详细介绍可以点这里
启用GZIP压缩
HTTP协议1.1引入了Accept-Encoding这个功能（表明HTTP请求的内容是压缩过的），GZIP就是其中的一种压缩方式，它是现在压缩比率最高的，据雅虎的统计它减小了大约70%的响应大小。它不仅仅会减小文件传输时间，同时也节省了带宽。
把css放在头部
浏览器并不会等全部HTML解析完成之后才渲染元素，而是同时进行，把css放到前面就会保证先渲染的那一部分元素的显示样式是正确的，这么写在性能方面也有很大的意义，你绝不希望引起大量的浏览器重绘。如果你的样式文件放到页面的底部，那么浏览器就会等所有文件都加载完才会绘制页面，那么用户很有可能盯着白屏一长段时间，
把javascript放在尾部
脚本会阻止并行加载（link支持最大限度的并行加载），也就是说，当浏览器加载一个脚本的时候时，它不会加载其他文件。如果脚本在头部那他会阻止页面的渲染。我们可以用script标签上的DRFFER属性通知浏览器去异步的加载其他文件，但是这么做会出现两个问题。
避免使用css表达式
减少页面的回流与重绘
关于这个问题可以去我博客园的 博客 来查看。