javascript 性能优化--脚本的加载执行【一】

Love The Way You Lie 2022-10-06 11:56 200阅读 0赞

**目录**

加载与执行

脚本位置

组织脚本

无阻塞的脚本

延迟脚本

动态脚本

--------------------

# 加载与执行   #

多数浏览器使用单一进程来处理用户界面【UI】刷新和JS代码执行，所以同一时刻只能做 一件事。JS执行过程耗时越久，浏览器等待响应的时间就越长。

## 脚本位置 ##

这意味着每次<script>出现都会霸道的让页面等待脚本解析和执行。

这也是为什么建议**将脚本放在body底部而不是head标签里**，防止下载解析运行js脚本阻塞渲染页面，前者可能出现的情况就是页面刚开始是一片空白。

## 组织脚本 ##

在无特殊处理的情况下，每一个<script>标签都会阻塞页面渲染，所以大部分情况下减少页面包含的<script>标签有助于改善这种情况。这种不只是针对外链脚本，内嵌的<script>标签存在桐言的情况，虽然不用去下载，但是执行脚本仍然会造成整体加载延时。

所以，**我们可将一些较小的脚本合并为一个整体的文件**。4个2k的文件与一个8k的脚本文件，同样网络条件的情况下，一定是8k的脚本文件加载更快，因为4个小文件会有更多的http请求，**额外的HTTP请求一定会带来性能开销**。

## 无阻塞的脚本 ##

但是现在web功能越来越丰富，不可能所有的文件都集合在一个单独的文件里面，如果单独的文件特别大，那么浏览器仍然会阻塞很长一段时间，所以需要异步的加载js文件，先加载必需的js文件，然后向页面逐步加载Javascript文件。

###         延迟脚本 ###

html4 为<script> 标签提供了扩展属性 defer, 带有defer属性的javascript文件下载时，它不会阻塞浏览器的其他进程，这类文件可以与页面的其他资源并行下载。下载完成之后不会立即执行，直到DOM加载完成（onload事件被触发之前）。

html5 新增了一个async扩展属性，与defer一样，可以与其他资源并行下载，不会阻塞其他浏览器进程，但是执行时机有一点不一样，async是加载完成之后立即执行，defer是等待页面dom加载完成之后再执行。

参考下面的图（source ：[https://html.spec.whatwg.org/multipage/scripting.html\#attr-script-defer][https_html.spec.whatwg.org_multipage_scripting.html_attr-script-defer]）

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1NTM0Nzg5_size_16_color_FFFFFF_t_70][]           动态脚本 ###

动态的创建script标签 【document.createElement('script')】 ，这种情况，下载和执行都不会阻塞页面其他进程。

ajax请求脚本内容，然后动态创建script标签，然后赋予内容，这种对比上面的好处就是，下载完成之后不立即执行，可以控制到特定的流程之后再执行。

参考资料：

《高性能javascript》第一章

[https://html.spec.whatwg.org/multipage/scripting.html\#attr-script-defer][https_html.spec.whatwg.org_multipage_scripting.html_attr-script-defer]

[        https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script][https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element_script]

[https_html.spec.whatwg.org_multipage_scripting.html_attr-script-defer]: https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1NTM0Nzg5_size_16_color_FFFFFF_t_70]: /images/20221005/e3ad2e2868ca4bd49415b2ed212717d5.png
[https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element_script]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script