前端性能优化问题研究

一、为什么要进行前端优化

在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，

如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，

从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。

即用户感受很不好！！！！

二、什么是前端优化？

从用户访问资源到资源完整的展现在用户面前的过程中，

通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

三、怎样进行性能优化？

1、先了解一下整个前端工作，或者说浏览器从请求页面到页面展现之间的一个工作过程

　　预处理——>DNS解析——>建立连接——>发起请求

　　——>等待响应——>接受数据——>处理元素——>布局渲染

　　2、优化的方法

（1）从内容层面来看　　

1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）

2、避免重定向（/还是需要的）

3、切分到多个域名

4、杜绝404

（2）从网络传输来看

1、减少传输过程中实体的大小

1）缓存

2）cookie优化

3）文件压缩（Accept-Encoding：g-zip）

2、减少请求的次数

1）文件适当的合并

2）雪碧图

3、异步加载（并发,requirejs）

4、预加载、延后加载、按需加载

（3）从渲染阶段来看

1、js放底部，css放顶部

2、减少重绘和回流

3、合理使用Viewport 等meta头部

4、减少dom节点

5、BigPipe

（4）从脚本执行阶段来看

1、缓存节点，尽量减少节点的查找

2、减少节点的操作（innerHTML）

3、避免无谓的循环，break、continue、return的适当使用

4、事件委托

四、著名网站优化实例

Google实践优化方案

1. 避免坏请求

有时页面中的HTML或CSS会向服务器请求一个不存在的资源，

比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求，类似于：

浏览器：“我需要这个图像。”

服务器：“我没有这个图像。”

浏览器：“你确定吗？这个文档说你有。”

服务器：“真的没有。”

如此一来，会降低页面的加载速度。

因此，检查页面中的坏链接非常有必要，

你可以通过 Google的PageSpeed工具来检测，找到问题后，

补充相应的资源文件或者修改资源的链接地址即可。

2. 避免CSS @import

使用 @import方法引用CSS文件可以能会带来一些影响页面加载速度的问题，

比如导致文件按顺序加载（一个加载完后才会加载另一个），而无法并行加载。

你可以使用 CSS delivery工具来检测页面代码中是否存在@import方法。

比如，如果检测结果中存在

@import url("style.css")  （避免）

<link rel="style.css" href="style.css" type="text/css">（由此替代）

3. 避免使用document.write

在JavaScript中，可以使用 document.write在网页上显示内容或调用外部资源，

而通过此方法，浏览器必须采取一些多余的步骤——下载资源、读取资源、

运行JavaScript来了解需要做什么，调用其他资源时需要重新再执行一次这个过程。

由于浏览器之前不知道要显示什么，所以会降低页面加载的速度。

要知道，任何能够被document.write调用的资源，都可以通过HTML来调用，这样速度会更快。

检查你的页面代码，如果存在类似于下面的代码：

document.write('<script src="another.js"></script>');  （避免）

<script src="another.js"></script> （由此替代）

4. 合并多个外部CSS文件

在网站中每使用一个CSS文件，都会让你的页面加载速度慢一点点。

如果你有一个以上的CSS文件，你应该将它们合并为一个文件。

你可以通过 CSS delivery工具来检测页面代码中的CSS文件，然后通过复制粘贴的方式将它们合并为一个。

合并后记得修改页面中的引用代码，并删除旧的引用代码。

5. 合并多个外部JavaScript文件

大部分情况下，网站往往会包含若干个 JavaScript文件，

但并不需要将这些文件都独立出来，其中有些是可以合并为一个文件的。

你可以通过 resource check工具来检测页面中所引用的JavaScript文件数，

然后可以通过复制粘贴的方式将多个文件合并为一个。

6. 通过CSS sprites来整合图像

如果页面中有6个小图像，那么浏览器在显示时会分别下载。

你可以通过CSS sprites将这些图像合并成1个，可以减少页面加载所需的时间。

CSS sprites需要有两个步骤：整合图像、定位图像。

比如你可以通过下面的代码来分别定位下面图像中的上下两部分。

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}  
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

7. 延迟JavaScript的加载

浏览器在执行JavaScript代码时会停止处理页面，

当页面中有很多JavaScript文件或代码要加载时，将导致严重的延迟。

尽管可以使用defer、异步或将JavaScript代码放到页面底部来延迟JavaScript的加载，

但这些都不是一个好的解决方案。

下面是Google的建议。

