Javascript负载执行优化研究报告

时间：2021-10-16 来源：互联网编辑：宝哥软件园浏览：次

做前端开发一年多了，对前端还是有点看法的。今天，我想和大家分享一下。

前端开发离不开各种利器。比如我习惯用谷歌浏览器和重型武器Fiddller。

1.原来的情况。

让我们首先看看下面的代码：

复制代码如下：% @ page language=' c# ' autoeventreut=' true ' code behind=' default . aspx . cs ' inherits=' jsload . default ' %。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head id=' head ' title/title link href=' Styles/site . CSS ' rel='样式表' type=' text/CSS '/script src=' http 3366

估计90%的程序员都会把js文件放在脑袋里，但是你有没有深入研究过？很多浏览器使用单线程来做“UI更新”和“JS脚本处理”。

也就是说，当执行引擎遇到“脚本”时，页面的下载和呈现必须等待脚本被执行。那么对于用户来说，看着锁定的页面，

此时，用户可能会为您关闭它。

从上面的瀑布图中，我们可以看到两点：

首先：

三个js文件并行下载，但是按照我上面的理论，js应该是一个一个执行的。但是在IE8、Firefox3.5和Chrome2中，js是并行下载的。

这样挺好的，但是还是会阻碍一些其他资源的下载，比如图片。

第二：

图像1.jpg的下载是在js执行后触发的，验证了上述情况，阻止了图像加载。

二：优化的第一步。

由于js阻止UI渲染，我们可以考虑将js放在/body之前，这样脚本之前的html就可以完美呈现，用户也不会看到页面空白等待。

而苦恼，自然提高了友善度。

复制代码如下：% @ page language=' c# ' autoeventreut=' true ' code behind=' default . aspx . cs ' inherits=' jsload . default ' %。

下图还显示了1.jpg和三个js几乎是并行下载和执行的。时间从“469毫秒”缩短到“326毫秒”。

第三，优化的第二步。

看上面的“瀑布图”，估计大家都能看到三个js文件已经发出了三个“Get”请求，大家都知道Get请求需要带一个http头。

因此，这需要时间，所以我们采取的解决方案自然是减少Get请求。通常有两种方案。

首先合并js文件，比如合并上面的“hello.js”和“world.js”。

其次，使用第三方工具，比如php中的Minify。

关于第二种方法，淘宝还是用的很多。查看其中一个脚本并应用三个js文件。从三个Get请求到一个。

四：第三步是优化。

无论是把js文件放在脚末，还是把三个文件合并成一个，其本质都是“阻塞模式”，也就是锁定浏览器，当网页变得越来越复杂，js文件越来越多，或者。

让我们头疼吧。这时候我们提倡一种“非阻塞模式”来加载js脚本，即在所有页面都呈现后添加js，对应window.onload事件的触发。

追加js，这就是所谓的"无阻塞",但是其中有一个非常要注意的地方就是我们对射流研究…的要求是否有严格的顺序。

第一：无顺序要求，比如我对“hello.js”和“world.js”没有顺序要求，那么我们完全可以用jquery来动态追加实现。

复制代码代码如下：%@页面语言='C#' AutoEventWireup='true '代码隐藏='默认值。aspx。cs ' Inherits=' JsLoad .默认' %

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head id=' head ' title/title link href=' style/site。CSS ' rel='样式表type=' text/CSS '/head dy img src=' http 3追加(' script src=' js/hello。js ' type=' text/JavaScript ' \/script ')$(' # head ').追加(' script src=' js/world。js ' type=' text/JavaScript ' \/script ')；}/脚本/正文/html

从图中可以看出，' hello.js '和“world.js”出现在蓝色线以后，也就说明这两个射流研究…是在DomContentLoad结束后再进行触发加载的，这样就不会造成页面的锁定

等待。

第二：有顺序要求

为什么一定要有顺序要求这个概念呢？对于上面的那个动态追加的"两个js "文件，在工业管理学(工业工程)系列中，你不能保证hello.js一定会在world.js前执行，

他只会按照服务器端返回的顺序执行代码。

复制代码代码如下：%@页面语言='C#' AutoEventWireup='true '代码隐藏='默认值。aspx。cs ' Inherits=' JsLoad .默认' %

//IE if(脚本。readystate){ script。onreadystatechange=function(){ if(脚本。readystate==' loaded ' | |脚本。readystate==' complete '){脚本。onreadystatechange=null回调();} } } else { //非IE脚本。onload=function(){ callback()；} } script . src=URL document . getelementbyid(' head ').appendChild(脚本);} //第一步加载jquery类库加载脚本(' jquery/jquery-1。4 .1 .js '，function () { //第二步加载你好。js Loadscript(' js/hello。js '，function () { //第三步加载世界。js Loadscript(' js/world。js '，函数(){ 0

});});});/脚本/正文/html