web 性能优化主要分为两类：加载时优化与运行时优化；
从以下几个方面考虑；减少请求次数、减少资源加载量、减少请求耗时、提高页面响应速度、注重用户体验；
性能优化也有相应的代价，需要根据实际场景测试后进行权衡，避免不必要的优化。
1.DNS 服务优化
- 采用 DNS 加速器加速 DNS 解析；
- 配置 host，减少 DNS 解析；
2.TCP 连接复用 keep-alive
- HTML，css，js等文件可以通过一次 TCP 连接发起请求
3.SQL 优化
- 通过优化 SQL 查询数据库的时间，减少 waiting 时间
4.提高服务器带宽
- 升级服务器带宽提高响应速度
5.gzip 压缩
- Content-Encoding: gzip 后台开启 gzip 压缩响应资源
- 浏览器解压缩资源
6.优化 css
- 去除冗余的 css 选择器和内容，减少重复渲染
7.优先加载 css
- css 先加载呈现页面内容，再加载 js 资源
8.懒加载
- 先加载首屏资源，提高页面响应速度
9.资源预加载
- 一些重要的资源可以预先加载，提高用户点击时的页面响应速度，比如上一页、下一页内容
10.利用 HTTP 缓存
- 除首页 HTML 之外资源可以利用 Cache-Control: max-age 强制缓存
- 利用 md5 对资源添加版本号
- 当资源发生更新时，版本号会变化，重新去服务器获取新资源
11.多个域名分批请求
- 一个域名的最大并发请求数是有限制的
- 将资源进行分类，不同的 CDN 域名请求不同的资源，提高并发请求数
- cookie-free: css 资源，图片资源等利用 CDN 域名可以不用携带 cookie，减少上传量
12.采用 HTTP2.0
- 多路复用；
- 头部压缩；
- 服务端推送
13.服务端渲染
- 服务端渲染的网站则会渲染完页面再返回 HTML 文件，客户端只需解析 HTML 即可
- 首屏渲染速度提高，同时利于 SEO 优化
14.采用 iconfont 字体图标
- 字体图标生成文件小，矢量图不失真
- 可以和字体一样设置属性
15.减少页面的重排重绘
- JS避免直接修改样式，通过替换 class 来修改样式
- 合理利用文档流特点，脱离文档流使得操作 DOM 对页面其它元素的影响降低
- 使用 CSS3 的 transform 触发浏览器开启 GPU 加速，如
transform: translateZ(0) - 减少浮动的使用，减少渲染性能消耗
16.添加 favicon.ico
- 如果没有设置图标 ico，浏览器默认的图标会多发送一个 404 或者 500 的请求
17.采用事件委托添加事件
- 利用事件冒泡机制，通过指定一个事件来托管子元素的事件
- 多数鼠标事件、键盘事件都适合采用事件委托
