高性能JavaScript读后感(一)加载与执行

最新推荐文章于 2019-12-14 03:31:49 发布

原创最新推荐文章于 2019-12-14 03:31:49 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

javascript基础专栏收录该内容

4 篇文章

订阅专栏

本文探讨了网页性能优化中的关键策略之一：JavaScript加载与执行的优化。从脚本的位置选择、脚本的组织方式到如何实现无阻塞加载等方面进行了详细说明，并提供了具体的实践案例。

写在前面

不写东西人会变懒，当然会有借口–忙，当然是借口，至于为什么会写这个，因为无聊的时候看到的，就觉得这本书写的挺好的，找个地方记录一下

1.脚本位置

当你刚开始写代码的时候肯定有人告诉你，js 的引用应该放在最后面，如果没人告诉你的话，那么就当我告诉你了，这是最简单的办法

  <html>
    <head></head>
    <body>
      <p></p>
      <script  src ='xxyy.com/a.js'></script>
    </body>
  </html>

当然凡事无绝对，放在后面的引用往往是页面加载不需要的，先让看你网站的人快速看到页面先，（ps.毕竟他们只是看看）

2.组织脚本

当你大致懂得浏览器是从上而下渲染代码的时候，你会懂的脚本该插入到html代码哪个位置，但是当你看到一个页面引用了十几个脚本的时候，你就该打开控制台看看浏览器加载这十几个脚本花了多长时间，其实发起http请求还是蛮耗时的，而且霸道的js 在下载完成后还要执行，这样一想性能是不是低了太多,所以前辈都会让你把脚本压缩合并，较少脚本的数量和大小

3.无阻塞脚本

当你按着上面的设置会出现第三种情况，就是当你加载js 的时候，(尤其是你把脚本合并后，文件比较大),会影响图片的加载，也就是会产生相对的阻塞。当然解决这种阻塞也是有办法的

延迟加载脚本

html5中有一个属性叫async html4 中有一个属性叫defer 都是用来并行下载，两者的区别在于，async 是先下载完谁执行，而defer需要等待页面完成后执行。

动态加载脚本

这种方法我经常在爬别人网站见过，

 var script = document.createElement('script');
 script.src = 'xxyy.com/b.js';
 document.head.appendChild(script);

可以用这种方法加载那些你抽出来的脚本，不影响页面的渲染的脚本，可以等图片全部加载完了，再加载，善用

脚本注入

通过ajax 异步请求，请求js代码，注入到html 中。

function DOMEval(code, doc) {
    doc = doc || document;
    var script = doc.createElement("script");
    script.text = code;
    doc.head.appendChild(script).parentNode.removeChild(script);
}