Web性能优化

一,前端优化的目的

1)从用户角度,优化时候能够让页面加载更快,对用户的操作响应更及时,能够给用户提供更为友好的体验

2)从服务商角度,优化能够减少页面请求,或者减少请求所占宽带,能够节省可观的资源

优化的方面可以分为页面级别和代码级别

二.页面级别

一》减少HTTP请求

1>原因:

1》性能准则:用户最终花相应的10%-20%的时间在接受请求的HTML文档,其他的时间都是花在HTML文档引用的所有组件(图片,css,script)进行HTTP请求上。

2》请求头的数据量(是小问题):每次请求的时候都会带上一些额外的信息进行传输,当请求资源很小时,可能request带的数据比实际的数据量还大,所以当请求越多时,在网路上传输的数据也就越多,传输速度自然就慢

3》HTTP连接产生的花销:(用户输入url到下载内容,客户端经历的过程)

域名解析-TCP连接-发送请求-等待(主要包含网络延迟和服务器处理时间)-下载资源-解析时间

请求花费的时间大部分在其他阶段,而不是在下载资源阶段

2>HTTP请求大多是并发但是如果并发请求太多会对服务器造成压力,而且HTTP/1.1虽然引入管道机制允许客户端同时发送多个请求,但是服务器任然要先响应A再去响应B。合并请求理论上是要比不合并请求节省时间的。

3>减少请求的方法

一.尽量避免重定向

原因:重定向损伤性能,他会延迟整个HTML文档的传输,在HTML文档到达之前,页面不会呈现任何东西,也没有任何组件会被下载。

比如把一个URl写成重定位,当点击整个url时,先发送一个post请求给服务器,服务器处理完后发送一个302响应给浏览器,浏览器再根据响应的url发送get请求。

重定向:就是当用户浏览器或搜素引擎访问某个旧的网址地址时,服务器告诉浏览器或搜素引擎,改网址已经搬家,新家的地址是....,请使用新地址来访问该网页。

避免重定向的方法:

1)在定义连接地址的href属性的时候,尽量使用最完整的,最直接的地址

2)后台可以去设置,Response.Redirect第二个参数设置为false

3)如果涉及到从测试环境到生产环境的迁移,建议通过DNS中的CNAME的机制来定义别名,而不是强制地重定向

二,资源合并和压缩

合并css,合并js,合并图片,另外css,js都可以用相应的工具进行压缩,压缩后会节省很多空间

压缩方法:

1)web服务器开启Gzip压缩

在http协议中允许客户端可以选择从服务器上下载压缩的内容,服务器配置人员可以查看对应的配置文件,开启Gzip压缩,服务器启用Gzip压缩后,会在响应头中增加Content-Encoding:gzip,可以通过检查此header项来判断服务器是否开启Gzip压缩。

2)js代码压缩

js压缩原理一般是去掉多余的空格,替换长变量名,简化一些代码写法等。Js代码压缩工具很多,其中用的最多的是UglifyJS,它不仅是压缩工具,同时具有js语法分析和代码优化功能。

3)css代码压缩

Css代码压缩原理和js代码压缩原理类似,去掉多余的空格注释等,同时优化合并一些css规则定义,css代码压缩工具比较有名的是CSS Compressor

4)图片压缩:可以使用图片压缩工具

何时压缩代码也很重要,因为压缩后的代码会影响代码的调试,使得开发者不容易确定代码出错的位置,所以推荐在开发后期,甚至在网站的发布阶段做代码和资源的压缩。如果放在代码发布阶段压缩,则开发者开发过程不需要考虑代码压缩问题,方便开发者的开发与调试。

三,雪碧图(css sprite)

四,图片懒加载

六,使Ajax可缓存

七,CSS放在页面最上部,javascript放在页面最下面

浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。

Javascript则相反,浏览器在加载javascript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此javascript最好放在页面最下面。

五,使用CDN内容分发网络服务器在离你最近的地方,放置一台性能好连接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容

CDN内容分发网络服务器其主要作用是可以保证网络内容更快,更稳定的传输,即加速网络访问的作用。

