加载和执行JS的正确姿势

zhichangterry 发布于2019-08-20 14:34 / 2411人阅读

摘要：在这些文件的下载执行过程中，用户看到的则是一片空白。页面仍然必须等到所有代码下载并执行完毕才能继续渲染。

前言

kyrieliuの《高性能JavaScript》读书笔记。

script标签是一个很“霸道”的狠角色，它的每次出现都让页面等待脚本的解析和执行。也就是说，不管当前的javascript代码是内嵌还是包含在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。
其实，script标签的“霸道”是必须的，因为页面的生存周期中，脚本的执行可能会修改页面的内容。
总之，在解析和执行js的这个过程中，页面渲染和用户交互完全被阻塞了。

脚本位置

说起脚本的位置，脑海里不禁想起来那两句真言：

css放在里

js放在前

至于why呢，举个栗砸：

一个栗子

hello from kyrieliu.

这一段看似正常的代码实际上有着肥肠严重的性能问题：在head中加载了三个js文件。
前面我有说到，js文件会阻塞页面渲染，知道它们全部下载并执行完毕后，页面渲染才能继续（无情无耻无理取闹）。
纵观一份html文档，用户真正看得见的内容基本上都写在body标签里，也就是说，浏览器在解析到body标签之前，不会渲染页面的任何部分。现在又写了三个脚本到head标签里面，好嘞，这下子渲染的延迟更明显了，用户在打开这样的一个页面时，看到了what？白屏！用户不能浏览页面的内容，更无法与页面进行交互。

场景还原

第一个js文件开始下载，与此同时阻塞了页面其他文件的下载。等呀等，ok，第一个js文件终于下载完了，第二个js按捺不住自己喜悦的心情，正要开始下载，突然，第一个js文件说：“且慢，老子还没有完事呢”，第二个js文件吓了一跳，站在原地不动。第一个js文件开始执行，等到执行完毕，第二个js文件才得以开始下载。
总之，每个文件必须等到前一个文件下载并执行完成才会开始下载。
在这些文件"one by one"的下载执行过程中，用户看到的则是一片空白。

不是那么好的好消息

IE8/Firefox3.5/Safari 4/Chrome 2都允许并行下载js文件，也就是说，script标签在下载外部资源时，不会阻塞其他的script标签。
遗憾的是：

js文件的下载过程仍然会阻塞其他资源的下载，比如图片。

页面仍然必须等到所有js代码下载并执行完毕才能继续渲染。

因此，尽管浏览器通过允许并行下载提高了性能，但脚本阻塞仍然是一个问题。
综上，推荐将所有的script标签尽可能的放在body标签的底部，以尽量减少对整个页面渲染的影响。

组织脚本

既然每个script标签初始下载时都会阻塞页面渲染，那么我们可以通过减少页面上script标签的数量来改善这一情况。不光是外链的脚本，内嵌脚本的数量同样也要限制（毕竟执行js代码也会阻塞页面的渲染）。
多于外链的脚本，这里的情况有一点需要额外注意的地方：考虑HTTP请求会带来额外的性能开销，所以下载单个100kb的文件要比下载四个25kb的文件更快。从这个角度出发，更能说明减少外链脚本文件的数量将会改善性能。
What u should do？合并脚本！

无阻塞的脚本

随着web应用的功能越丰富，所需要的js代码就越多，所以精简源代码也并不总是可行。尽管下载单个较大的js文件只产生一次HTTP请求，但这样做却会锁死浏览器一大段时间。
为了避免这种情况，需要向页面中逐步加载js文件，这样做，在某种程度上来说不会阻塞浏览器。

延迟的脚本

HTML4为script标签定义了一个扩展属性：defer。Defer表明本元素所含的脚本不会修改DOM，因此代码能安全的延迟执行。
带有defer属性的script标签可以放在文档的任何位置（不会阻塞浏览器的其他进程，此类文件可以与页面中的其他资源并行下载），对应的js代码将在页面解析到script标签时开始下载，但并不会执行，（onload事件被出发前）才会执行。
PS：截至这本书的第一版（2010年11月），这个属性对IE和Firefox的支持性比较好（我的天居然有IE），如果真要投入到实际的项目中，不妨先去检查一下浏览器的兼容性先~

动态脚本元素

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js_file.js";
document.getElementsByTagName("body")[0].appendChild(script);

Firefox/Opera/Chrome和Safari 3+会在script元素接收完成时出发一个load事件，所以你可以通过监听这个事件来获得脚本加载完成时的状态：

script.onload = function(){
    console.log("script loaded.");
}

一向特立独行的IE自然有他的另一套：触发一个readystatechange事件。script元素提供一个readyState属性，有以下五种取值：

