现在web前端也是一个非常热门的行业,想要学习web前端开发的同学请看这里北京web前端性能优化方案 ,通过对web前端性能优化?? 的了解,希望以上信息可以帮助到您
1.web前端性能优化
1. 请减少HTTP请求在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。一个正常HTTP请求的流程简述:如在浏览器中输入" sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。2. 请正确理解 Repaint 和 Reflow注:Repaint 和 Reflow 也就是重绘和重排,请允许我在这卖弄下我有限认识的那么几个英语单词...囧基本原理:Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变、outline、背景色等等。Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。减少性能影响的办法:上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以*通过设置class的方式; 有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围。3. 请减少对DOM的操作基本原理:对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。天生就慢。在《高性能》中这么比喻:“把DOM看成一个岛屿,把()看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。解决办法:修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请合理的使用变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。注:在IE中:hover会降低响应速度。4. 使用JSON格式来进行数据交换基本原理:JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 原生格式,这意味着在 中处理 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是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。CSS是用来渲染页面的,也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的,这里对css选择符按照开销从小到大的顺序梳理一下:ID选择符 #box类选择符 .box标签 div伪类和伪元素 a:hover当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。6. 使用CDN加速(内容分发网络)但是有弊端:实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温,这一缺陷将得到改进,使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器,或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。 7. 将CSS和JS放到外部文件中引用,CSS放头,JS放尾的阻塞特性。8. 精简CSS和JS文件9. 压缩图片和使用图片Sprite技术10. 注意控制Cookie大小和污染
看了以上有关web前端性能优化??的讲解,如果还有什么疑问可以直接来电咨询