文档章节

大型网站技术架构(3):WEB 前端性能优化

不最醉不龟归
 不最醉不龟归
发布于 2016/12/13 13:47
字数 1498
阅读 20
收藏 0

上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类

这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器处理之前的部分,包括浏览器渲染、加载,前端视图模型,图片视频资源,CDN 服务等,主要优化方法就是优化浏览器访问渲染过程,使用反向代理,使用 CDN 服务等

浏览器访问渲染优化

减少 http 请求数

http 协议是无状态的应用层协议,每次 http 请求都会建立新的通信链路,并且在服务端,每个 http 连接都会开启一个单独的线程去处理请求,这都会产生额外的开销

主要手段就是去合并压缩 css,JavaScript,图片文件,把需要的 css,JavaScript,图片资源进行合并减少建立的连接请求数

同时使用 http 的 keep-alive 来进行连接的复用,以此来减少建立的 http 连接数,提高访问性能

启用压缩

在服务端进行文件的压缩,减少通信传输过程中的数据量

对于文本文件,压缩率能够达到 80% 以上,因此在服务端启用 gzip 压缩是一个很好的选择,但启用压缩的同时也会给服务器带来额外的开销,所以要具体情况具体分析

css,JavaScript 代码优化

  • css 代码优化:

    • 尽量使用外部样式,并且放在页面顶部加载,一方面能够及时渲染,另一方面能够避免因某些样式导致阻塞渲染

    • 压缩合并 css 文件,尽量精简文件,减少通信传输数据量和请求连接数

  • JavaScript 代码优化:

    • 因为 JavaScript 代码边加载边解析,解析的过程会阻塞浏览器渲染,因此把 JavaScript 代码放在页面底部加载

    • 同样的压缩合并 JavaScript 文件,尽量精简文件,减少通信传输数据量和请求连接数

    • 写高性能的 JavaScript 代码

使用浏览器缓存

一般来说,对于网站里面不经常变化的静态资源,更新频率比较低,因此可以把这些资源缓存在浏览器中,能够很好的改善性能

通过设置 http 头里的 Cache-Control 和 Expires 属性来设定浏览器缓存时间

另外还有 Etags 和 opcode 的缓存,根据具体情况进行选择吧

CDN 加速

CDN 的本质也属于缓存,内容分发网络,把数据缓存在里用户近的地方,使用户尽快的获取数据

因为 CDN 都是部署在网络运营商的机房,这些运营商又同时为用户提供网络服务,因此用户请求的路由会优先到达 CDN 服务器,如果存在请求的资源的话,就直接返回,最短路径返回响应,加速用户访问速度,同时还能够为中心机房减轻压力

CDN 一般用来缓存静态资源,css,Script 脚本,静态页面,图片等,这些内容修改频率很低但是访问请求频率很高,因此放在 CDN上能够很好的改善访问速度

反向代理

传统的代理服务器是当你请求不到所请求的资源时,由代理服务器帮你请求,你知道你请求的最终的服务器是谁,典型的例子就是VPN,通过代理服务器来请求到墙外的世界

而反向代理是当你请求一个地址时,你请求的是反向代理服务器,然后由反向代理服务器去请求其他服务器来获取内容,而你不知道最终是从哪一台服务器获取到的数据

反向代理 web 服务器接收 http 请求,然后进行请求转发,获取到内容后返回给你,你只知道是由反向代理服务器给你的数据,而不知道数据源最终是从哪个服务器来的

反向代理服务器具有保护作用,来自互联网的请求都需要经过反向代理服务器,相当于在 web 服务器之间建立起了一道屏障

除了安全以外,可以在反向代理服务器上进行一些静态资源的缓存,以此来提高访问速度,减轻应用服务器的负载压力

当然,有些动态资源也可以缓存在代理服务器上面,比如说热门的词条,帖子,博客等,这些资源的请求量可能非常非常的大,如果每次都走一遍流程的话会造成很大的压力,同时,当这些动态内容发生改变时,会通知反向代理服务器缓存失效,代理服务器会重新缓存动态资源

除此之外,反向代理服务器还可以用来做负载均衡,通过负载均衡来构建服务器集群,以此来提高系统的总体处理能力,进而应用提高服务器处理高并发的能力

PS:使用 ajax 也是提高用户体验很好的方法,不过 ajax 对于 SEO 并不友好,所以需要用到 SEO 的地方还是要考虑好是否要用ajax

好了,关于 web 前端优化就写到这里,下次会继续写应用服务器性能优化,存储服务器性能优化

大型网站技术架构(1)
大型网站技术架构(2):架构要素和高性能架构
大型网站技术架构(3):WEB 前端性能优化

本文转载自:

不最醉不龟归
粉丝 23
博文 435
码字总数 454608
作品 0
深圳
程序员
私信 提问
大型网站技术架构 核心原理与案例分析 2016-4-17

第1篇 概述 1 大型网站架构演化 2 1.1 大型网站软件系统的特点 3 1.2 大型网站架构演化发展历程 4 1.2.1 初始阶段的网站架构 4 1.2.2 应用服务和数据服务分离 4 1.2.3 使用缓存改善网站性能 ...

jayronwang
2016/04/17
122
0
北京社本互动信息技术有限公司招聘信息

PHP项目经理 待遇:10-15K/月 职位描述: 1、 精通软件项目开发方法、标准、规范,以及科学的项目管理; 2、 参与系统需求分析与设计,并负责完成底层核心代码,接口规范的开发,架构设计; ...

hr_beijing
2011/03/24
1K
34
上海盛大在线急聘--Java,架构师,C++,PHP,数据库,考虑的发简历啊

有考虑的兄弟加我QQ:1377433499,或是msn:helenyuan114@msn.com 可以发最新的简历到我邮箱Helen.yuan@newferry.biz 支付开发---Java 职责: 1、按照usecase?进行业务需求分析和软件概要设计...

谷底的太阳
2010/11/25
7.7K
74
北京社本互动信息技术有限公司招聘信息

PHP项目经理 待遇:10-15K/月 职位描述: 1、 精通软件项目开发方法、标准、规范,以及科学的项目管理; 2、 参与系统需求分析与设计,并负责完成底层核心代码,接口规范的开发,架构设计; ...

shebenhudong
2011/04/26
476
9
上海区域某电子商务招聘前端/PHPer/测试/MySQL DBA/linux运维

上海区域某电子商务招聘(已列出工资范围,具体薪资根据个人能力而定) 前端职员 1名 (薪资:4K-7K) 职位描述: 1.参与产品线的前端开发,能够把PS平面设计分解为符合标准、并合理兼顾开发效率和...

Martin_Ye
2011/03/23
360
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机网络

计算机网络体系结构 OSI 其中表示层和会话层用途如下: 表示层 :数据压缩、加密以及数据描述,这使得应用程序不必关心在各台主机中数据内部格式不同的问题。 会话层 :建立及管理会话。 五层...

一只小青蛙
53分钟前
2
0
0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部