<script type="text/javascript">  
function downloadJSAtOnload() {  
　　var element = document.createElement("script");  
　　element.src = "defer.js";  
　　document.body.appendChild(element);  
}  
if (window.addEventListener)  
　　window.addEventListener("load", downloadJSAtOnload, false);  
else if (window.attachEvent)  
　　window.attachEvent("onload", downloadJSAtOnload);  
else window.onload = downloadJSAtOnload;  
</script>

　　这段代码的意思是等待页面加载完成后，然后再加载外部的“defer.js”文件。下面是测试结果。

8. 启用压缩/ GZIP

使用gzip对HTML和CSS文件进行压缩，通常可以节省大约50％到70％的大小，

这样加载页面只需要更少的带宽和更少的时间。

你可以通过这个 Gzip压缩工具来检测页面是否已经经过Gzip压缩。

9. 启用Keep-Alive

HTTP协议采用“请求-应答”模式，

当使用普通模式（非KeepAlive模式）时，每个请求/应答客户和服务器都要新建一个连接，

完成之后立即断开连接（HTTP协议为无连接的协议）；

当使用 Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，

当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

在HTTP 1.0中Keep-Alive默认是关闭的，需要在HTTP头中加入“Connection: Keep-Alive”，才能启用Keep-Alive；

在 HTTP1.1中Keep-Alive默认启用，加入“Connection: close”可关闭。

目前大部分浏览器都是用HTTP 1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，

所以是否能完成一个完整的Keep- Alive连接就看Web服务器的设置情况。

10. 将小的CSS和JavaScript代码内嵌到HTML中

如果你的CSS代码比较小，可以将这部分代码放到HTML文件中，

而不是一个外部CSS文件，这样可以减少页面加载所需的文件数，从而加快页面的加载。

同样，也可以将小的 JavaScript脚本代码内嵌到HTML文件中。

<style type="text/css">  
<!--CSS代码-->
  
</style>  
  
<script type="text/javascript">  
<!--JavaScript代码-->
  
</script>

11. 利用浏览器缓存

在显示页面时，浏览器需要加载logo、CSS文件和其他一些资源。

浏览器缓存所做的工作就是“记住”已经加载的资源，让页面的加载速度更快。

12. 压缩CSS代码

不管你在页面中如何使用CSS，CSS文件都是越小越好，这会帮助你提升网页的加载速度。

你可以通过 Minify CSS工具来压缩你的CSS代码。

压缩前：

body  {  
　　background-color:#d0e4fe;  
}  
h1{  
　　color:orange;  
　　text-align:center;  
}

　　压缩后：

body {background-color:#d0e4fe;}  
h1 {color:orange;text-align:center;}

13. 尽量减少DNS查询次数

当浏览器与Web服务器建立连接时，它需要进行DNS解析，将域名解析为IP地址。

然而，一旦客户端需要执行DNS lookup时，等待时间将会取决于域名服务器的有效响应的速度。

虽然所有的ISP的DNS服务器都能缓存域名和IP地址映射表，

但如果缓存的DNS记录过期了而需要更新，则可能需要通过遍历多个DNS节点，

有时候需要通过全球范围内来找到可信任的域名服务器。

一旦域名服务器工作繁忙，请求解析时就需要排队，则进一步延迟等待时间。

因此，减少DNS的查询次数非常重要，页面加载时就尽量避免额外耗时。

为了减少DNS查询次数，最好的解决方法就是在页面中减少不同的域名请求的机会。

你可以通过 request checker工具来检测页面中存在多少请求，然后进行优化。

14. 尽量减少重定向

有时为了特定需求，需要在网页中使用重定向。

重定向的意思是，用户的原始请求（例如请求A）被重定向到其他的请求（例如请求B）。

但是这会造成网站性能和速度下降，

因为浏览器访问网址是一连串的过程，如果访问到一半而跳到新地址，

就会重复发起一连串的过程，这将浪费很多的时间。

所以我们要尽量避免重定向，Google建议：

- 不要链接到一个包含重定向的页面
- 不要请求包含重定向的资源

15. 优化样式表和脚本的顺序

Style标签和样式表调用代码应该放置在JavaScript代码的前面，这样可以使页面的加载速度加快。

<head>  
<meta name=description content="description"/>  
<title>title</title>  
<style>  
page specific css code goes here  
</style>  
<script type="text/javascript">  
javascript code goes here  
</script>  
</head>

16. 避免JavaScripts阻塞渲染

浏览器在遇到一个引入外部JS文件的<script>标签时，

会停下所有工作来下载并解析执行它，

在这个过程中，页面渲染和用户交互完全被阻塞了。这时页面加载就会停止。

谷歌建议删除干扰页面中第一屏内容加载的JavaScript，

第一屏是指用户在屏幕中最初看到的页面，无论是桌面浏览器、手机，还是平板电脑。