首页 > Web开发 > 详细

高性能javascript学习总结(1)--加载与运行

时间:2014-03-11 16:13:12      阅读:404      评论:0      收藏:0      [点我收藏+]

一、脚本的位置

        我们知道,一个<script>标签可以放在 HTML 文档的<head>或<body>标签中,但是浏览器是怎么加载和执行这些javascript呢?通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件, JavaScript 的下载仍然要阻塞其他资源的下载过程,例如图片。即使脚本之间的下载过程互不阻塞,页面仍旧要等待所有 JavaScript代码下载并执行完成之后才能继续。脚本阻塞其他页面资源的下载过程, 所以你可以 将所有<script>标签放在尽可能接近<body>标签底部的位置,尽量减少对整个页面下载的影响。另外,你也可以通过监听document.ready、window.onload等事件对js的加载进行处理。
二、脚本的个数
        当我们在页面加载多个js文件时,一个 JavaScript 文件开始下载,会阻塞了其他文件的下载过程。进一步,在 file1.js下载完之后和 file2.js开始下载之前还有一个延时,这是 file1.js完全运行所需的时间。每个文件必须等待前一个文件下载完成并运行完之后,才能开始自己的下载过程。
bubuko.com,布布扣
bubuko.com,布布扣下载一个 100KB 的文件比下载四个 25KB的文件要快。总之,减少引用外部脚本文件的数量,你可以将这些文件整合成一个文件,只需要一个<script>标签引用,就可以减少性能损失。此外,非阻塞 JavaScript 加载库LABjs等的运用也能减少加载多个js文件的性能损失。

高性能javascript学习总结(1)--加载与运行,布布扣,bubuko.com

高性能javascript学习总结(1)--加载与运行

原文:http://www.cnblogs.com/jackyWHJ/p/3593844.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!