客户端性能优化总结

客户端性能优化总结

1. js脚本后置，css脚本前置
   css前置的目的是为了让浏览器尽快渲染页面，避免让用户长时间盯着白屏等待。
   
2. 减少文件体积
   （1）删除js和css的注释（生产环境下注释是没用的）
   （2）压缩图片体积（网页中的图片能看清就可以，不需要高清，如需要高清使用线上图片地址）
3. 压缩文件（在代码发布到生产环境时进行压缩，或在服务器上进行gzip压缩，会大大降低网络传输耗时，但不能压缩图片）
4. 雪碧图（吧多个小图片合成一张大图，减少网络请求）
5. 尽量少用图片（能用字体图标icon的就用图标）
6. 合并多个文件（减少网络请求）
7. 避免重绘和重排
   当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。
   （1）img标签未设置宽高，浏览器渲染时不知道图片的宽高，等图片下载完之后得到图片的具体尺寸还要重新再渲染一遍
   （2）增加，删除，显示，隐藏dom元素
8. 避免404请求
   为了让你的网站能在出现这种错误的时候，给用户相对较好一些的用户体验，应该设计自定义的404错误页面。
9. 减少dom元素数量
   除了页面加载时去掉不显示的元素， 能用一个元素实现的，不要用两个。
10. 异步加载组件
    异步加载组件就是在定义组件的时候什么都不做，只有当组件第一次使用的时候才进行加载和渲染。
11. 对基础数据请求缓存
    像城市，公司等不常变更的数据，直接缓存在浏览器中，就不用每次浏览器都向服务器请求了。
12. 静态资源放到CDN
    静态资源使用频率高，流量占用大。对于有追求（访问量稍大）的网站，都会把静态资源放置到CDN服务器，不占用业务服务器的网络带宽，从而达到更好的用户体验。
    放在自己web文件夹里进行加载，如果是你自己在本地访问的话当然会比cdn更快。
    但如果是把页面发布到真正的服务器上，通过网站域名访问就不一定了。除非你的服务器比cdn的服务器更快。
13. 避免串行请求（串行请求时间长）
    async/await语法糖，由于使用了await导致前一个请求后才会请求下一个，无形中延长了请求时间，可使用promise.all()让两个请求并发执行
14. 组件的使用优化