<高性能javascript>阅读笔记一 ---关于脚本放的位置以及加载方式

最新推荐文章于 2024-09-25 18:15:20 发布

xixiruyiruyi

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量925

点赞数 1

分类专栏： web调试优化文章标签： javascript 脚本位置脚本加载

本文链接：https://blog.csdn.net/xixiruyiruyi/article/details/51312310

版权

web调试优化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

刚开始进行代码优化的时候，最弄不懂的就是脚本应该放在哪里，应该用什么样的方式加载。
1：将脚本放在底部
HTML4规范中指出<script>标签可以放在HTML文档的<head>或者<body>中

<!DOCTYPE html>
<html>
<head lang="en"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="file1.js" ></script>
    <script type="text/javascript" src="file2.js" ></script>
    <script type="text/javascript" src="file3.js" ></script>
    <script type="text/javascript" src="file4.js" ></script>
    <script rel="stylesheet" type="text/css" href="style.css" ></script>
    <script type="text/javascript">
        });
    </script>
</head>
<body>
 <p>hello world</p>
</body>
</html>

但是这样子就存在一个很严重的问题，在<head>中加载了四个Javascript文件。由于脚本会阻塞渲染，直到它们全部下载并执行完之后，页面渲染才会继续，因此，页面的性能问题会很明显。把脚本放在顶部会产生明显的延迟，通常表现为显示空白页面，用户无法浏览内容，将文档放在页面顶部会产生明显的延迟，也无法与页面进行交互，这个对于web开发来说，严重影响了用户体验。由于脚本会阻塞页面其他资源的的下载，因此推荐奖所有的<script>标签尽可能的放在<body>标签的地步，以尽量减少对整个页面下载的影响。

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" charset="UTF-8">
    <title>test</title>

    <link rel="stylesheet" type="text/css" href="style.css" >
    <script type="text/javascript">
        });
    </script>
</head>
<body>
 <p>hello world</p>
 <script type="text/javascript" src="file1.js" ></script>
 <script type="text/javascript" src="file2.js" ></script>
 <script type="text/javascript" src="file3.js" ></script>
 <script type="text/javascript" src="file4.js" ></script>  
</body>
</html>

2：减少页面包含的<script>标签的数量用一个javascript标签加载多个文件

<!DOCTYPE html>
<html>
<head lang="en">
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" charset="UTF-8">
    <title>test</title>

    <link rel="stylesheet" type="text/css" href="style.css" >
    <script type="text/javascript">
        });
    </script>
</head>
<body>
 <p>hello world</p>
 <script type="text/javascript" src="file1.js & file2.js & file3.js & file4.js" ></script> 
</body>
</html>

3:使用延迟脚本 defer
带defer属性的标签可以放在文档中的任何位置。对应的JavaScript文件将在页面解析到<script>标签时开始下载，但是并不会执行，知道Dom加载完成（onload事件被处罚前）。

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" charset="UTF-8">
    <title>test</title>
    <script defer>
        alert("defer");
    </script>
    <script >
        alert("simple");
    </script>
    <script type="text/javascript">
        window.onload = function(){
            alert("load");
        };
    </script>
</head>
<body>
 <p>hello world</p>
</body>
</html>

但这个只有在ie4+和FireFox3.5+的浏览器才支持，因此这个不是一个理想的跨浏览器解决方案。
在支持defer的浏览器中执行顺式：simple、load、defer。在不支持defer的浏览器下面执行顺式为：defer、simple、load。
4：动态脚本加载

动态脚本加载时最通用的无阻塞加载解决方案，实现方式有多中，后续会进行详细说明。