web网站前端性能优化(一)

了解你的网站

为了优化一个网站,你必须能够识别出需要改进的地方。这意味着要分析页面上的请求数量、页面包含的数据量以及页面加载所花费的时间。这就是开发者工具派上用场的地方。您将学习如何使用这些工具创建瀑布图,以及如何量化客户网站的各个方面,以便您有一个优化的起点。

下面来看一下chrome的开发者工具:


QQ截图20200729140904.png

记录按钮必须处于启用状态(红色),然后您才能生成一个请求瀑布图。还应该选中Disable Cache复选框,以便在重新加载页面时不进行缓存。

查看请求的时间信息

TTFB

(TTFB),即从用户请求web页面到响应的第一个字节到达的时间。通俗易懂的将就是从发送请求,到接到相应之间等待的时长。


QQ截图20200731161138.png

TTFB时间过长背后的原因各不相同。这可能是由于网络条件,例如服务器与用户的物理距离、服务器性能差或应用程序后端存在问题。TTFB时间越长,用户等待的时间也就越长。

要想查看一个网页的完整时间可以在chrome的timing选项卡中查看,如图:


QQ截图20200731162210.png

TTFB值在Chrome中也被清楚地标记了出来。在发出请求之前,需要执行几个步骤,如请求排队、DNS查找、连接设置和SSL握手。其中我们会发现DNS查找时间过长,为了消除DNS查找的延迟,浏览器会创建一个DNS查找缓存。如果缓存中没有域对应的IP地址,则IP地址查找将导致延迟。然而,当重复请求时,IP地址将被缓存以消除进一步请求中的延迟。

查看HTTP请求和响应头

HTTP头由浏览器在初始请求中发送,服务器在其响应中发送。这些头包括一些基本信息,如响应代码、支持的媒体类型、请求的主机,等等。但是头中也可以包含性能指标。与性能相关的头的一个例子是内容编码响应头。这个头告诉您某个资源是否被web服务器压缩了。当您设置自己的服务器时,您很有可能知道是否启用了压缩。如果您在不熟悉的主机环境中工作,并且缺乏确定性,那么可以检查响应标头。HTTP头信息可以在chrome的headers选项卡中查看。


QQ截图20200731163409.png

如图我们知道了,服务器对响应资源进行gzip压缩。gzip压缩后网页请求速度会发生明显的提升,但在不要所有的资源都使用gzip压缩,因为压缩需要消耗cpu性能,所有应该根据网站的访问量和服务器的性能进行合理配置。

优化网站

通过chrome开发者工具分析,那么要提高一个网站的性能时,目标很简单:减少传输的数据量。通过这样做,你可以减少网站在任何设备上加载的时间。
为了减少传输数据量,我们从缩小站点资源开始,其中包括CSS、JavaScript和HTML本身。然后你将继续优化网站上的图像,而不损害它们的视觉完整性。要实现资源的压缩,我们可以使用minifier和 html-minify

npm install –g minifier html-minify

1. 压缩css

// -o 输出文件
minify -o styles.min.css styles.css 

2.压缩js

minify -o jquery.min.js jquery.js

3.压缩html

htmlminify -o index.html index.src.html

4.压缩图片
对应图片的压缩有很多工具,这里我推荐使用TinyPNG(https://tinypng.com/)

QQ截图20200729143856.png

通过上面这些压缩优化你的网站最少可以缩短30%的加载时间

使用评估工具

谷歌PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/)分析一个网站,并给出如何提高其性能和用户体验的建议。当PageSpeed Insights进行分析时,它会进行两次:一次是通过移动用户代理,一次是通过桌面用户代理。它在分析性能时考虑了两个条件:加载超过页面的内容所花费的时间,以及加载整个页面所花费的时间。不过官方提供的网站已经被墙了,可以访问这个中文站看看:https://developers.google.cn/speed/pagespeed/insights/

QQ截图20200731153211.png

该工具会给用户网页从0到100打分,并根据所发现问题的严重程度显示不同颜色。黄色表示在时间允许的情况下应该修复的小问题,而红色表示马上应该修复的问题。
QQ截图20200731153612.png

页面渲染过程

当用户访问一个网站时,浏览器解释HTML和CSS并将其呈现在屏幕上,了解这个过程会对优化网页有所帮助,具体来说,这个过程的步骤是:
1.解析HTML以创建文档对象模型(DOM)
当HTML从web服务器下载时,浏览器将解析它以构建DOM, DOM是HTML文档结构的层次结构表示。
2.解析CSS以创建CSS对象模型(CSSOM)
在构建DOM之后,浏览器解析CSS并创建CSSOM。这与DOM类似,不同之处在于它表示CSS规则应用于文档的方式。
3.布局元素
DOM和CSSOM树被组合起来创建一个渲染树。然后,渲染树执行布局过程,应用CSS规则并在页面上布局元素以创建UI。
4.绘制页面
在文档完成布局过程之后,CSS和页面中的媒体将应用于页面的装饰方面。在绘制过程的最后,输出被转换为像素(光栅化)并显示在屏幕上。

站点的大部分渲染是在页面首次加载时完成的,但在此之后可能会出现更多渲染。当用户与页面上的元素交互时,页面可能会发生更改。这些更改可能触发重新渲染。

你可能感兴趣的:(web网站前端性能优化(一))