前端优化总结

Posted 2020-08-06

使用前端优化的技术可以帮助我们减少页面加载时间，节约资源。一般而言，前端的优化主要分为两个大方向，一个是页面级别的优化，另一个则是代码级别的优化。

一 页面级别优化方法

1 减少http请求次数

当我们在浏览器中输入一个地址，客户端会与服务器端建立TCP连接，然后进行数据的传输。但我们知道，一个web页面中可能会有很多内容，除了html文件之外，还会有图片，css文件，js文件等等。当客户端发送http请求去请求这些内容的时候，会消耗时间，并且会占用资源。试想，如果每个文件都要有一个http请求才能获得，那么会浪费多少时间和资源呀。所以我们应该尽量的去减少http请求的次数。

那么应该怎么样去减少http请求次数呢？我们可以把多个js文件合并为几个或者更少的js文件，把多个css文件合并在一起，这样http请求的次数就会减少了。如果这样还不够，我们还可以把合并后的js文件、css文件通过压缩工具进行压缩，让它们变得更小。

针对页面内很多零星分布的图片，我们可以使用雪碧图，也就是通过图片合成的方法把各种图片合并在同一张图上，该图上的图像都有各自的位置信息，我们在使用的时候就可以用background-repeat、background-image、background-position等这些属性来对图片进行精准定位，让web页面上呈现我们想让它呈现的那部分内容。通过雪碧图，我们可以减少http请求的次数，还可以减少图像的总大小。

2 使用缓存

当我们访问某个网站的时候，第一次会加载所有的东西，如果没有设置缓存，第二次去访问这个网站的时候，又会再一次请求所有的东西，但如果我们在第一次访问的时候，设置了缓存，那么当以后去访问同一个站点的时候就会快很多了。在http请求报文的头部中，有个表示过期时间的域expires，如果我们要请求的文件短时间内不会发生变化，我们就可以通过设置该域的值实现http缓存。如果有些文件，我们不确定它是否发生变化，还可以通过判断last-modified的值来看我们到底要不要发送请求。

3 合理放置css和js的在页面中的位置

一般而言，我们会将css放在head部分，这样是为了在body加载之前就可以获取到css文件，这样当我们的页面加载的时候，不会出现没有样式的情况，也会提高用户的体验。

相反，js文件，我们应该把它们放在离body闭合标签的最近的位置。因为当我们下载js文件和执行js文件的时候会阻塞页面的加载，如果把js文件的获取放在body的上面，那么页面就会延迟加载，会给用户造成页面白屏的感觉，这样不利于用户体验，所以我们应该把js文件放在页面下方，这样当整个页面加载完成之后才会开始下载js文件，也就不会出现阻塞页面加载的情况了。

除此之外，我们还可以让下载js是非阻塞的，比如，可以使用defer属性，或者动态的去创建script标签，然后设置src属性为我们要下载的文件路径。

4 减少DOM数量

一个页面DOM越多，说明要下载的东西越多，我们在写页面的时候应该尽可能的保持页面布局的简洁，减少那些不必要标签的使用。

5 惰性加载

使用这样的方法可以很好的在页面开始加载的时候减少加载时间，节约资源。它的原理很简单，比如说我们有一个轮播图，然后可以在加载的时候只加载第一张图，当用户点击下一张的时候我们再去取下一张图，这样如果用户不点击下一张，我们就可以节约一次http请求的数目了。

二 代码级别的优化

1 让变量尽可能变成局部变量

在javascript中，作用域主要分为两类，一类是全局作用域，一类是因函数而出现的局部作用域。当执行流到达函数的时候，就会将包含参数对象的活动对象作为变量对象放入到作用域中，且是作用域的最前端，也就意味着当我们在函数中使用某个变量的时候，首先会在这个变量对象中寻找该变量。作用域链的下一个变量对象来自于最近的包含外部环境，以此类推，作用域的末端就是全局环境中的变量对象。

如果我们在函数中要使用一个全局变量，就一直着要搜索到作用域链的最末端，所以为了减少搜索占用的时间和资源，我们应该尽量使用局部变量。

2 减少搜索DOM节点的次数

在页面中搜索某个DOM节点是要付出很高的代价的，特别是当DOM节点嵌套的比较深的时候，为了能够减少搜索带来的性能消耗，我们可以把一次搜索的结果存放在一个局部变量中，这样就可以只搜索一次。