性能优化常用方法

1. 优化方法论（闭环）

发现–分析–埋点–监控–优化–评估

2. 用户常用手段（减尽避推预减 少使开顶底图25k 削js和css，link=>@impor)

(1)减少DNS查找次数
(2)尽量减少HTTP请求次数
(3)避免跳转404错误

(4)推迟加载首屏外内容
(5)预加载首屏相关内容
(6)减少DOM元素数量
要让首屏尽快出来, 得给浏览器减轻渲染首屏的工作量. 可以从两方面入手:
1）减少DOM节点数, 节点数越少, 意味着Tokenization, Rendering等操作耗费的时间越少.(对于典型的淘宝商品详情页,经测试发现, 每增加一个DOM节点, 会导致首屏渲染时间延迟约0.5ms)
2）减少脚本执行时间. 脚本执行和UI Update共享一个thread, 脚本耗的时间约少, UI Update就能越发提前.
(7)少使用IFRAME
(8)使用内容分发网络CDN加速
(9)开启GZip加速

(10)css置顶，js置底
(11)优化图像大小
(12)保持单个内容小于25k

(13)削减js和css
(14)使用link代替@import
加载页面时，link标签引入CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3. 新时代的方法

3.1 优化webpack
合理使用sourceMap：
代码分割code Spliting：分离业务代码、公共代码、第三方依赖
tree shaking：去掉不必要的部分

scope hositing：减少代码体积，代码运行时作用域变少，所以开销也小
使用DLLplugin优化打包：将不做修改的依赖文件提前打包，代码发布的时候就不用在对其打包，提高构建时间性能
happyPack多进程打包
3.2 HTTP2（多首服)
多路复用
首部压缩
服务端推送

4. 优化相关工具

lightHouse
pageSpeed 需要翻墙
performance
rendering
request blocking

layers 确定是否有首屏之外的加载内容
web disability simulator
website seo checker
color contrast analyser 对比度调色板