性能是一个开发者不得忽略也不容忽略的一个问题。轻微性能问题可能只会导致微弱的延迟，给用户带来短暂的不便。 而严重的性能问题可能导致网站完全无法访问，无法对用户输入进行响应或两者同时发生。
由上图可以看出，性能问题直接关乎到用户的去留。
其实业界关于Web性能优化问题已经有许多文档可参考了。我也是针对性能问题结合前人成果做了一下总结。
我的思路是沿着一个网页的呈现过程来解析的。
首先， 我们再现一下一个网页的呈现过程：
根据输入的网址浏览器进行DNS解析 --> DNS解析后获得对应的IP地址，完成TCP的三次握手，建立连接 -->发送HTTP请求，请求内容 -->等待服务器响应，浏览器获得服务器响应的内容 --> 资源渲染
所以性能优化也就体现在这整个 过程的每一步。当然，性能优化也有原则：渐进式增强，在页面性能和交互设计之中找平衡点；尽量减少页面大小，尽量降低页面响应时间。
一.DNS解析时：优化规则---减少DNS查找
DNS缓存：主流浏览器缓存，本机DNS缓存，本地DNS服务器缓存
减少DNS查询次数：减少来自不同domain的请求的数量
https://blog.csdn.net/miao_9/article/details/80477209
二.建立连接时：优化规则---使用内容分发网络
使用CDN(Content Deliver Network)
CDN的本质仍然是一个缓存，而且将数据缓存在里用户最近的地方，使用户以最快的速度获取数据，即网络访问第一跳。
当CDN服务器中缓存有用户请求的数据时，就可以从CDN直接返回给客户端浏览器，最短路径的返回响应，加快用户的访问速度，减少数据中心的负载压力。
CDN能够缓存一般的CSS，js图片等静态资源文件，而且这些文件的访问频率很高，将其缓存在CDN可以极大的提高网站的访问速度
https://blog.csdn.net/u010400084/article/details/52925597
三.发送HTTP请求时：优化规则--减少http请求
（注：chrome的Performance是一个很好的http请求观测工具）
1.图片地图：一张图片就对应多个不同的链接，从而减少请求
//点击相应区域，跳转到相应连接
2.公用样式表/脚本合并，单个页面单独一个样式表/脚本；
3.CSS Sprites技术
4.避免使用空的src和href
四.等待响应，获取数据时：
1.避免重定向：
重定向用于将用户从一个URL重新跳转到另一个URL。最常见的Redirect就是301和302两种。在我们实际开发中避免重定向，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。
2.压缩：
先应用内容特定优化：CSS、JS 和 HTML 压缩源码程序。
采用 GZIP 对压缩源码后的输出进行压缩。
压缩文本资产：源码压缩是指删除不必要的空格、评论和基于文本的资源中的其他内容。 该方法将大大减少您发送给用户的数据量，且不会影响功能。 在 JavaScript 中使用丑化，通过缩短变量和方法名称来实现更多节省。 由于 SVG 是基于文本的图像格式，可以使用 SVGO 进行优化。
将您的服务器配置为执行资源压缩： 压缩会大大降低发送给用户的数据量，尤其是文本资产。GZIP 是常用的选项。 不过，压缩不是解决性能问题的万能方法： 某些隐式压缩的文件格式（例如 JPEG、PNG、GIF、WOFF 等）由于已经过压缩，则不会响应压缩操作。
注：GZIP 有时会增加资产的大小。 当资产非常小且 GZIP 字典的开销大于压缩缩减的大小时，或者资源已经得到充分压缩时，通常会发生这种情况。 为了避免此问题，某些服务器允许您指定最小文件大小阈值
3.优化图像
由于图像在网页上每页负载中占据较大比例,因此图像优化成为提升性能的独特方式。
选择合适的图片格式：png/jpeg/webP
使用视频而非动画 GIF：动画 GIF 会占用大量空间。 同等画质的视频则小得多，通常低 80% 左右。 如果您的网站大量使用动画 GIF，这可能是提升加载性能最有效的方法。
使用网页字体取代在图像中进行文本编码。
4.JavaScript 库非常方便，但不一定必需。
如果您必须使用库，不妨寻找占空间较小的替代产品。 例如，Zepto 是较小的 jQuery 替代产品，Preact 是替代 React 的非常小的产品。
五.资源渲染时：优化规则--优化资源加载
1.资源加载位置：
css放在head中，先外链，后本页；js放在body底部，先外链，再本页；处理页面、处理页面布局的js放在head中，如flexible.js文件；body文件中尽量不写style标签和script标签；
2.资源加载时机：
异步加载；模块化，按需加载；资源懒加载或者资源预加载；
但是要特别注意：资源预加载时，要秉承优先级最高的事项是响应用户的原则。所以资源应该合理预加载，其余资源利用空闲时间完成推迟的工作。例如，有时候需要尽可能减少预加载数据，以便您的应用快速加载，并利用空闲时间加载剩余数据。
3.避免使用CSS表达式
注意一个css3的calc()表达式：
注意事项:
+和-操作符的两边都需要带上空格符（*和/操作符不需要）。例如：calc(50% -10px)是无效的，因为它会被认为是一个百分比数后面跟着一个负数，而不是一个表达式。
calc()可以由字面值、attr()或calc()（可以嵌套calc()函数）或
不同单位类型的的值不能再同一个calc()表达式中使用。例如calc(5px - 5px + 10s)或calc(0 * 5px + 10s)都是错误的，因为表达式中使用一个长度单位和一个时间单位相加
兼容：IE9在使用display:table时会忽略calc()。更可怕的是在IE9的background-position属性中使用calc()会照成浏览器的崩溃。
更多兼容连接：https://caniuse.com/#feat=calc
4.避免使用 CSS import
5.避免复杂选择器的使用，提高CSS渲染效率
6.减少重绘回流
元素适当地定义高度或最小高度，否则元素的动态内容载入时，会出现页面元素的晃动或位置，造成回流；
给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流；
需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围；
7.能够使用CSS实现的效果，尽量使用CSS而不使用JS实现
8.DOM优化
缓存dom:如var div = document.getElementById('div'); var len=$(' ').length
可以批量操作但是避免频繁操作dom:如字符串拼接完毕再改变dom的innerhtml
通过改变class来动态改变样式
事件代理，减少内存使用，提高性能降低代码复杂度
防抖和节流：debounce和throttle
https://juejin.im/entry/58c0379e44d9040068dc952f
及时清理环境：及时消除对象引用，清除定时器
9.精简javascript
格式：注意格式规范，注意缩进， js里使用单引号
以函数表达式的方式声明匿名函数：var fn=function(){}
内存泄漏：避免创建意外的全局变量；滥用闭包；dom 泄露；清除定时器
减少页面的重排(Reflows)和重绘(Repaints)
如果需要多次访问某个DOM节点，请使用局部变量存储它的引用
js模块化：模块化规范
少用eval
合理声明变量
10.对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
requestAnimationFrame API:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
文章参考
https://developers.google.com/web/fundamentals/
https://juejin.im/post/5a966bd16fb9a0635172a50a