减少 JavaScript 对性能的影响有以下几种方法：
- 1、将所有的
<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
当浏览器遇到<script>标签时，浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。由于脚本会阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。
尽管脚本下载会阻塞另一个脚本，但是页面的大部分内容都已经下载完成并显示给了用户，因此页面下载不会显得太慢。这是优化 JavaScript 的首要规则：将脚本放在底部。
- 2、尽可能地合并脚本。页面中的
<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
由于每个<script>标签初始下载时都会阻塞页面渲染，所以减少页面包含的<script>标签数量有助于改善这一情况。这不仅针对外链脚本，内嵌脚本的数量同样也要限制。浏览器在解析 HTML 页面的过程中每遇到一个<script>标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。
这个问题在处理外链 JavaScript 文件时略有不同。考虑到 HTTP 请求会带来额外的性能开销，因此下载单个 100Kb 的文件将比下载 5 个 20Kb 的文件更快。也就是说，减少页面中外链脚本的数量将会改善性能。
- 3、采用无阻塞下载 JavaScript 脚本的方法：
- 减少 JavaScript 文件大小并限制 HTTP 请求数在功能丰富的 Web 应用或大型网站上并不总是可行。Web 应用的功能越丰富，所需要的 JavaScript 代码就越多，尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载 JavaScript 文件，这样做在某种程度上来说不会阻塞浏览器。
-
- 无阻塞脚本的秘诀在于，在页面加载完成后才加载 JavaScript 代码。这就意味着在
window对象的onload事件触发后再下载脚本。有多种方式可以实现这一效果。
- 4、使用
<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）； -
-
<script type="text/javascript" src="script1.js" defer></script>
defer属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer属性会被直接忽略，因此<script>标签会以默认的方式处理，也就是说会造成阻塞。不推荐使用。
-
- 4、使用
- 5、使用动态创建的
<script>元素来下载并执行代码； - 6、使用 XHR 对象下载 JavaScript 代码并注入页面中。
- 5、使用动态创建的
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
