【飞起】手把手教你如何前端页面秒开！！

没有最快，只有更快！世上武功，唯快不破！新能源汽车百公里加速4.x秒！...，可以说，人类对于速度的追求是永无止境的。在网页上也是一样，网页打开的速度快点，再快点，还能再快点吗？！

所以在前端开发领域，速度是一个永恒的话题。经过无数前端开发人员多年的积累，比较典型的就有雅虎34条优化网站法则，还有Yslow22条等之类的优化规则。

1、尽量减少HTTP请求次数

2、减少DNS查找次数

3、避免跳转

4、可缓存的AJAX

5、推迟加载内容

6、预加载

7、减少DOM元素数量

8、根据域名划分页面内容

9、使iframe的数量最小

10、不要出现404错误

11、使用内容分发网络

12、为文件头指定Expires或Cache-Control

13、Gzip压缩文件内容

14、...更多内容自己百度一下“雅虎34条”

<!-- -->

如果同学们仔细的读过，甚至是研究过网站优化方面的资料，你会发现，网站优化是一个很大的系统性的工程。如果把优化的重心只放在前端，那么只能做到页面优化，而无法做到网站的优化。

首先，用户打开网页第一个接触到的并不是网页、img、js等，而是你的网站的带宽！假设，你给你的网站放的是1000M光纤，那么我访问你的网站，自然是速度飞快！

如果你给你的网站的带宽是adsl小水管，那么我相信，无论前端再怎么优化，用户访问你的网站也是龟速。

所以第一步就是CND加速，这个是硬件方面的，是要花钱的！当然了，许多老板一听花钱，脸就拉长了。

<!-- -->

然后才是，

- 减少dns请求数；

- 压缩、合并文件，减少体积；

减少网络请求数，比较常见的方法，就是把许多小图片都合并为一张背景透明的大图，这种作法被称为CssSpirite。

然后在css当中使用背景定位来显示特定位置的背景图片。 就这样，引用同一张大图上的，不同位置的二个小图片，

<style type="text/css">

.bg_1{

background: url('../img/xx.png') no-repeat 0 -22px;

}

.bg_1{

background: url('../img/xx.png') no-repeat 0 -42px;

}

</style>

另外就是webpack等自动化前端构建工具对于资源文件的压缩、合并、打包了。

有一点要注意的是，压缩与打包并不是无限制的，每个文件的体积在25k左右时速度最佳，然后同一时期内的压缩资源最好在5个以内。否则 的话，你把整个网站打成一个大包算了，只有一个dns请求了。

<!-- -->

接下来说缓存，

缓存嘛，简单的讲，就是你访问某个网站，它会保存一些资源在你的电脑里，例如图片、js、css之类的，然后你下次再来的时候，他会判断如果你的访问是相同的地址，那么直接你访问的网页就直接调用你电脑里的文件了，这样速度就会很快。

一、是减少延迟，加快响应了；

二、就是节省了网站的带宽，毕竟网站的带宽流量也是要花钱的。

可以在你的网站里设置cache-control和expires属性，可以设计缓存的日期。另外有一点，如果你的网站要更新大量的图片，建议分步骤、分阶段的更新。

这样会避免用户的电脑中大量的缓存失效。在大流量访问的情况下，甚至会造成资源服务器瞬时负载过大，造成网络阻塞，导致用户端网站白屏之类的严重情况。

<!-- -->

再说一下JavaScript的代码优化，

一、 无论你使用什么框架，在操作dom的时候要尽量的减少它的查找和重绘。因为这种操作是最消耗时间和资源的。当然你可以说，我使用的是react、vue，但我想告诉你说，前端开发不操作dom，是不可能的。

在操作dom中，例如for循环，把.length之类的需要查询的值，都提前查出来，然后放在某个变量里保存好。

二、with、eval，能不用尽量不用；

with会改变作用域的长度，eval会导致代码注入，造成安全隐患。

这方面的内容很多，今天先写到这里，看看同学们的反应哈，