高性能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完全运行所需的时间。每个文件必须等待前一个文件下载完成并运行完之后,才能开始自己的下载过程。
![](http://images0.cnblogs.com/i/607924/201403/111417316685634.png)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步