前端性能优化

标签: 前端 性能 优化 | 发表时间:2015-01-08 16:20 | 作者:bijian1013
分享到:
出处:http://www.iteye.com

 一.减少HTTP请求

   基本原理:

  在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。

  一个正常HTTP请求的流程简述:如在浏览器中输入" www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。

  而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。

  网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。所以,请减少HTTP请求。
   解决办法:

  合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。
 
二.请正确理解Repaint 和Reflow

   基本原理:

  Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。

  Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。
   减少性能影响的办法:

  上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式; 有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。

  总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围。
 

三.请减少对DOM的操作

   基本原理:

  对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。

  天生就慢。在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
   解决办法:

  修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。

  减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。

  注:在IE中:hover会降低响应速度。
 

四.使用JSON格式来进行数据交换

   基本原理:

  JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

  与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
   JS操作JSON:

  在JSON中,有两种结构:对象和数组。

  1. 一个对象以 “ { ”  开始,“ } ” 结束。每个“名称”后跟一个 “ : ” ;“名称/值 对”之间使用 “ ,  ”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用引号括起来,数值型则不需要。如:

var obj={"name":"darren","age":24,"location":"beijing"}

        2. 数组是值(value)的有序集合。一个数组以 “ [ ” 开始, “ ] ” 结束。值之间使用 “ , ” (逗号)分隔。如:

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];

        对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下,使用JSON进行数据传递简直是太美妙了,可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员,一定会非常喜欢JSON。
 

五.高效使用HTML标签和CSS样式

   基本原理:

  HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。

  CSS指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。

  一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式,我不是要你重构页面,只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML:

<table><tr><td>  
	<table><tr><td>    
		...  
        </td></tr></table>
</td></tr></table>

        或者这样的CSS:

