[高性能javascript笔记]1-加载和执行

时间 2020-01-09

标签高性能 javascript 笔记加载执行栏目 JavaScript 繁體版

原文原文链接

不管是外链仍是内链，<script>标签每次出现都霸道地让页面等待脚本的解析和执行。这是页面生存周期的必要环节，由于脚本执行过程当中可能会修改页面内容。
在<header>标签中加载多个javascript文件，因为脚本会阻塞页面渲染，直到它们所有下载并执行完成后，页面的渲染才会继续。浏览器在解析到<body>标签以前，不会渲染页面的任何部分。把脚本房东啊页面顶部将会致使明显的延迟，一般表现为显示空白页面，用户没法浏览内容，也没法与页面进行交互。
如今的浏览器基本都容许并行下载javascript文件，<script>标签在下载外部资源时不会阻塞其它<script>标签，遗憾的是，javascript下载过程仍然会阻塞其它资源的下载，好比图片。
脚本位置：推荐将全部的<script>标签尽量放到<body>标签的底部，以尽可能减小对整个页面下载的影响。
组织脚本：减小页面包含的<script>标签数量有助于改善下载阻塞页面渲染，不要把内嵌脚本紧跟在<link>标签以后，否则会致使页面阻塞去等待样式表的下载。下载单个100kb的文件将比下载4个25kb的文件更快。
无阻塞的脚本：尽管下载单个较大的js文件只产生一次http请求，却会锁死浏览器一大段时间。为避免这种状况，你须要向页面中逐步加载js文件，这样作在某种程度上来讲不会阻塞浏览器。

“无阻塞脚本的秘诀在于，在页面加载完成以后才加载js代码，这意味着在window对象的load事件触发后再加载脚本。”
延迟的脚本：<script>的扩展属性defer.
defer属性指明本元素所含的脚本不会修改dom,所以代码能安全地延迟执行。（可是跨浏览器不是个理想的方案，其它浏览器会被忽略）

不过如今主流兰奇都已经支持defer.

html5引入了async属性，用于异步加载脚本。与defer的相同点都是采用并行下载，在下载过程当中不会产生阻塞。
区别在于，async是加载完成后自动执行，而defer须要等待页面完成后执行。

defer属性仅当src属性声明时才生效。

动态脚本元素：

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();
                };
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }

推荐的无阻塞模式：
https://github.com/rgrove/lazyload
https://github.com/getify/LABjs