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 对比度调色板