JavaScript性能优化

最新推荐文章于 2024-09-02 17:34:07 发布

weixin_30677073

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量66

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yzfdjzwl/p/6600728.html

版权

阅读笔记来源

概括

无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。
如果出现了下面的情况:

<p>
    <script type="text/javascript">
        document.write('test');
    </script>
</p>

当浏览器遇到< script>时，当前HTML页面无从获知JavaScript是否会向< p> 标签添加内容，或引入其他元素，或甚至移除该标签。因此此时，浏览器会停止处理页面，先执行JavaScript中的代码，然后再继续解析和渲染页面。同样，如果有src属性加载JavaScript时，浏览器必须先花时间下载外链里的代码，然后解析并执行它。整个过程中，页面渲染和用户交互被完全阻塞了。

脚本位置

HTML4规范指出script标签可以放在head或body里, 并允许出现多次。

以前，web开发者喜欢这么放:

<head>
    <script type="text/javascript" src="s1.js"></script>
    <script type="text/javascript" src="s2.js"></script>
    <script type="text/javascript" src="s3.js"></script>
    <link ref="stylesheet" type="css/text" href="style.css">
</head>

html页面，从上往下的执行过程是这样的：

下载s1, 执行s1
下载s2, 执行s2
下载s3，执行s3
下载style

因此，整个下载执行的过程中，用户看到的是一片空白。

从IE8、Firefox3.5、Safari4和chrome2开始允许并行下载JavaScript文件。遗憾的是，JavaScript的下载依然会阻碍其他资源的下载，比如样式和图片。虽然JavaScript可以并行下载，但是页面仍然必须等待所有JavaScript代码下载并执行完成后才能继续。

所以推荐将Scirpt脚本放置与body的底部, 这是优化JavaScript的首要规则。

组织脚本

减少script标签数量有助于改善情况。这是因为：

浏览器在解析HTML页面的过程中每遇到一个script标签，都会因执行脚本而导致一定的延时。
HTTP请求会带来额外的开销，所以下载单个100kb比下载5个20kb的文件要更快。
通常，一个大的网站通过打包工具或者CDN来实现。

需要特别注意的是，把内嵌script标签放在link后面会导致页面阻塞去等待样式表的下载。这么做是为了确保内嵌脚本在执行时能获得最精确的样式信息。因此，建议不要将内嵌的script标签紧跟在link标签后面。

无阻塞的脚本

减少JavaScript文件的大小并不总是可行，因为下载一个较大的JavaScript文件只产生一次HTTP请求，却会锁死浏览器的一大段时间。为了避免这种情况，需要通过一些特定的技术向页面中逐渐加载JavaScript文件，这样做在某种程度上不会阻塞浏览器。

延迟加载脚本

HTML4定义了defer属性，HTML5定义了async属性。它们的作用差不多，区别是浏览器支持不一样，如果浏览器支持async属性, 那么它会忽略defer属性。

<body>
    <script type="text/javascript" async>
        console.log('async');
    </script>

    <script type="text/javascript">
        console.log('script');
    </script>

    <script type="text/javascript" async>
        window.onload = function() {
            console.log('load');
        }
    </script>
</body>

如果是上面这样的话，最后输出的顺序是：async, script, load。

但是如果下面的代码：

<script type="text/javascript" src="s1.js" async></script>
<script type="text/javascript" src="s2.js"></script>
<script type="text/javascript" src="s3.js"></script>

// s1
console.log("async");

// s2
console.log("script");

// s3
window.onload = function() {
    console.log("load");
};

那么最后输出的顺序可能是async, script, load。也有可能是script, async, load。

因为带有async属性的外链script，它会立即被下载(和其他外链script一起下载)，但是不会马上执行，它一定会在onload被调用前执行。

动态脚本元素

也就是通过创建script标签来加载外链script, 此文件当元素添加到页面之后立即开始下载。此技术的重点是：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。

总结一下：

放在body之前
减少script标签
使用defer/async属性
使用动态脚本技术

转载于:https://www.cnblogs.com/yzfdjzwl/p/6600728.html

weixin_30677073

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript性能优化

阅读笔记来源概括无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。如果出现了下面的情况:<p> <script type="text/javascript"> document.write('test'); </script></p>当浏览器遇到&lt...
复制链接

扫一扫