优化网页加载速度(前端优化)

最新推荐文章于 2024-05-18 08:00:00 发布

置顶 wuxyyin

最新推荐文章于 2024-05-18 08:00:00 发布

阅读量4.8k

点赞数

分类专栏： LAMP 文章标签：优化 css stylesheet 浏览器 image html

本文链接：https://blog.csdn.net/wuxyyin/article/details/5893928

版权

LAMP 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

先普及一个前端优化的常识：

外部JS 的阻塞下载
所有浏览器在下载JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。

有人会问：为什么JS 不能像CSS 、image 一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，
当浏览器从服务器接收到了HTML 文档，并把HTML 在内存中转换成DOM 树，在转换的过程中如果发现某个节点(node) 上引用了CSS 或者IMAGE ，就会再发1 个request 去请求CSS 或image, 然后继续执行下面的转换，而不需要等待request 的返回，当request 返回后，只需要把返回的内容放入到DOM 树中对应的位置就OK 。但当引用了JS 的时候，浏览器发送1 个js request 就会一直等待该request 的返回。因为浏览器需要1 个稳定的DOM 树结构，而JS 中很有可能有代码直接改变了DOM 树结构，比如使用 document.write 或 appendChild, 甚至是直接使用的location.href 进行跳转，浏览器为了防止出现JS 修改DOM 树，需要重新构建DOM 树的情况，所以就会阻塞其他的下载和呈现.

阻塞下载图：下图是访问blogjava 首页的时间瀑布图，可以看出来开始的2 个image 都是并行下载的，而后面的2 个JS 都是阻塞下载的(1 个1 个下载) 。

嵌入JS 的阻塞下载
嵌入JS 是指直接写在HTML 文档中的JS 代码。上面说了引用外部的JS 会阻塞其后的资源下载和其后的内容呈现，哪嵌入的JS 又会是怎样阻塞的了，看下面的列2 个代码：
代码1 ：

复制代码代码如下:

<ul>
<<li>blogjava></li>
<li>CSDN></li>
<li> 博客园></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript">
// 循环5 秒钟
var n = Number(new Date());
var n2 = Number(new Date());
while((n2 - n) (6*1000)){
n2 = Number(new Date());
}
</script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>

代码2(test.zip 里面的代码与代码1 的JS 代码一模一样) ：

复制代码代码如下:

<div>
<ul>
<li>blogjava></li>
<li>CSDN></li>
<li> 博客园></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript" src="test.zip"><script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>

运行后，会发现代码1 中，在前5 秒中页面上是一篇空白，5 秒中后页面全部显示。代码2 中，前5 秒中blogjava,csdn 等先显示出来，5 秒后MSN 才显示出来。
可以看出嵌入JS 会阻塞所有内容的呈现，而外部JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。

嵌入JS 导致CSS 阻塞加载的问题

CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了( 在测试观察中，IE6 下CSS 都是阻塞加载，下面的测试在非IE6 下进行) ：
代码1( 为了效果，这里选择了1 个国外服务器的CSS) ：

复制代码代码如下:

<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>js test>title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css " />
</head>
<body>
<img src="http://www.fengfly.com/images/logo.gif " /><</span>br />
<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif " />
</body>
</html>

时间瀑布图：

代码2( 只加了1 个空的嵌入JS) ：
<head>
<title>js test>title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css " />
<script type="text/javascript">
function a(){}
</script>
<head>
<body>
<img src="http://www.fengfly.com/images/logo.gif " /><</span>br />
<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif " />
</body>
时间瀑布图:

从时间瀑布图中可以看出，代码2 中，CSS 和图片并没有并行下载，而是等待CSS 下载完毕后才去并行下载后面的2 个图片，当CSS 后面跟着嵌入的JS 的时候，该CSS 就会出现阻塞后面资源下载的情况。
有人可能会问，这里为什么不说说嵌入的JS 阻塞了后面的资源，而是说CSS 阻塞了？想想我们现在用的是1 个空函数，解析这个空函数1ms 就够，而后面2 个图片是等CSS 下载完1.3s 后才开始下载。大家还可以试试把嵌入JS 放到CSS 前面，就不会出现阻塞的情况了。
根本原因：因为浏览器会维持html 中css 和js 的顺序，样式表必须在嵌入的JS 执行前先加载、解析完。而嵌入的JS 会阻塞后面的资源加载，所以就会出现上面CSS 阻塞下载的情况。
嵌入JS 应该放在什么位置

1 、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
2 、如果嵌入JS 放在head 中，请把嵌入JS 放在CSS 头部。
3 、使用defer
4 、不要在嵌入的JS 中调用运行时间较长的函数，如果一定要用，可以用setTimeout 来调用

PS ：很多网站喜欢在head 中嵌入JS ，并且习惯放在CSS 后面，比如看到的www.qq.com，当然也有很多网站是把JS 放到CSS 前面的，比如yahoo,google