首屏加载时间
浏览器从相应用户输入网址,到首屏内容渲染完成
(performance.timing.domComplete-
preformance.timing.navigationStart) /1000
解决方案
1. 减少入口文件体积
2. 静态资源本地缓存
3. UI框架按需加载
路由懒加载
HTTP缓存
合理利用localstorage
CDN 资源缓存
UI框架按需加载
避免组建重复打包
(例如A.js是一个常用的库,现在有有个路由使用A.js文件,这样避免重复下载)
CommonsChunkPlugin
图片资源压缩
webp图片
jpg图片压缩工具压缩
在线字体图标或者雪碧图,减小http请求压力
gzip压缩
查看资源加载时间
performance.getEntries()
优化延迟
DNS 解析 优化
DNS prefetch
限制Domain数量
控制第三方的domain数量
不要使用DomainSharding
减少TCP创建开销
减少页面重定向
避免多次重定向
当重定向的时候,所有的TCP链接必须重新建立
后端 rewrite
SPA CDN
HTTP2
优化带宽
延迟加载
lazyload
预加载
preload 提前加载
prefetch
延迟加载资源
用户行为,难以预测,靠埋点收集
浏览器空闲后加载,可能会点击后才会用的东西
不加载
noload
资源文件 压缩优化
broti chrolme出品转为http传输压缩 nginx做配置
gzip 可以压缩好多东西
HTTP2.0 头文件压缩
minification
牺牲代码可读性,减少文件体积
通过调用成熟的库来实现
codesplit
TreeShaking
识别代码中的死代码
移除按规的Library
查看打包后的输出体积图
webpack-bundle-analyzer
优化延迟
CDN
缓存
强缓存和协商缓存