Web前端性能优化之浏览器访问优化

超、凢脫俗 2022-08-09 01:57 241阅读 0赞

# 一个已经上线运行的网站，小到一般的企业站，大到类似淘宝、京东这样的大型电子商务网站，在从开发一直到运行都需要考虑一个问题，那就是性能。 #

性能是一个网站的重要指标，除非是没得选择（比如只有www.12306.com这个网站能买火车票），否则任何一个用户都无法忍受一个响应缓慢的网站。

一个打开缓慢的网站会导致严重的用户流失，同时也会遭受各界人士的吐槽。所以对于一个网站来说，性能优化是很重要的，这里就对最近所学习的前端性能优化做一个简单的总结。

一般来说web前端指的是网站业务逻辑之前的一部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等。web前端性能优化主要的优化手段就是优化浏览器访问，使用反向代理、CDN等。

浏览器访问优化

1.1 减少http请求

大家都知道，http协议是一个无状态的应用层协议，那么就意味着客户端每向服务器端发送一次http请求，服务器和客户端都需要建立一条通信链路，从而进行数据传输。而在服务器端，每接收到一个http请求，都需要启动一个独立的线程去处理。这些通信和服务的开销都很昂贵，所以在我们网站的设计过程中，应该尽量的减少http请求以提高性能。

在web开发过程中，减少http请求的方式有很多种，其主要的手段有合并CSS，合并JS，合并图片。因为我们在浏览器中打开一个页面，页面中所需要用到的每一个css，js文件和每一张图片，客户端都需要发送一次http请求到服务器端获取这些文件，所以在页面的设计时将浏览器一次访问需要的js，css合并成一个文件，将页面中应用频率很高的图片合并成一张图片，通过减少http请求来提高网站性能。

1.2 使用浏览器缓存

对于一个网站而言，CSS，Javascript，Logo，图标等这些静态资源文件更新的频率都比较低，但是这些资源在每次的http请求中基本上都是需要的，如果将这些文件缓存在浏览器中，这样就可以减少http请求，从而提高性能。通过设置http头中的Cache-Control和Expires的属性，可设置浏览器缓存，缓存时间可以是数天，甚至是几个月。

在某些时候，静态资源文件变换需要更新到客户端的浏览器缓存中，这种情况下可以通过改变文件的文件名来实现，即使用浏览器缓存的网站如果需要更新CSS，JS，Logo等信息，可以通过改变文件名的方式进行更新。

使用浏览器缓存策略的网站在更新静态资源时，特别要注意的一点就是在更新时不宜同时全部更新，而是应该一个文件一个文件的逐步更新，并有一定的时间间隔，这样的话可以避免用户浏览器突然之间大量缓存失效，集中更新缓存，对服务器的压力也比较大。可能会造成服务器负载骤增，网络堵塞。

1.3 启用压缩

在服务器端进行文件压缩，在浏览器端进行文件的解压缩，可以有效的减少客户端与服务器端童通信传输的数据量。对文本文件的压缩率可以到达80%，所以对HTML，CSS，JS等文件进行GZip压缩，可以有效的提高网站的访问速度。但是启用压缩，会对服务器端造成一定的压力，所以在客户端网络条件良好但是服务器端资源比较匮乏的情况下少用。

1.4 Css和JS的在页面中的位置

在我们做网站开发的过程中，一种比较习惯性的操作都是将所有的CSS文件，JS文件都放在页面的最上面，其实这对于成熟的WEB开发者来说，这中做法是不对的。我们应该采用CSS在最上面，JS在最下面的策略。

在我们的浏览器每加载一个页面时，他会先下载完所有的CSS文件之后才开始整个页面的渲染，所以把CSS文件放在页面的最上面，目的就是让CSS文件最先下载。但是js文件则相反，浏览器在下载js文件时，是下载完了之后立即执行，有可能在执行的过程中会造成整个页面的阻塞，造成页面显示缓慢，因此JS文件最好放在页面的最底部。但是如果JS程序在页面解析的时候就需要使用，那么就需要权衡考虑所放的位置了。

1.5 减少cookie的传输

一方面Cookie包含在每次http请求和响应中，太大的Cookie严重影响数据传输，所以那些数据需要写入cookie，这是需要慎重考虑的，最佳方案就是尽量的减少Cookie中传输数据的大小。另一方面，对于一些静态文件来说，没有必要写入Cookie，可以考虑静态资源独立域名访问的策略，避免请求静态资源时发送cookie，减少cookie的传输次数。