一般来说web前端是指网站业务逻辑之前的部分,比如:浏览器加载、网站视图模型、图片服务、CDN服务等等。web前端优化主要从如下三个方面入手:
浏览器访问优化
减少http请求
http协议是一个无状态的,每次请求都需要建立通信链路进行传输,在服务器端,一般每个请求都会分配一个线程去处理。
减少http请求的主要手段是合并CSS、合并js、合并图片。
使用浏览器缓存
css、js、Logo、图标等静态资源文件更新频率较低,可以将这些文件缓存在浏览器中。
在更新js等文件的时候,一般不是将文件内容更新,而是生成一个新的文件,然后更新html的引用。
更新静态资源的时候,也是要逐量更新,以避免用户浏览器的大量缓存失效,造成服务器负载增加、网络堵塞。
启用压缩
在服务器对文件压缩,然后在浏览器端解压缩,可以减少通信传输的数据量。
CSS放在页面最上面,js放在页面最下面
浏览器会在下载完全部CSS之后才对整个页面进行渲染,而浏览器是在加载js之后就立即执行,有可能会阻塞整个页面。因此最好的做法就是把CSS放在最上面,js放在最下面。但是如果是页面解析的时候就用到js,也是要相应的js放在上面。
减少cookie传输
cookie会包含在每次请求和响应中,太大的cookie会影响数据传输,需要慎重考虑哪些数据写入cookie中。
对于某些静态资源的访问,如css和js等,发送cookie没意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie。
CDN加速
CDN(content distribute network,内容分发网络)的本质仍然是一个缓存。将缓存放在离用户最近的地方,使得用户可以以最快的速度获取数据。
CDN缓存的一般是静态资源,如图片、文件、CSS、js、静态网页等。
反向代理
反向代理服务器位于网站中心机房的一侧,代理网站web服务器接收http请求。
反向代理可以在一定程度上保护网站安全,来自互联网的访问请求必须经过代理服务器,相当于在web服务器和攻击之间加了一个屏障。
反向代理也可以通过配置缓存,静态资源被缓存在反向代理服务器,当用户访问时,可以从反向代理服务器上返回。有些网站也会将部分动态内容缓存在代理服务器上,通过内部通知机制,更新缓存。
反向代理也可以实现负载均衡的功能。
写在最后
可以发现,在web前端性能优化的时候,提到最多的就是缓存。
网站性能优化第一定律:优先考虑使用缓存!
领取专属 10元无门槛券
私享最新 技术干货