"uninitialized"

"loading"

"loaded"

"interactive" 数据完成下载但尚不可用

"complete"

所以，

script.onreadystatechange = function(){
    if (script.readyState == "loaded" || script.readyState == "complete"){
        script.onreadystatechange = null;
        console.log("script loaded.");
    }
}

至此，我们得到了一个可以应用于广泛浏览器的动态加载脚本用的函数：

function loadScript(url, callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    
    if (script.readyState){//IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        }
    }else{
        script.onload = function(){
            callback();
        }
    }
}

可以这么用：

loadScript("file.js",function(){
    console.log("script loaded.");
});

也可以这么用：

loadScript("file_1.js",function(){
    loadScript("file_2.js",function(){
        loadScript("file_3.js",function(){
            console.log("all files are loaded.");
        });
    });
});

XMLHttpRequest脚本注入

标题看起来很高大上的样子，其实就是Ajax。

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
};
xhr.send(null);

局限：跨域问题。

小结

body闭合标签之前，将所有的script标签放到页面底部。这样能确保在脚本执行前页面已经完成了渲染。

合并脚本。页面中的script标签越少，加载也就越快，响应也更迅速。

无阻塞下载js：

script标签的defer属性

动态创建script元素来下载并执行代码

使用XHR对象下载js代码并注入页面中。

分享一个还算有趣的前端er:——微信公众号：刘凯里（kkkyrieliu）

专线服务私有云正确姿势 js页面加载后执行加载执行执行与加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81751.html

我的页面我做主——浏览器去广告正确姿势

摘要：简单高效的自定义方式对于这些情况我们可以使用一个强大的浏览器插件，简称，中文俗称为油猴，支持和浏览器。简单几行代码，就可以去除大部分页面广告。声明需要使用的函数。会CSS就会去广告~ 传统去广告方法的弊端我们浏览网页的时候经常不免会看到各种不想看到的广告内容，最简单的方案就是通过浏览器插件来解决，比如大名鼎鼎的AdBlock插件以及国内的各种广告拦截助手。但这些插件的拦截能力可...

iamyoung001 2019-08-26 10:20 评论0 收藏0
我的页面我做主——浏览器去广告正确姿势

摘要：简单高效的自定义方式对于这些情况我们可以使用一个强大的浏览器插件，简称，中文俗称为油猴，支持和浏览器。简单几行代码，就可以去除大部分页面广告。声明需要使用的函数。会CSS就会去广告~ 传统去广告方法的弊端我们浏览网页的时候经常不免会看到各种不想看到的广告内容，最简单的方案就是通过浏览器插件来解决，比如大名鼎鼎的AdBlock插件以及国内的各种广告拦截助手。但这些插件的拦截能力可...

20171112 2019-08-30 15:44 评论0 收藏0
Navicat使用Instant Client创建连接到Oracle数据库的正确姿势

摘要：今天就和大家分享一下使用连接数据库的正确姿势。在普通的情况下，用户可以通过和来访问数据库中的数据。通俗地讲，就是一个使用来访问数据库的一个图形化界面。他是这么描述的看不懂没关系要么谷歌要么度娘。原理，请自行谷歌。太长不看版： 1.你什么操作系统，Instant Client就选什么操作系统 2.你的navicat是多少位（32、64），Instant Client就选多少位 3.你的...

yanwei 2019-08-06 14:18 评论0 收藏0
Navicat使用Instant Client创建连接到Oracle数据库的正确姿势

摘要：今天就和大家分享一下使用连接数据库的正确姿势。在普通的情况下，用户可以通过和来访问数据库中的数据。通俗地讲，就是一个使用来访问数据库的一个图形化界面。他是这么描述的看不懂没关系要么谷歌要么度娘。原理，请自行谷歌。太长不看版： 1.你什么操作系统，Instant Client就选什么操作系统 2.你的navicat是多少位（32、64），Instant Client就选多少位 3.你的...

DevTTL 2019-07-23 17:47 评论0 收藏0
有了 TensorFlow.js，浏览器中就能进行实时人体姿势判断

摘要：反馈检测到的每个人的置信度值以及检测到的每个姿势关键点。姿势置信度这决定了姿势判断的整体置信度。在较高级别，这将控制回馈的姿势较低置信度分数。只有在调整姿势置信度得分不够好的情况下，为了过滤掉不太准确的姿势，该数值应该增加或减少。文 / Dan Oved，Google Creative Lab 的自由创意技术专家，纽约大学 ITP 的研究生。编辑和插图 / 创意技术专家 Irene Alv...

KaltZK 2019-04-25 18:28 评论0 收藏0