创建网页要钱吗:网站设计前端攻略系列(一):前端各种优化
本文摘要:还有一个小时才到2012,那还能有点时间写点吐槽的东西,嘿嘿...2011年12月绝对是本人工作以来压力最大的一个月,已经忙到睡觉时间少了,业余看书时间少了,身体开始报警了,肩膀上的责任压的我实在喘不过气...作为一个普通的北漂,在北京类似我这样的人海的去
另有一个小时才到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申请的流程简述:如在阅读器中输入 xxxxxx 并按下回车,阅读器再与这个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:

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)的时分,低效的挑选符仍然会引发更高的开支,以是请防止低效。