- 1.javascript具有阻塞特征，<script>标签出现，会停止页面的下载和解析，等待脚本执行，因为脚本可能在运行过程中修改页面内容。
- 2.脚本位置
<html>
<head>
<title>Script Example</title>
<-- Example of inefficient script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
存在的性能问题：
浏览器在遇到body之前，不会渲染页面的任何部分，head部分加载了三个js文件，每个<script>标签阻塞了页面的解析，直到它完整的下载并运行了js代码之后，页面才会继续进行。这就会导致，页面打开时，首先是一个空白的页面。
推荐的方法：
-
将所有script标签尽可能接近<body>标签底部，尽量减少对整个页面下载的影响。
-
下载一个100kb的文件比下载四个25kb的文件要快，减少引用外部文件的数量，将多个js文件整合成一个，可以使用打包工具。
-
3.defer属性：
指明元素中所包含的脚本不打算修改DOM，因此代码可以稍后执行。
<script type = "text/javascript" src="file1.js" defer></script>
带有defer属性的<script>标签可以放置在页面任何位置，对应的Javascript文件在<script>标签被解析时启动下载，它不会阻塞浏览器的其他处理过程，这些文件可以与页面的其他资源一起并行下载。这些代码的执行时机在页面解析完后,但在 DOMContentLoaded事件之前。
- 4.async属性
<script type="text/javascript" src="demo_async.js" async="async"></script>
async属性同defer属性相同的地方在于，可以被放到任何位置，当遇到<script>标签时开始启动下载，并且不会阻塞浏览器的其他处理过程。
不同的地方在于，带有async标签的脚本一旦下载完成就开始执行(当然是在window的onload之前)，执行也是异步的不会阻塞浏览器的其他处理过程。这意味着这些script 可能不会按它们出现在页面中的顺序来执行,如果你的脚本互相依赖并和执行顺序相关,就有很大的可能出问题。
网友评论