url输入
2020-12-14 21:19:13 0 举报输入url
作者其他创作
大纲/内容
CSSDOM树
1、压缩2、懒加载3、升级http4、CDN
样式计算找到对应的样式
memory(小js图片)
解析js
webpack-bundler-analyzer
max-agepublicprivateno-cache(协商缓存标志)no-store
边下载边解析
DOM树
webpack优化
cache-loader缓存耗时loader
缓存位置
优化：1、样式使用cssText2、样式使用class类名3、动画尽量用css4、dom使用createDocumentFragment5、缓存布局信息div.offsetWidth6、resize写好防抖7、图片提前写好宽高
html文件
构建布局树找到对应的位置，和是否展示
noParse不解析第三方文件
强制缓存
loader
协商缓存
服务器
dns系统进行ip查找
module
三次握手、四次挥手
缓存
plugin
文件标识
视图树块化光栅找到位图，渲染图块
TLS链接、协商加密
cache-control(http1.1)
Expires（http1.0）
1、添加删除2、大小改变3、内容改变4、位置改变5、窗口大小改变6、页面初始化渲染
resolve
dist(大文件css一部分js）
请求优化
重排：元素样式的更新
css文件
exclude/include路径相关
减少请求时间
Etag/If-None-Match
alias更快解析文件路径
重绘：dom变化引发几何属性变化，导致重新构建渲染树
Last-Modified/If-Modifed-Since
thread-loader多进程打包
1、小图用base642、雪碧图3、使用缓存
减少请求数量
输入url
时间：秒
1、js放头部会阻塞dom树渲染2、js可能会操作dom
资源
extensions更快解析文件后缀
speed-measure-webpack-plugin
渲染树
职业：暂无
0 条评论
下一页
