前端优化方法

浏览器工作原理：

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）库。