本质仍然是一个缓存,而且就近获取资源,当CDN中存在浏览器请求的资源时,从CDN直接返回给浏览器最短路径返回响应,加快用户访问速度,减少数据中心负载压力。

 CDN缓存的一般是静态资源,如图片、文件、CSS、script脚本、静态网页等,但是这些文件访问频度很高,将其缓存在CDN可极大改善网页的打开速度。

使用CDN会极大的简化网络的系统维护工作量,网络维护人员只需将网站内容注入CDN系统,通过CDN部署在各个物理位置的服务器进行全网分发,就可以实现跨运营商,跨地域的用户覆盖。

在网站和用户之间加入CDN之后,用户不会有任何与原来不同的感觉。一个典型的CDN用户访问调度流程:

Web性能优化_第1张图片

 

1)当用户点击网站页面上的内容url经过本地DNS解析,DNS系统会最终将域名解析权交给CNAME(DNS的一种解析方式,即别名解析,比如一个域名www.domain.com,设置一个CNAME指向它,由www.domain.com与一个IP进行绑定,如果设置多个CNAME指向它,以后修改CNAME指向的服务器时,只需要修改一个www.domain.com对应的IP即可)指向的CDN专用DNS服务器

2)CDN的DNS服务器将CDN的全局负载均衡设备的IP地址返回给用户

3)用户向CDN的全局负载均衡设备发起内容url访问请求

4)CDN全局负载均衡设备根据用户IP地址以及用户请求的内容url选择一台用户所属区域的区域负载均衡设备,告诉用户向这台设备发起请求

5)区域负载均衡设备会为用户选择一台合适的缓存服务器提供服务

选择的依据:根据用户IP地址,判读那一台服务器据用户最近;根据用户所请求的url中携带的内容名称,判断那一台服务器上有用户所需的内容;查询各个服务器当前的负载情况,判断那一台服务器尚有服务能力。

基于以上这些条件的综合分析之后,区域负载均衡会向全局负载均衡设备返回一台缓存服务器的IP地址

6)全局负载均衡设备把服务器的IP地址返回给用户

7)用户向缓存服务器发起请求,缓存服务器响应用户请求,将用户所需内容传达到用户终端。如果这台缓存服务器上并没有用户想要的内容,而区域均衡设备依然将它分配给用户,那这台服务器就要向它上一级缓存服务器请求内容,直至追溯到网站的源服务器将内容拉倒本地。

缺点:只能对静态资源加速它是缓存文件,如果网站更新了内容部分电脑可能不会实时的更新过来,他需要将CDN那台计算机的内容也更新了,客户的显示器上内容才是最新的,这个时间可能需要几小时甚至半天,所以CDN加速不适合经常更新的网站代价高

三,代码级别

一.避免css表达式

问题:IE5开始支持,但是在页面显示,缩放,滚动,移动鼠标时都会重新计算一次,在页面中随便移动鼠标都可以达到10000次以上的计算量

二.避免使用@import(等页面加载完后才去加载,用link标签替换它)

三.避免通配选择符,单规则的属性选择器

css选择符是从右到左匹配的

比如:#hrader>a{font-weight:blod;}

浏览器遍历页面中所有的a元素->其父元素的id是否为header

#hrader a{font-weight:blod;}要比上一个消耗更多的事件

属性选择器是:.selected[href="#index"]{background:red;}

浏览器匹配所有元素->检查是否有href属性并且href属性值等于“#index”->分别向上级逐级匹配class为selected的元素,直到文档的根元素

四.尽量减少DOM访问,减少重排重绘

js访问DOM是非常耗时的,比如:我们要遍历一个元素,遍历的时候可以将 length属性保存到局部变量后再使用局部变量。

减少Reflow和Repaint ,因为这些都是需要消耗资源的。

减少 reflow/repaint

(1)不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className

(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。
(4)千万不要使用 table 布局因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)

(5)不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)

五.事件委托

你可能感兴趣的:(Web性能优化)