• Javascript无阻塞加载方法


    看了《高性能JavaScript》的读书笔记

    几个原则:

    1、将脚本放在底部

    <link>还是在head中,用以保证在js加载前,能加载出正常显示的页面。

    <script>放在</body>前。

    2、成组脚本

    由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

    3、非阻塞脚本

    等页面完成加载后,再加载js代码。也就是,在window.load事件发出后开始下载代码。

    (1)defer属性:支持IE4和fierfox3.5更高版本浏览器

    <script defer>...</script>

    内联和外部文件

    带defer属性的<script>可出现在文档的任何位置,对应的js文件将在<script>被解析时启动下载,但代码不会执行,直到DOM加载完毕(在onload事件句柄被调用之前)。所以实现了和也卖弄其他资源一起并行下载。

    (2)动态脚本元素

    文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。

    var script=document.createElement("script");

    script.type="text/javascript";

    script.src="file.js";

    document.getElementByTagName_r("head")[0].appendChild(script);

    此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)。

    (3)The YUI3 approach

    理念:用一个很小的初始代码,下载其余的功能代码,先引入文件:

    <script type="text/javascript src=http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js></script>

    此种子文件大约10KB,

    使用:

    YUI().use("dom",function(Y){

      Y.Dom.addclass(...)

    })

    当所有代码可用时,回调函数被调用,YUI实例作为参数传入,就可以立即使用新下载的功能。

    The LazyLoad library

    使用:先引入:lazyload-min.js

    (4)LazyLoad.js("a.js",function(){

    Appliction.init();

    })

    多个文件:

    LazyLoad.js(["a.js","b.js"],function(){

    Application.init();

    })

     (5)The LABjs library

    先引入:lab.js

    $LAB.script("a.js").wait(function(){

    Application.init();

    })

    多个文件,就链式写法

    他的独特之处在于能够管理依赖关系。

    可以通过wait()函数指定哪些文件应该等待其他文件。

    例如:b.js的代码保证不在a.js之前运行

    $LAB.script("a.js").wait().script("b.js").wait(function(){

    Application.init();

    })

    这样,虽然两个文件是并行下载的,却能保证a.js能在b.js之前执行

  • 相关阅读:
    SpringMVC+Spring3+hibernate4 开发环境搭建以及一个开发实例教程
    SpringMVC 理论与实用技术(二)文件上传
    导入导出封装工具类(二) jXLS Excel报表生成工具类
    导入导出封装的工具类 (一) 利用POI封装
    eclipse 鲜为人知的调试技巧,你用过多少
    前端框架(二)DIV多选复选框框的封装和MySql数据库存取
    WPF/Silverlight Layout 系统概述——Arrange(转)
    WPF/Silverlight Layout 系统概述——Measure(转)
    Border绘制虚线框(转)
    ImageSource使用心得(转)
  • 原文地址:https://www.cnblogs.com/xyang/p/2793021.html
Copyright © 2020-2023  润新知