网站设计前端攻略系列(一)：前端各种优化

还有一个小时才到2012,那还能有点时间写点吐槽的东西,嘿嘿…2011年12月绝对是本人工作以来压力最大的一个月,已经忙到睡觉时间少了,业余看书时间少了,身体开始报警了,肩膀上的责任压的我实在喘不过气…作为一个普通的北漂,在北京类似我这样的人海的去了,尤其是在咱们这个行业。我非常热爱生活,每分钟都无比珍贵;我热爱我现在所做的一切,哪怕确实让我精疲力尽(所以写博客暂时被我当成减压的方法)。在我看来生活就是应该这样,既然我们在投胎的时候选择的生存模式or困难模式,那么不管发生什么困难都是意料之中。所以我在这不是想要表达自己的抱怨,而是想提醒自己和大家 “ 再忙再累也不要忘记自己的梦想和目标 ”。突然想起个例子不吐不快,关于我们80后应该都玩过的超级玛丽(mario)。不管你有多少生命多少金币,说到底都是浮云,游戏中你会碰到无数的敌人(乌龟、飞鱼、食人花…),遇到无数的艰险(一个接一个的坑、下水道、火海…),可是想要通关只有一个方法,那就是救到公主,这就是目标。if you want to live a happy life, tie it to a goal. not to people or things.如果你想过得快乐,那就把生活和目标结合在一起,而不是来自他人或物质。许久才出来冒一次泡,所以难免吐槽一下,不喜欢以上那段的就当看个热闹,下面咱们开始正题。作为本人2011年的收尾文章,就来个总结性质的吧,^_^…最近一直有给新同学做前端方面的培训,也有去参与公司前端的招聘,所以把自己资料库里面很多高效且有用的知识做了些规整分类,然后再分享一篇关于前端优化方面的总结。而且春节一过就又是招聘的高峰期了,在校的、跳槽的、浮躁的都开始进入面试的大军,前端优化也是前端面试一般会问到的东西,所以希望能对朋友们有用。前端性能优化1.请减少http请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。一个正常http请求的流程简述:如在浏览器中输入”www.kuaisubeian.org”并按下回车,浏览器再与这个url指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。而当我们请求的网页文件中有很多图片、css、js甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个http请求都会对服务器和浏览器产生性能负担。网速相同的条件下,下载一个100kb的图片比下载两个50kb的图片要快。所以,请减少http请求。解决办法:合并图片(css sprites),合并css和js文件;图片较多的页面也可以使用 lazyload 等技术进行优化。2.请正确理解 repaint 和 reflow注: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的影响范围。3.请减少对dom的操作基本原理:对dom操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。天生就慢。在《高性能javascript》中这么比喻:“把dom看成一个岛屿,把javascript(ecmascript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问dom都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。解决办法:修改和访问dom元素会造成页面的repaint和reflow,循环对dom操作更是罪恶的行为。所以请合理的使用javascript变量储存内容,考虑大量dom元素中循环的性能开销,在循环结束时一次性写入。减少对dom元素的查询和修改,查询时可将其赋值给局部变量。注:在ie中:hover会降低响应速度。4.使用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。5.高效使用html标签和css样式基本原理:html是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(seo)和属性(表现形式)。css指层叠样式表 (cascading style sheets),如果说把页面想象成一个人,html就是人的骨架,css就是人的衣装,一个人的品味从他的衣装就能一目了然。一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的css样式,我不是要你重构页面,只是希望你在碰到这种情况的时候解决这些问题。如这样的html:…或者这样的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)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。[网站备案]