Web前端性能优化

atom的前端开发插件
chrome 插件 前端开发
前端开发火狐插件

1.减少HTTP请求
当我们请求的网页文件中有很多图片、cssjs甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。
解决: 1.合并图片(css sprites)
2.合并cssjs文件
3.图片较多的页面也可以使用 lazyLoad 等技术进行优化。
2.正确理解Repaint和Reflow
Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨。
解决办法:上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式;有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。
减少对DOM的操作
对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。天生就慢。在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把 JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
解决办法:修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。
减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。
注:在IE中:hover会降低响应速度。

3.使用JSON格式来进行数据交换
JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
js操作JSON

  1. 一个对象以 “ { ” 开始,“ } ” 结束。每个“名称”后跟一个 “ : ” ;“名称/值对”之间使用 “ , ”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用引号括起来,数值型则不需要。如:
    var obj={“name”:”darren”,”age”:24,”location”:”beijing”}
    2. 数组是值(value)的有序集合。一个数组以 “ [ ” 开始, “ ] ” 结束。值之间使用 “ , ” (逗号)分隔。如:
    var jsonlist=[{“name”:”darren”,”age”:24},{“name”:”weidong.nie”,”age”:24}];

4.高效使用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)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。

5.使用CDN加速(内容分发网络)
CDN的全称是Content Delivery Network,即内容分发网络。
当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度
“其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构 成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户 的请求重新导向离用户最近的服务节点上。” – 百度百科。
不足之处:实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温,这一缺陷将得到改进,使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持 同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器,或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。
6.将CSS和js放到外部文件中引用,CSS放头部,js放尾
将CSS放在顶部 能加快页面内容显示,并且能避免页面产生白屏
js放在底部
js会阻塞对其后面内容的呈现
JS会阻塞对其后面内容的下载
易维护、易扩展,方便管理和重复利用。
正确理解: JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面。这个也就是JavaScript的阻塞特性。
因为这个阻塞的特点,建议把JavaScript代码放到</body>标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。
7.精简CSS和JS文件(减少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

8.压缩图片和使用图片Sprite技术
其实压缩图片和图片精灵是两个方面的技术
现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有:
1.缩小图片分辨率;
2.改变图片格式;
3.降低图片保存质量。
关于图片精灵(Sprite)技术就和我们工作直接相关,不管是在CSS中的图片还是在HTML结构中的图片都会产生 HTTP请求,前端优化的第一条就是减少请求数,最直接有效的方法是使用图片精灵(CSS Sprite)。图片精灵就是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小,
注意控制Cookie大小技术
Cookie是有生命周期的,所以请注意设置合理的过期时间,合理地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

9.添加http Expires头
为图片视频之类很少改变的资源设置长的Expires时间将直接减少http请求
如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求

10.压缩组件
在Server端对Response资源进行压缩再传给浏览器,一般使用GZIP

11.确保Ajax请求遵守性能,必要时候应具备长久的expires头
12.书写html的时候做到结构语义化。
结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下 head,head中其实包括了一些对于我们seo很有用的一些东西,比如title,Description,Keywords,这些东西在蜘蛛抓取的 时候都是有帮助的,当然,还有其他的一些,我在此就不一一说明了,比如设置缓存等一些其他的信息。
那么body中的话,包括的标签就很多了,我觉得作为一个合格的前端开发人员你应该去熟悉他们,比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理,还有就是注意h标签的断层,及h1标签的使用,这些都是非常重要的。
同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。能够注意结构与表现、行为的分离。
标签语义化的好处:
1.有利于搜索引擎;
2.结构清晰的HTML在团队合作中的作用
3.有利于盲人屏幕阅读器

总体总结:
1、我们做还原的页面能够通过http://validator.w3.org的验证,当然css希望也能通过http://jigsaw.w3.org/css-validator/validator难证,不过有时候由于需要兼容多浏览器,会受到hack的影响,css不做强制要求。
2、作前端的我觉得应该知道yslow。如果不知道可以看看我以前写的文章,你觉得你的静态页面应该能够通过yslow2.0的classic(V1)级别的检测,检测的结果我觉得应该得到A。
3、你的背景图片保证不超过3个以上,你的css文件不超过2个,js文件不超过3个。而且良好的遵守web标准的一些规定,css放到head中,js文件放到</body>之前或者之后。
4、当然就是希望你能够对你的页面进行裸体检查。其实就是来检验你的结构语义化是否有效果。
裸体检查:就是将你的css和js都去掉,查看你的html,看这些内容你是否能够看懂。
5、检测你的h标签是否断层。(PS:就是按照h1,h2,h3,h4….,不要中间漏掉h2)
6、建议body中增加text-align:center。
7、当然还有很多,比如什么id,class的命名呀,这些东西,我觉得应该是你的团队中应该做的事情。(PS:这里得去好好看看clsaa选择器的权重和优先级)
8、作为大型网站来说,首页使用内联式样式表,这样可以减少http请求数的同时,也可以防止裸奔。当然其他页面需要使用外联样式表,这样才可以方便维护。因为作为大型网站来说,他的首页访问量是非常的大的,所以:
把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式(Expression)
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。
对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。

                ** Coockie:**
                         减小Cookie体积
                         对于页面内容使用无coockie域名

                 **图片:**
                         优化图像
                         优化CSS Spirite
                         不要在HTML中缩放图像
                         favicon.ico要小而且可缓存

               ** 移动应用:**
                         保持单个内容小于25K
                        打包组件成复合文本
atom的前端开发插件
chrome 插件 前端开发
前端开发火狐插件
» 本文来自:前端开发者 » 《Web前端性能优化》
» 本文链接地址:https://www.rokub.com/6355.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!