您的位置：首页 > Web前端 > JavaScript

【摘要】JavaScript 的性能优化：加载和执行

2017-04-16 16:56 344 查看

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/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航