网站首页 网站导航 课程中心
新闻中心
您所在的位置:Web前端培训 > 新闻中心 > web前端性能优化剖析

web前端性能优化剖析

来源:中软卓越 日期:2017-05-19 18:09 人气:
  web前端性能优化剖析
       web前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。
  

  web前端性能优化的目的是什么?

  
  1.从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
  
  2.从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
  
  web前端性能优化完全是一个技术话题,但是对于项目的用户体验有非常大的影响,如果你的网站打开要等待三五秒或者等到浏览器提示无法连接,那网站哪来的流量,哪来的品牌影响和用户忠诚度。
  
  web前端优化的途径有很多,一类是页面级别的优化,例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化,例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。
  

  一、页面级优化

  
  1.减少HTTP请求数
  
  这个优化基本上所有前端人都知道,而且也是最重要最有效的。都说要减少HTTP请求,那请求多了到底会怎么样呢?首先,每个请求都是有成本的,既包含时间成本也包含资源成本。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。时间成本就是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的,资源上由于每个请求都需要携带数据,因此每个请求都需要占用带宽。由于浏览器进行并发请求的请求数是有上限的,因此请求数多了以后,浏览器需要分批进行请求,因此会增加用户的等待时间,会给用户造成站点速度慢这样一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,但是浏览器的进度条会一直存在。
  
  (1).从设计实现层面简化页面
  
  保持页面简洁、减少资源的使用时最直接的。
  
  (2).合理设置HTTP缓存
  
  能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过HTTPHeader中的Expires设置一个很长的过期头;变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。
  
  (3).资源合并与压缩
  
  尽可能的将外部的脚本、样式进行合并,多个合为一个。另外,CSS、Javascript、Image都可以用相应的工具进行压缩,压缩后往往能省下不少空间。
  
  (4).CSSSprites
  
  合并CSS图片,减少请求数的又一个好办法。
  
  2.将外部脚本置底
  
  外链脚本在加载时却会阻塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多,最简单可依赖的方法就是将脚本尽可能的往后挪,减少对并发下载的影响。
  
  3.将CSS放在HEAD中
  
  如果将CSS放在其他地方比如BODY中,则浏览器有可能还未下载和解析到CSS就已经开始渲染页面了,这就导致页面由无CSS状态跳转到CSS状态,用户体验比较糟糕。除此之外,有些浏览器会在CSS下载完成后才开始渲染页面,如果CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
  
  4.减少不必要的HTTP跳转
  
  对于以目录形式访问的HTTP链接,很多人都会忽略链接最后是否带’/',假如你的服务器对此是区别对待的话,那么你也需要注意,这其中很可能隐藏了301跳转,增加了多余请求。
  
  5.避免重复的资源请求
  
  这种情况主要是由于疏忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时,会导致资源的重复请求。
  

  二、代码级优化

  
  1.Javascript
  
  1).DOM
  
  DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除DOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DOM操作则需要注意以下几点:
  
  a.HTMLCollection(HTML收集器,返回的是一个数组内容信息)
  
  在脚本中document.images、document.forms、getElementsByTagName返回的都是HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合”包括读取集合的length属性、访问集合中的元素。
  
  因此,当你需要遍历HTMLCollection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将length属性、成员保存到局部变量后再使用局部变量。
  
  b.Reflow&Repaint
  
  除了上面一点之外,DOM操作还需要考虑浏览器的Reflow和Repaint,因为这些都是需要消耗资源的,具体的可以参加以下文章:
  
  如何减少浏览器的repaint和reflow?
  
  UnderstandingInternetExplorerRenderingBehaviour
  
  NotesonHTMLReflow
  
  (2).慎用with
  
  (3).避免使用eval和Function
  

  2.CSS选择符

  
  在大多数人的观念中,都觉得浏览器对CSS选择符的解析式从左往右进行的,例如
  
  #tocA{color:#444;}
  
  这样一个选择符,如果是从右往左解析则效率会很高,因为第一个ID选择基本上就把查找的范围限定了,但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符,浏览器必须遍历查找每一个A标签的祖先节点,效率并不像之前想象的那样高。
  
  中软卓越培训专注于Java、UI、iOS、Android、php、软件测试、.net、嵌入式、C语言、大数据、HTML5开发,师资力量强大,教学经验丰富,环境优美,交通便利,始终坚持让教育回归本质的教学理念,学习web前端,就来中软卓越!

营业执照 版权所有©Copyright 2008-2017,北京中软国际教育科技股份有限公司, All Rights Reserved. ICP备案号:京ICP备14058756号-2

| | 分类导航 | 关于我们