性能优化-js优化
js优化
当 HTML 解析器遇到一个 script 标记时,它会暂停构建 DOM,将控制权移交给 JavaScript 引擎;等 JavaScript 引擎运行完毕,浏览器会从中断的地方恢复 DOM 构建。
这也就是为什么我们需要将script
tag放在页面的底部。
/React APP一般会如此使用。因为React需要将整个APP 渲染到一个DOM节点上,如果放置在DOM之上,会造成React找不到该渲染的节点,从而报错/
而我们一般不建议在render tree
刚刚建立的时候,就使用JS去操作DOM,从而造成reflow,也就是说,希望JS不要成为render tree
的一部分。这个时候,我们将<script>
放在页面靠下的部分就可以不阻塞页面的渲染。
如果你的<script>
是从CDN获取资源,那么等待的过程也会造成一定的阻塞。
你可以将<script>
加上 async
,让它变为异步加载。
为了实现最佳性能,建议去除关键渲染路径中任何不必要的JavaScript
Lee2