页面优化——js异步载入

Posted zhchoutai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面优化——js异步载入相关的知识,希望对你有一定的参考价值。

同步载入

在介绍js异步载入之前。我们先来看看什么是js同步载入。我们平时最常使用的就是这样的同步载入形式:

<script src="http://XXX.com/script.js"></script>

同步模式。又称堵塞模式,会阻止浏览器的兴许处理,停止了兴许的解析。因此停止了兴许的文件载入(如图像)、渲染、代码运行。一般的script标签(不带async等属性)载入时会堵塞浏览器,也就是说,浏览器在下载或运行该js代码块时。后面的标签不会被解析,比如在head中加入一个script,但这个script下载时网络不稳定,非常长时间没有下载完毕相应的js文件,那么浏览器此时一直等待这个js文件下载,此时页面不会被渲染,用户看到的就是白屏。

曾经的一般建议是把<script>放在页面末尾</body>之前,这样尽可能降低这样的堵塞行为。而先让页面展示出来。

异步载入

它同意无堵塞资源载入。而且使 onload 启动更快,同意页面内容载入。而不须要刷新页面,也能够依据页面内容延迟载入依赖。

常见异步载入举例:

(Script DOM Element)

(function() {
     var s = document.createElement(‘script‘);
     s.type = ‘text/javascript‘;
     s.async = true;
     s.src = ‘http://yourdomain.com/script.js‘;
     var x = document.getElementsByTagName(‘script‘)[0];
     x.parentNode.insertBefore(s, x);
 })();

这样的方法是在页面中<script>标签内,用 js 创建一个 script 元素并插入到 document 中。

这样就做到了非堵塞的下载 js 代码。

延迟载入(lazy loading)

前面攻克了异步载入(async loading)问题,再谈谈什么是延迟载入。
延迟载入:有些 js 代码并非页面初始化的时候就立马须要的,而稍后的某些情况才须要的。延迟载入就是一開始并不载入这些临时不用的js,而是在须要的时候或稍后再通过js 的控制来异步载入。


也就是将 js 切分成很多模块,页面初始化时仅仅载入须要马上运行的 js ,然后其他 js 的载入延迟到第一次须要用到的时候再载入。
特别是页面有大量不同的模块组成,非常多可能临时不用或根本就没用到。


就像图片的延迟载入,在图片出如今可视区域内时(在滚动栏下拉)才载入显示图片。


异步载入。须要将全部 js 内容按模块化的方式来切分组织,当中就存在依赖关系,而异步载入不保证运行顺序。?js模块化攻克了这个问题,请移步?了解模块化开发?

?

以上是关于页面优化——js异步载入的主要内容,如果未能解决你的问题,请参考以下文章

seajs入门使用

jQuery-异步请求

从JVM的角度看JAVA代码--代码优化

面试:提升页面性能优化的方法有哪些?

vue路由自动加载、按组件异步载入vuex以及dll优化

模块用法