提高js加载速度,实现js无阻塞加载方式,高性能的加载执行JavaScript

时间: 2017-11-01阅读: 3992标签: 性能

由于js的堵塞特性,当浏览器在加载javascript代码时,不能同时做其他任何事情,如果javascript执行时间越久,浏览器等待响应的时间就越久。所以为了解决防止先执行js代码,然后再继续页面的解析和渲染,我们一般采用调整js脚本的位置,通过采用将所有的<script>标签尽可能的放在<body>标签的底部,来减少对整个页面加载的影响。

如果js文件比较多,会产生大量的Http请求,我们都知道http请求是比较耗费性能的事情,例如你加载1个100kb的文件比加载10个10Kb的文件速度要快,因此我们会采用合并压缩js脚本来达到优化速度的效果,当然有许多出色的工具可以加快JavaScript装入的速度。比如Lab.js,使用它你就可以并行装入JavaScript文件,加快总的装入过程。你还可以为需要装入的脚本设置某个顺序,那样就能确保依赖关系的完整性。而且开发者声称其网站上的速度提升了2倍。

除了上述内容以外,这篇文章主要讲解如果延时加载js和动态加载js,达到页面无堵塞的效果。

js的延时加载

defer的使用 

defer是一个常用的优化方案,它表示脚本会被延迟到文档完全被解析和显示之后再执行,加载后续文档元素的过程将和js脚本的加载并行进行(异步),这样页面加载会更快。  

<script src="main.js" defer></script>


async的使用  

async是html5的属性,async 属性规定一旦脚本可用,则会异步执行。async不保证按照脚本出现的先后顺序执行,因此,确保两者之前互不依赖非常重要,指定async属性的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面其他内容,异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和Chrome。

<script async src="main.js"></script>


注意点

1、建议异步脚本不要在加载期间修改DOM,当js不需要改变DOM结构时推荐使用异步加载(比如一些统计代码,它与页面执行逻辑无关,也不会改变DOM结构)。

2、延迟脚本并不一定会按照顺序执行,因此,确保两者之前互不依赖非常重要。


js的动态加载


由于文档对象模型(DOM)允许您使用 JavaScript 动态创建 HTML 的几乎全部文档内容。  当然也就应许我们动态创建<script>元素,例如:
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{ //Others
  script.onload = function(){
   callback();
  };
 }
 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}

说明:此方法让元素添加到页面之后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响(除了用于下载文件的 HTTP 连接)。使用上述方法:

loadScript("main.js", function(){
   console.log("File is loaded!");
});

如何需要在页面中动态加载很多 JavaScript 文件,我们可以在回调方法中多次调用即可。


js动态注入

创建一个XMLHttpRequest对象,然后下载 JavaScript 文件,接着用一个动态 <script> 元素将 JavaScript 代码注入页面。例如:

var xhr = new XMLHttpRequest();
xhr.open("get", "main.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);

向服务器发送一个GET 请求 ,去获取main.js文件,当状态成功,我们把获取的js文件动态加载到页面。采取了它的好处是:它下载后不会自动执行,这使得您可以推迟执行,直到一切都准备好了。另一个优点是,同样的代码在所有现代浏览器中都不会引发异常。需要注意的是,加载的js文件不能跨域获取,所以一般网站通常不采用 XHR 脚本注入技术。


总结:

1. 尽可能的将<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在脚本执行前页面已经完成了渲染。

2.尽可能的合并js文件。减少http请求,加载速度也就越快。

3.尽可能的压缩js文件。减少文件体积,加快加载的速度。

4.<script>标签使用defer或async属性。异步加载js。

5.使用动态创建的<script>元素来下载并执行代码。

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



吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/44

Java与Node.js性能PK

如果你打开浏览器,搜索“Java与Node.js哪个更快”,你会发现大部分答案声称Node.js更快,也有一些人持相反意见。Java使用JIT编译器,其性能甚至可以超过C++。在这种情况下,为什么这么多人还是声称Node.js要比Java快呢?

React性能优化整理

通过判断减少数据变化触发的重新渲染, 以及之后的 DOM diff;函数式语言当中, 语言设计允许两个对象一样, 举例 Clojure:;每个函数体当中生成的对象都会有新的引用, useMemo 可以保留一致的引用.

大型php网站性能和并发访问优化方案

网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎么进行整体性能优化呢

优化 web 应用程序性能方案总结

在开发 web 应用程序时候,性能都是必不可少的话题。而大部分的前端优化机制都已经被集成到前端打包工具 webpack 中去了,当然,事实上仍旧会有一些有趣的机制可以帮助 web 应用进行性能提升

web前端性能优化指南

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明,网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为,提升你的网站性能,就是提升你的业务数据(甚至是业务收入)

JS如何提高扩展运算符的性能?

当被扩展的数组位于数组的开头时,由于快速路径优化,您可以获得性能提升。它适用于V8引擎7.2版本(Chrome v72和NodeJS v12附带的特性)。通过此优化,性能测试显示[... array, item]的执行速度至少比[item, ...array]快两倍

如何从请求、传输、渲染3个方面提升Web前端性能?

什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染。

PHP性能优化

性能是网站运行是否良好的关键因素, 网站的性能与效率影响着公司的运营成本及长远发展,编写出高质高效的代码是我们每个开发人员必备的素质,也是我们良好的职业素养。

Nginx 性能调优实战

Nginx运行工作进程个数一般设置CPU的核心或者核心数x2。如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor /proc/cpuinfo | wc -l

JS如何提高展开运算符的性能?

展开运算符或三个点,接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解,并使用这些分解部分构造一个新数组。展开运算符可以放在数组中的任何位置:

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全