[高性能javascript笔记]1-加载和执行
博客专区 > 2tman 的博客 > 博客详情
[高性能javascript笔记]1-加载和执行
2tman 发表于1年前
[高性能javascript笔记]1-加载和执行
  • 发表于 1年前
  • 阅读 11
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

  1. 无论是外链还是内链,<script>标签每次出现都霸道地让页面等待脚本的解析和执行。这是页面生存周期的必要环节,因为脚本执行过程中可能会修改页面内容。
     
  2. 在<header>标签中加载多个javascript文件,由于脚本会阻塞页面渲染,直到它们全部下载并执行完成后,页面的渲染才会继续。浏览器在解析到<body>标签之前,不会渲染页面的任何部分。把脚本房东啊页面顶部将会导致明显的延迟,通常表现为显示空白页面,用户无法浏览内容,也无法与页面进行交互。
     
  3. 现在的浏览器基本都允许并行下载javascript文件,<script>标签在下载外部资源时不会阻塞其它<script>标签,遗憾的是,javascript下载过程仍然会阻塞其它资源的下载,比如图片。
     
  4. 脚本位置:推荐将所有的<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。
     
  5. 组织脚本:减少页面包含的<script>标签数量有助于 改善下载阻塞页面渲染,不要把内嵌脚本紧跟在<link>标签之后,不然会导致页面阻塞去等待样式表的下载。下载单个100kb的文件将比下载4个25kb的文件更快。
     
  6. 无阻塞的脚本:尽管下载单个较大的js文件只产生一次http请求,却会锁死浏览器一大段时间。为避免这种情况,你需要向页面中逐步加载js文件,这样做在某种程度上来说不会阻塞浏览器。

    “无阻塞脚本的秘诀在于,在页面加载完成之后才加载js代码,这意味着在window对象的load事件触发后再加载脚本。”
     
  7. 延迟的脚本:<script>的扩展属性defer.
    defer属性指明本元素所含的脚本不会修改dom,因此代码能安全地延迟执行。(但是跨浏览器不是个理想的方案,其它浏览器会被忽略)

    不过现在主流兰奇都已经支持defer.

    html5引入了async属性,用于异步加载脚本。与defer的相同点都是采用并行下载,在下载过程中不会产生阻塞。
    区别在于,async是加载完成后自动执行,而defer需要等待页面完成后执行。

    defer属性仅当src属性声明时才生效。
  8. 动态脚本元素:
     
    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 {
                    //其它浏览器
                    script.onload = function () {
                        callback();
                    };
                }
                script.src = url;
                document.getElementsByTagName("head")[0].appendChild(script);
            }

     
  9. 推荐的无阻塞模式:
    https://github.com/rgrove/lazyload
    https://github.com/getify/LABjs
共有 人打赏支持
粉丝 12
博文 85
码字总数 30605
×
2tman
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: