zoukankan      html  css  js  c++  java
  • 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() {

             …

          }

      });

  • 相关阅读:
    cocos: RenderTexture 合并精灵图片
    itms-services 方式安装ipa 无法连接到网址(eg. 我用的ip:172.26.167.82)
    ios 信任自签名证书
    mac 浏览器(chrome, safari)信任自签名证书
    ##ant 打包apk
    #lua中编写shader的方式
    cocos:C++ 导出到lua, cocos2dx_extension.ini修改
    cocos:C++ 导出到lua, genbindings.py修改
    quick如何打开工程或者示例
    quick 中 "我的项目" 中的列表从那里来的?
  • 原文地址:https://www.cnblogs.com/dreamerjdw/p/6229748.html
Copyright © 2011-2022 走看看