body .box .border ul li p strong span{color:#000}

        以上都是对HTML和CSS非常糟糕的使用方法。
   正确理解:

  HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

  CSS是用来渲染页面的,也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的,这里对css选择符按照开销从小到大的顺序梳理一下: 

ID选择符 #box
类选择符 .box
标签 div
伪类和伪元素 a:hover

        当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。

 

六.使用CDN加速(内容分发网络)  

   基本原理:

  CDN的全称是Content Delivery Network,即内容分发网络。

  "其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。

  上面几句话有多少能安安心心看完的,所以我还是通过说故事再来介绍一遍吧,顺便补一句,故事出处不明,^_^:
  古代打仗大家一定都知道,由于古代的交通很不发达,所以当外族进攻的时候往往不能及时的反击,等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影,这个让古代的帝王很是郁闷。后来帝王们学聪明了,都将大量的兵员提前派往边境驻扎,让他们平时屯田,战时当兵,这样的策略起到了很显著的作用。
   不足之处:

  实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温,这一缺陷将得到改进,使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器,或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。

 
七.将CSS和JS放到外部文件中引用,CSS放头,JS放尾 

   基本原理:

  注:这个是很基础且必须遵循的知识点,可是为了文章的完整性勉为其难加进来吧,嘿嘿。

  引入外部文件好处是显而易见的,而且是项目稍稍复杂一点的时候就有必要了这样做了。

  易维护、易扩展,方便管理和重复利用。
   正确的方式:

  JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面。这个也就是JavaScript的阻塞特性。

  因为这个阻塞的特点,建议把JavaScript代码放到</body>标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。

  HTML规范清楚指出CSS要放包含在页面的<head>区域内,这里就不多解释了。
 

八.精简CSS和JS文件

   基本原理:

  有一条非常重要的准则一直没有提到,就是CSS和JavaScript的压缩,直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor,它的特点是:移除注释;移除额外的空格;细微优化;标识符替换。

  YUI Compressor是java程序,如果你对java很熟悉的话可快速的上手使用yuicompressor.jar;如果你对java很陌生也没关系,一样可以使用YUI Compressor,下面介绍其使用方式。
   YUI Compressor的配置和使用:

  先配置使用环境:

  1.先确保电脑中是否安装了JDK

  2.再配置必要的环境变量(细节不能三两句说清,所以不知道如何设置还是搜索吧)

  3.在cmd界面,输入javac可测试是否安装成功

  使用方法可从cmd到进入yuicompressor.jar所在磁盘,我以自己的yuicompressor-2.4.2.jar为例:

  1.压缩JS

java -jar yuicompressor-2.4.2.jar api.js > api.min.js 

        2.压缩CSS

java -jar yuicompressor-2.4.2.jar style.css > style.min.css


  当然,还有另一种更傻瓜式的使用方式,赶兴趣的朋友自己可去多尝试下。
 

九.压缩图片和使用图片Sprite技术

   基本原理:

  注:其实压缩图片和图片精灵是两个方面的技术,可是既然都是关于图片的优化还是放到一块吧。

  现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有:

  1.缩小图片分辨率;

  2.改变图片格式;

  3.降低图片保存质量。

  关于图片精灵(Sprite)技术就和我们工作直接相关,不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求,前端优化的第一条就是减少请求数,最直接有效的方法是使用图片精灵(CSS Sprite)。图片精灵就是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

  至于图片精灵的操作细节就不多做介绍了,网上相关内容很多。
 

十.注意控制Cookie大小和污染

   基本原理和使用方法:

  有关Cookie的基础和高级知识可以去看文章 《JavaScript 操作Cookie》。

  因为Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie,所以建议去除不必要的Coockie,使Coockie体积尽量小以减少对用户响应的影响;

  使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

  Cookie是有生命周期的,所以请注意设置合理的过期时间,合理地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

 

文章来源: http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.html



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [前端 性能 优化] 推荐:

前端性能优化

- - JavaScript - Web前端 - ITeye博客
  在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.   一个正常HTTP请求的流程简述:如在浏览器中输入" www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行.

web前端性能优化进阶路

- - 阿里巴巴(中国站)用户体验设计部博客
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践. 可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 黄金法则,以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.

前端工程与性能优化

- - FEX 百度 Web 前端研发部
每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题. 我们有雅虎 14 条性能优化原则,还有两本很经典的性能优化指导书:《高性能网站建设指南》、《高性能网站建设进阶指南》. 经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来. 这些性能优化原则大概是在 7 年前提出的,对于 web 性能优化至今都有非常重要的指导意义.

前端性能优化最佳实践

- - Web前端 - ITeye博客
如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验. 但是很多很小的改变可以让用户体验有个飞跃提升,所以任何一点儿小小的优化都会提升你网站的性能. 前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能.

前端性能优化指南

- - SegmentFault 最新的文章
XMLHttpRequest时,而URL长度不到. GET类型请求只需要发送一个. CSS等静态文件放在静态资源服务器上并配置单独域名,客户端请求静态文件的时候,减少. COOKIE反复传输时对主域名的影响. cloneNode在外部更新节点然后再通过. replace与原始节点互换. >多个节点插入操作,即使在外面设置节点的元素和风格再插入,由于多个节点还是会引发多次reflow.

给网页设计师和前端开发者看的前端性能优化

- - 优设(UISDC)
本文的作者哈利来自英国,是一位22岁的设计师、开发人员,同时也是一名作家和讲师(见下图). 英文原文: Front-end performance for web designers and front-end developers ,编译: oschina. 在这篇长文章中,我将分享个人项目经验,一些关于快速简单且非常有趣的WEB性能知识的点点滴滴,以便使你的行为可以像一个初级的网页设计师和前端开发者;希望对任何想开始学习性能的人,有一定的启迪作用,并使你的前端项目变得超快.

高性能建站之前端优化篇

- 英建 - 博客园-首页原创精华区
这算是对前端优化的总结吧,之前零零星星总结和学习,这次做一个完整的总结. 谷歌开发的工具,网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能,并获得有关如何改进性能的建议. YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. 安装:yslow直接在firefox组件查找,安装即可.

前端重构实践(一) —— 性能优化

- - 搜索研发部官方博客
       最近一直在做性能优化和模块化改造的工作,并完成了一次前端重构. 在这里总结出一些经验和得失来帮助大家思考. 共两篇文章,第一篇讨论性能优化,第二篇讨论模块化框架. 而之所以把这两个话题放到一起,是因为这两项工作都涉及到对前端代码进行不同程度的重构,而且模块化改造其实是我们在对性能优化做到一定程度之后发现必须要做的一件事情.

前端性能优化的14个规则

- - Web前端 - ITeye博客
作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了《高性能网站建设指南》一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.

移动H5前端性能优化指南

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
移动H5前端性能优化指南[托尼托尼研究所]. PC优化手段在Mobile侧同样适用. 在Mobile侧我们提出三秒种渲染完成首屏指标. 基于第二点,首屏加载3秒完成或使用Loading. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点.