前端页面性能优化

时间:2021-08-08 06:12:16

部署(如何进行网站性能优化)

站点在提供服务的时候,尽可能的可靠和快速。

性能

提高性能,最简单的也是最显著的方法就是:减少HTTP请求数量。每一个HTTP请求除了有TCP开销以外,还含有大量的头信息。保存最小的独立链接数可以保证用户的页面加载速度更快。这显然涉及到了服务器需要传输的数据量的问题。让页面和其起源文件保持较小的体积将减少网络用时--对任何互联网上的应用而言,这才是真正的瓶颈。

按照静态资源的分类,可以分为js、css、img,那么就可以从这三个方面入手。

将多个脚本文件合成一个脚本文件,或者将多个css合并成一个样式表,能减少页面渲染所需要的Http链接数量。使用css Sprites 技术合并多张小图为一张大图,然后使用css的background-image和background-position属性在页面中显示对应的图片。只需要设定图片需要显示的尺寸和背景位置的偏移坐标。

为了加速页面渲染,现代浏览器并行下载所需要的资源。但是,在所用的样式表和脚本下载完成之前,页面是不会开始渲染的,有些浏览器更是变本加厉,在处理任何javascript文件时,都会阻塞其下载其他资源的下载。解决方案为设置属性defer(es5之前),或者设置async(es5)

缓存

缓存就是将最近请求的资源存储到本地,以便接下来的请求能够从磁盘中使用这些资源,而不用再次去下载。明确地告诉浏览器什么是可以被缓存的是很重要的。有些浏览器会使用自己默认的缓存策略,但也不能就此完全依赖它,同时也要兼顾其他的浏览器。

此处,需要在后台在http响应头中,相对当前日期设置一个表示“很远的将来”失效的日期。但是,当文件本缓存之后,当当前资源被修改之后,浏览器的资源不是最新的,而强制刷新有时候都无法完成(在服务端也有缓存),此时可以在引用资源文件的url查询参数中添加文件修改的时间,即添加所谓的版本号。当然,此处也可以设置last-modifed。

代码压缩

此处的压缩主要指的是借助于前端工具的压缩,压缩js,css,将小图片转换为base64、、、

Gzip

浏览器通过在发送请求的时候增加Accept-Encoding头信息来识别自己支持的压缩方式:

Accept-Encoding:gzip,deflate

如果服务器看到这条头信息,并且支持列出的压缩方式,它将会对相应结果进行压缩,并且通过Content-Encoding头信息表示其压缩方式。

Content-encoding:gzip

然后,浏览器才能正确地解码,得到解码后的相应。显然,压缩数据可以减少网络传送的时间,Gzip通常能减少70%的体积,巨大的体积压缩减极大地加速了网站的加载速度。

使用CDN

内容分发网络(CDN)为你的站点提供静态资源内容服务,以减少他们加载的时间。