摘要JavaScript 的性能优化：加载和执行
Posted 似
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了摘要JavaScript 的性能优化：加载和执行相关的知识，希望对你有一定的参考价值。
1、浏览器遇到js代码会暂停页面的下载和渲染，谁晓得js代码会不会把html给强奸（改变）了；
2、延迟脚本加载：defer 属性
<html> <head> <title>Script Defer Example</title> </head> <body> <script type="text/javascript" defer> alert("defer"); </script> <script type="text/javascript"> alert("script"); </script> <script type="text/javascript"> window.onload = function(){ alert("load"); }; </script> </body> </html>
不支持 defer 属性的浏览器的弹出顺序是：“defer”、“script”、“load”。而在支持 defer 属性的浏览器上，弹出的顺序则是：“script”、“defer”、“load”。请注意，带有 defer 属性的<script>元素不是跟在第二个后面执行，而是在 onload 事件被触发前被调用。
3、动态加载很多 JavaScript 文件，浏览器不保证文件加载的顺序。通过 loadScript()函数加载多个 JavaScript 脚本可以确保加载顺序
loadScript("script1.js", function(){
loadScript("script2.js", function(){
loadScript("script3.js", function(){
alert("All files are loaded!");
});
});
});
4、减少 JavaScript 对性能的影响有以下几种方法：
- 将所有的
<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。 - 尽可能地合并脚本。页面中的
<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。 - 采用无阻塞下载 JavaScript 脚本的方法：
- 使用
<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）； - 使用动态创建的
<script>元素来下载并执行代码； - 使用 XHR 对象下载 JavaScript 代码并注入页面中。
详细链接：https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/
以上是关于摘要JavaScript 的性能优化：加载和执行的主要内容，如果未能解决你的问题，请参考以下文章