首页
学习
活动
专区
工具
TVP
发布

大型分布式网站的思考(二):Web前端性能优化

一般来说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前端性能优化的时候,提到最多的就是缓存。

网站性能优化第一定律:优先考虑使用缓存!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180122G0RFQR00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券