高性能javascript的加载顺序和执行原理

前言

浏览器中javascript的性能可以被认为是开发人员面临的最严重的可用性问题。今天看完了加载和执行高性能javascript这一章，我就来说说如何解决加载顺序和执行js的原理。下面就不多说了。我们来看看详细的介绍：

当浏览器遇到脚本标签时，浏览器必须首先下载外部链接文件，然后执行它。在这个过程中，页面渲染和用户交互被完全阻断。

剧本哪里比较好？

这种情况无疑存在严重的性能问题，因为脚本会阻塞页面呈现，页面呈现在全部下载并执行后才会继续。下图显示了代码的执行顺序

下载第一个js文件时，第二个js文件在第一个js文件完全下载后才会执行。但是，IE8、Firefox3.5、Safari4和Chrome2都允许并行下载js文件。不幸的是，js下载过程仍然会阻止其他资源的下载，例如图片

因此，提高性能的方法之一是将脚本放在正文的底部

组织脚本

由于下载时每个脚本标记都会阻止页面的呈现，因此有必要减少页面中包含的脚本标记的数量。解决方案：可以将多个js文件合并打包成一个js文件，这样做的好处是可以最大限度地减少延迟时间，明显提高页面的整体性能。此外，它还可以减少HTTP请求。

一般来说，下载一个100KB的文件比下载四个25KB的文件要快。

如果有多个带有外部链的js文件，它们可以合并成一个js文件

非阻塞脚本

虽然下载一个大的js文件只会产生一个HTTP请求，但是会在很长一段时间内假冒浏览器。为了避免这种情况，您需要逐步将js文件加载到页面中。

延迟脚本

defer属性表示这个元素中包含的脚本可以被延迟，但是它只被IE4和Firefox3.5浏览器支持

简单来说，defer的机制是下载js文件，直到加载DOM，它不会阻塞浏览器中的其他进程

不支持延迟属性的浏览器中的弹出顺序是：延迟、编写脚本、加载

支持延迟属性的浏览器的弹出顺序是：脚本、延迟和加载

因此，在执行onload事件之前会调用defer

动态脚本

注入动态脚本有两种方式，第一种是动态创建脚本标签，第二种是通过XMLHttpRequest注入页面

我先说说第一个怎么用：

该技术的关键点在于，无论何时开始下载，文件下载和执行过程都不会阻塞页面上的其他进程，但是当使用动态脚本节点下载js文件时，返回的代码会立即执行(除了Firefox和Opera之外，它们会等待前面所有的动态脚本节点完成执行)

在主流浏览器中，收到脚本标签时会触发一个load事件，但ie浏览器不会，所以我们必须打包一个兼容所有浏览器的方法

这种方法的缺点是需要知道文件的加载顺序。当有许多js文件并且依赖关系复杂时，很难管理加载依赖关系的顺序

这样编写的代码很难维护

动态创建脚本的第二种方法

实际上，这相当于用内联脚本创建一个脚本标签。将新创建的脚本元素添加到页面后，代码将立即执行，然后准备就绪。

优点：下载的js代码不会立即执行，这会延迟脚本的执行，直到您准备好。此方法也兼容所有浏览器

缺点：js文件必须和请求的页面在同一个域，js文件不能从CDN下载。一般来说，大规模的web应用程序不会使用这种方法

建议使用非阻塞模式：

首先添加dynamics所需的代码，然后假装初始化页面上的其余代码

[图像上传失败.(图像-dd3f9-1515902024710)]

上面介绍了这么多，推荐一些动态延迟加载的库

有YUI3、LazyLoad、LABjs等库。我个人觉得LABjs库很好用，但是一直没有用过。你可以去了解一下，这里就不告诉你怎么用了。

总结：

提高js性能的几个方面

1./body在关闭标签之前，将所有脚本标签放在页面底部。这确保了在执行脚本之前已经呈现了页面

2.合并脚本。页面中的脚本标签越少，加载和响应的速度就越快。无论是外部链文件还是嵌入式脚本，都是如此

3.有很多方法可以下载js而不阻塞

3.1使用脚本标签的延迟属性

3.2使用动态创建的脚本元素来下载和执行代码

3.3使用XHR对象下载js代码并将其注入页面

通过以上策略，需要使用大量js的web应用的实际性能可以得到很大的提升

好了，这就是本文的全部内容。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。