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


    一、脚本的位置

            我们知道,一个<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完全运行所需的时间。每个文件必须等待前一个文件下载完成并运行完之后,才能开始自己的下载过程。
    下载一个 100KB 的文件比下载四个 25KB的文件要快。总之,减少引用外部脚本文件的数量,你可以将这些文件整合成一个文件,只需要一个<script>标签引用,就可以减少性能损失。此外,非阻塞 JavaScript 加载库LABjs等的运用也能减少加载多个js文件的性能损失。
  • 相关阅读:
    MOSS的CSS样式说明
    RSS 简介(一)
    母版页详细分析
    导出 WINDOWS\assembly中DLL文件
    文件下载代码
    列表Field属性的巧妙运用(隐藏栏)
    javascript弹出窗口总结
    转[VBA起步]常用的、带解释的 VBA 短句
    如何生成自定义列表
    mysql 连接字符串与SQL不同
  • 原文地址:https://www.cnblogs.com/jackyWHJ/p/3593844.html
Copyright © 2020-2023  润新知