浏览器工作原理:
1.边下载html边解析
2.解析过程中发现script标签,暂停解析加载js 渲染引擎 =》 js引擎
3.js执行完毕,继续解析渲染 js引擎 =》 渲染引擎
浏览器优化
阻塞效应的优化:
- script标签放在最底部(不指定协议一般为HTTP协议)
- 使用DOMContentLoaded回调函数
- 对脚本的执行进行优化
– 使用defer(延迟加载,等待dom渲染完成后执行)
– 使用async(新开一个线程加载脚本,加载完成后停止渲染执行脚本,脚本执行后继续渲染)
资源加载限制
浏览器对于同一个域名同时加载资源有限制(6-20个)
优化方法:
1.把静态资源放在不同的域名之下,加快下载速度;
重绘/重流
- 尽量不要变动高层的 DOM 元素,而以底层 DOM 元素的变动代替
- 读取 DOM 或者写入 DOM,尽量写在一起,不要混杂。不要读取一个 DOM 节点,然后立刻写入,接着再读取一个 DOM 节点。
- 缓存 DOM 信息。
- 不要一项一项地改变样式,而是使用 CSS class 一次性改变样式。
- 使用documentFragment操作 DOM
- 动画使用absolute定位或fixed定位,这样可以减少对其他元素的影响。
- 只在必要时才显示隐藏元素。
- 使用window.requestAnimationFrame(),因为它可以把代码推迟到下一次重流时执行,而不是立即要求页面重流。
- 使用虚拟DOM(virtual DOM)库。