JavaScript异步编程 异步的脚本加载

Posted dreamerjdw

tags:

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

异步的脚本加载

 

问题:

<head>标签里的大脚本会滞压所有页面渲染工作,使页面在脚本加载完毕前一直处于白屏;

<body>标签末尾的大脚本使用户只能看到静态页面,原本应进行渲染的地方却是空的;

 

解决方案:

对脚本分而治之;

负责让页面更好看、更好用的脚本立即加载,可稍后再加载的脚本稍后再加载。

 

html5的async/defer属性

 

?<script标签>

  经典型和非阻塞型

 

  理想情况下,脚本的加载应该与文档的加载同时进行,并且不影响DOM的渲染。

  这样,一旦文档就绪就可以运行脚本,因为已经按照<script>标签次序加载了相应脚本。

 

  大多数浏览器支持一个简单的解决方案:

  在<head>标签里放入延迟脚本

  <script defer src = “deferredScript.js”>

  defer属性:马上开始加载该脚本,但是请等到文档就绪且正在运行的defer脚本结束后再运行它。

  不足:并非所有浏览器都支持defer;因此,使用defer应将所有延迟脚本代码都封装在例如jQuery的$(document).ready中。

 

  脚本的完全并行化

  async属性

  脚本会以任意次序运行,只要javascript引擎可用就立即运行,无论文档就绪与否。

  → 对于独立的脚本,异步脚本是性能提升的好方法;

  同时支持defer和async的浏览器中,如果脚本属性defer和aysnc都用了的时候,async会覆盖掉defer。

 

  可编程的脚本加载

 

  浏览器API层面的方法:

  生成Ajax请求并用eval函数处理响应;

  向DOM插入<script>标签。

 

  yepnope的条件加载

  yepnope是一个简单轻量级的脚本加载库,其设计目标是服务于最常见的动态脚本加载。

  yepnope({

      load: ‘XX.js’,

      callback: function() {

         …

      }

  });

以上是关于JavaScript异步编程 异步的脚本加载的主要内容,如果未能解决你的问题,请参考以下文章

通过动态创建的脚本标签异步加载 JavaScript 的 CORS 问题

javascript 纯js异步脚本加载器

javascript 纯js异步脚本加载器

16.Generator 函数的异步应用

javascript脚本异步加载的几种方式

如何检查是否已加载Javascript脚本异步(Async)或async属性存在?