zoukankan      html  css  js  c++  java
  • 编写高性能的JavaScript脚本的加载与执行(1)

    脚本可以放在html页面的head里面,也可以放在body里面。

    把脚本放在body中,当浏览器遇见<script>标签时, 浏览器不知道脚本会插入文本还是html标签,因此浏览器会停止分析html页面而去执行脚本。当使用src的方式添加脚本时,浏览器也会做同样的动作。在脚本处理的时候,页面呈现和用户交互将被完全阻止。脚本下载和执行阻塞了其他资源的下载,比如呈现页面使用的图片。(虽然很多浏览器实现了脚本并行下载的技术,但是这个问题依然没有解决)

    脚本的位置

    鉴于上面的理由,脚本应该始终放在页面的底部,即</body>前面。

    一个简单的示例:

    <html>
    <head>
    <title>Script Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <p>Hello world!</p>
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
    <script type="text/javascript" src="file3.js"></script>
    </body>
    </html>

     合并脚本

    因为脚本下载阻塞了页面呈现,因而应该减少页面<script>标签的使用,不管脚本是内联的还是外部的。在处理外部脚本的时候情况比较特殊,浏览器下载一个100kb的脚本的时间将远远小于4个25kb的脚本,因为建立一个请求要消耗大量的时间。所以页面应该尽量的减少外部脚本的引用。

     非阻塞的脚本

    秘诀在于当页面loading完成之后再来加载脚本,也就是在window对象的onload事件触发之前 。下面是实现的几种方式:

    1.使用defer

    <html>
    <head>
    <title>Script Defer Example</title>
    </head>
    <body>
    <script defer>
    alert("defer");
    </script>
    <script>
    alert("script");
    </script>
    <script>
    window.onload = function(){
    alert("load");
    };
    </script>
    </body>
    </html> 

    页面弹出框出现的顺序: script/defer/load,这个技术的缺点是IE4+和FF3.5+才支持。

    (待续)

     注明:以上内容来自:<High Performance JavaScript>by Nicholas C. Zakas

  • 相关阅读:
    Java垃圾收集器概述
    redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the pool
    Serialize a Long as a String
    数据库遇到的问题
    解决Safari页面缓存的问题
    idea -> Error during artifact deployment. See server log for details.
    正则表达式
    commons-lang
    Template和Style
    WPF资源
  • 原文地址:https://www.cnblogs.com/1000/p/1714545.html
Copyright © 2011-2022 走看看