前端优化
前端优化理解
影响用户访问的最大部分是前端的页面。
网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。
前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容,页面的内容:文字,图片,flash,视频等。
而前端开发工作者可以控制的是什么呢?那就是xhtml,css,js的代码及相应的修饰(背景)图片。
一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。
标签语义化的好处:1.有利于搜索引擎;2.结构清晰的HTML在团队合作中的作用3.有利于盲人屏幕阅读器。
二、css,js文件数量及大小的优化
那么关于css、js的优化的话,一般情况下建议css和js采用外联式。你一定要把你的css规划好,尽量的采用缩写,减少重复性代码,代码重复利用,这样可以减少css文件的大小,那么对css做相应的规划也可以减少css的个数,减少http请求数,js同理。
三、背景图片数量及大小的优化
背景合并起来,这样即可减少http请求数,同时,我们在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小,这里建议使用PNG8格式的图片结合css sprite,同样
四、内容图片的大小的优化
把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式(Expression)
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。
对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片:
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
移动应用:
保持单个内容小于25K
打包组件成复合文本
2.前端性能优化14个黄金法则
只有10%-20%的最终用户响应时间花在接受请求的HTML文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上。
规则01:尽量减少HTTP请求
通过使用图片地图,CSS Sprites(有利有弊),内联图片(data:URL模式,IE不支持,不能被缓存),合并脚本和样式表。
所以,我们要减少HTTP请求是要平衡性能和设计的。
① 图片地图
初看“图片地图”四个字,对非专业的前端人员来说一头雾水,我的第一印象就是这样的,咱们以京东的移动站点为例,右侧用户和购物车的图标,正常实现我会选择如下方式:
<a href=”用户跳转页面URL”>
<div class=”定义用户icon显示的样式表”></div>
</a>
<a href=”购物车跳转页面URL”>
<div class=” 定义用户icon显示的样式表”></div>
</a>
这种方式无可厚非的,但是两张图片就有两个HTTP请求,这明显是增加了页面中的HTTP请求。那么我们可以把这两个HTTP请求变成一个吗?
答案当然是可以的,这就是图片地图:允许在一张图片上关联多个URL,而目标URL的选择取决于用户单击了图片上的哪个位置。
这样上面京东两个图标合并成一张图片,这样图片的HTTP请求就减少了一个。
示例代码如下:
<img src=合并后的图片>
<map name=”map1”>
<areashape=”rect” coords=”0,0,40,40” href=”用户跳转页面URL”>
<areashape=”rect” coords=”50,0,90,40” href=”购物车跳转页面URL”>
</map>
不过图片地图只支持矩形形状,其他形状不支持。
② 请CSS喝“雪碧”(CSS Sprites)CSS Sprites一句话:将多个图片合并到一张单独的图片,这样就大大减少了页面中图片的HTTP请求。
③ 内联图片和脚本使用data:URL(Base64编码)模式直接将图片包含在Web页面中而无需进行HTTP请求。但是此种方法存在明显缺陷:- 不受IE的欢迎;- 图片太大不宜采用这种方式,因为Base64编码之后会增加图片大小,这样页面整体的下载量会变大;- 内联图片在页面跳转的时候不会被缓存。(大图片可以使用浏览器的本地缓存,在首次访问的时候保存到浏览器缓存中,典型的是HTML5的manifest缓存机制以及LocalStorage等)。
④ 样式表的合并将页面样式定义、脚本、页面本身代码严格区分开,但是样式表、脚本也不是分割越细越好,因为每多引用一个样式表就增加一次HTPP请求,能合并的样式表尽量合并。一个网站有一个公用样式表定义,每个页面只要有一个样式表就OK啦。
所以减少页面HTTP请求数量,是一个很重要的原则。
规则02:使用内容发布网络(CDN的使用)
什么叫内容发布网络(CDN)?它是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。主要用于发布页面静态资源:图片、css文件、js文件等。如此,能轻易地提高响应速度。
如果应用程序web服务器离用户更近,则一个HTTP请求的响应时间将缩短 ;
如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。
内容发布网络(CDN)是一组分布在多个不同地理位置的web服务器,用于更加有效地向用户发布内容
规则03:添加Expires头
浏览器使用缓存来减少HTTP请求的数据,并减小HTTP响应的大小,使页面加载更快。Web服务器使用Expires头来告诉浏览器它可以使用一个组件的当前副本,直到指定的deadline为止。HTTP规范中称此头为:在这一时间之后响应被认为失效。
web服务器使用Expires头告诉web客户端他可以使用一个组件的当前副本,直到指定的时间为止。要求服务器与客户端的时钟严格同步,并且要在时间过期后在服务器配置中提供一个新的日期。
Max-Age和mod_expires可以弥补Expires的不足。
个人对这块表示不想使用,其实就是一句话,把一些css、js、图片在首次访问的时候全部缓存到浏览器本地,从我做移动网站的过程中发现,其实没有这么复杂,完全可以使用HTML5提供的本地缓存机制就OK了。
规则04:压缩组件(使用Gzip方式)
书中关于压缩从gzip压缩方式到如何压缩讲了很多,我想直接跳过,对于做PC网站或者移动网站来说,急需要压缩的是css文件和js文件,至于如何压缩,网上有很多在线工具,去挑选一个自己用的顺手看的顺眼的就好,当然也有人选择对HTML进行压缩,这样也可以。
规则05:将CSS样式表放在顶部
如果将css样式定义放在页面中或者页面底部,会出现短暂白屏或者某一区域短暂白板的情况,这和浏览器的运营机制有关的,不管页面如何加载,页面都是逐步呈现的。所以在每做一个页面的时候,用Link标签把每一个样式表定义放在head中。
逐步呈现,避免白屏
规则06:将javascript脚本放在底部
浏览器在加载css文件时,页面逐步呈现会被阻止,直到所有css文件加载完毕,所以要把css文件的引用放到head中去,这样在加载css文件时不会组织页面的呈现。但是对于js文件,在使用的时候,它下面所有也页面内容的呈现都会被阻塞,将脚本放在页面越靠下的地方,就意味着越多的内容能够逐步呈现。
HTTP1.1规范建议浏览器从每个主机名并行下载两个组件,在下载脚本时,并行下载实际上是被禁用的。
原因之一是脚本有可能使用document.write来修改页面内容,因此浏览器会等待,以确保页面能够恰当地布局;
原因之二是为了保证脚本能够按照正确的顺序执行,如果并行下载多个脚本,就无法保证响应是按照特定顺序到达浏览器。
将脚本放在顶部将会阻塞对其后面内容的呈现,并且会阻塞对其后面组件的下载。
规则07:避免使用CSS表达式
CSS表达式是动态玩CSS的一种很强大的方式,但是强大的同时也存在很高的危险性。因为css表达式的频繁求值会导致css表达式性能低下。如果真想玩css表达式,可以选用只求值一次的表达式或者使用事件处理来改变css的值。
表达式expression方法被其他浏览器忽略,但是对于IE来说是一个有用的工具。能够在IE中设置属性,创建跨浏览器的一致体验。例如,IE[IE6,IE7(Quirk),IE8(Quirk]不支持min-width属性,用表达式的方法可以解决这一问题:
代码如下:
width: expression(document.body.clientwidth<600?"600px": "auto");
min-width: 600px;
表达式的问题在于对其进行的求值的频率比人们期望的要高。他们不仅在页面呈现和大小改变时求值,当页面滚动甚至用户鼠标在页面上移过时都要求值。我们可以向CSS表达式中添加一个计数器来进行跟踪。
表达式计数器的实例:
http://stevesouders.com/hpws/expression-counter.php
代码如下:
P {
width: expression(setCntr(),document.body.clientwidth<600?"600px": "auto");
min-width: 600px;
}
取代表达式的方法:事件处理器(Event Handlers)
通过在onresize事件中设置样式的width属性来修正min-width问题。
事件处理器的实例:
http://stevesouders.com/hpws/event-handler.php
当浏览器的大小改变时,这个例子使用setMinWidth()函数来修改所有段落元素的大小——
代码如下:
function setMinWidth(){
setCntr(); //用于显示求值次数
var aElements = document.getElementsByTagName("p");
for(var i=0;i<aElements.length;i++){
aElements.runtimeStyle.width=(document.body.clientwidth<600?"600px": "auto");
}
}
if(1!=navigator.userAgent.indexOf("MSIE")){
window.onresize=setMinWidth;
}
这会在浏览器改变大小时中动态设置宽度,但是第一次呈现时这并不能恰当地设置段落大小,因此,页面还需要使用“一次性表达式”,通过表达式设置初始宽度。
规则08:使用外部javascript和CSS
内联js和css其实比外部文件有更快的响应速度,那为什么还要用外部呢?因为使用外部的js和css可以让浏览器缓存他们,这样不仅HTML文档大小减少,而且不会增加HTTP请求数量。另外,使用外部js和css可以提高组件的可复用性。
规则09:减少DNS查询
DNS查询有时间开销,通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS:缓存DNS查询可以很好地提高网页性能,一旦缓存了DNS查询,之后对于相同主机名的请求就无需进行再次的DNS查找,至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时,不要使用过多不同的主机名。
规则10:精简javascript
如何精简?
最初始的精简方式:就是移除不必要的字符减小js文件大小,改善加载时间。包括所有的注释、不必要的空白字符。
高级一点的精简方式就是:混淆。
它不但会移除不必要的字符,还会改写代码,比如函数和变量的名字会被改成很短的字符串,这样使js代码更简练更难阅读。
规则11:避免重定向
重定向的英文是Redirect,用于将用户从一个URL重新跳转到另一个URL。
最常见的Redirect就是301和302两种。
范围在3xx的状态码,这表示用户代理必须执行进一步操作才能完成请求。
重定向影响的是HTML文档的下载
在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是,设置URL的时候,最后的“/”,有些人有时候会忽略,其实你少了“/”,这时候的URL就被重定向了,所以在给页面链接加URL的时候切记最后的“/”不可丢。
规则12:删除重复脚本
重复的js代码除了有不必要的HTTP请求之外,还会浪费执行js的时间。
将你使用的js代码模块化,可以很好地避免这个问题,至于js模块化如何实现,现在有很多可以使用的开源框架,我用的比较多的是我们公司玉伯的Sea.js。
规则13:配置ETag
Etag(Entity Tag),实体标签,是Web服务器和浏览器用户确认缓存组件的有效性的一种机制。写的很复杂,对我这种非专业的前端开发人员来说,有点过了,关于这个原则有兴趣的自己看吧。
规则14:使Ajax可缓存
针对页面中主动的Ajax请求返回的数据要缓存到本地,当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话,可以增加一个修改标识的判断,我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断,每次请求会判断当前MD5是否变化,如果变化了取最新的数据,如果不变化,则不变。
时间总结下来,就是:尽量减少页面大小,尽量降低页面响应时间。在页面性能和交互设计之中找平衡点。
3.移动端优化
1)为什么要最移动页面进行优化?
移动网络的现状:
移动页面布局越来越复杂,效果越来越炫,直接导致了文件越来越大,下载和运行速度越来越低,而速度低会造成不良影响,据统计:
71%的用户期望移动页面跟pc页面一样快,74%的用户能容忍的响应时间为5秒,所以我们必须保证移动端页面有足够的速度。
移动页面的速度跟三个因素有关,
移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身。
网络制式供应商,手机制造商,浏览器产商如此给力,我们呢?
我们能做得是对移动端页面本身优化
2)该怎么做移动端页面优化呢?
pc常用的优化手段:
代码优化(css、html、js优化)
减少HTTP请求(雪碧图,文件合并…)
减少DOM节点
无阻塞(内联CSS,JS置后…)
缓存
首先我们得关注一下一个页面从开始到呈现完毕需要经历什么阶段,主要有四个阶段:
每个阶段的主要工作如上图所示,而我们的优化目标是:
下面我们来针对上面的几个阶段细说一下都有哪些优化手段。
首先,来看看加载中有哪些优化手段:
1. 预加载
预加载方式有两种:
A.显性加载
类似这种用户能明显感知的,我把它称为“显性加载”,互动页面都建议加上这种加载方式,它一方面能增加页面的趣味性,另一方面能让后续页面体验更流畅。
B.隐性加载
这种在加载第一张图片的时候已经预先加载了第二张图片,从而使得页面体验更流畅的方式,我把它称为隐性加载,这种方式的好处是节省流量之余又能使得体验增强。
2. 按需加载
按需加载是不可或缺的优化手段,主要有以下两种方式:
对于这种方式,在首屏加载的时候把首屏的内容加载尽量,而位于首屏之外的元素都只在出现在首屏时才加载,很大程度地节省了流量,提升了首次加载时间。
这种叫响应式加载方式,意思是利用js或者css判断分辨率,从而选择不同尺寸的图片进行引入,这种的好处显而易见,同样可以加快加载速度和节省流量。
3.压缩图片
对于压缩图片,首先要提的是jpg文件:
对于移动端的Jpg文件,有这样的结论:
a.使用大尺寸大有损压缩比的jpg
b.使用jpegtran进行无损压缩
而对于png有以下结论:
a.多彩图片使用png24
b.低彩图片使用png8
c.推荐使用pngquant
4.尽量避免重定向
为什么要尽量避免重定向呢?因为如图:
这是一个同一网速下的测试结果,重定向之所以会比较慢,是因为它重复了域名查找,tcp链接,发送请求。
5. 使用其他方式代替图片
有两种方式,第一种是:依靠css3绘制图片
第二种:使用iconfont代替图片
但iconfont不一定比图片好
对于大图片,iconfont并不比雪碧图好,建议单侧小尺寸图标才使用iconfont.
然后,针对脚本执行中有哪些优化手段,这里只提两点:
1.尽量避免DataURI
DataURI在移动端并不如它在pc端吃香
经测试,DataURI要比简单的外链资源慢6倍,生成的代码文件相对图片文件体积没有减少反而增大,而且浏览器在对这种base64解码过程中需要消耗内存和cpu,这个在移动端坏处特别明显。
2.点击事件优化
在移动端请适当使用touchstart,touchend,touch等事件代替延迟比较大的click事件。Click之所以慢是因为mousedown导致的:
然后,针对渲染阶段中有哪些优化手段,这里也只提两点:
1. 动画优化
a) 尽量使用css3动画
优点:
不占用js主线程
可利用硬件加速
浏览器可对动画做优化
缺点:
不支持中间状态监
b) 适当使用canvas动画
优点:
可规避渲染树的计算渲染更快
缺点:
开发成本高
维护较麻烦
通过对css3动画和canvas动画对比
得到结论:5个元素以内使用css3动画,5个以上使用canvas动画。
c) 合理使用RAF(requestAnimationFrame)
优点:
能解决脚本问题引起的丢帧,卡顿问题
支持中间状态监听
缺点:
兼容问题
通过RAF动画与settimeout动画对比:
得到结论:不需要兼容android 4.3浏览器的情况下,请使用RAF制作脚本动画
2. 高频事件优化
类似touchmove,scroll这类的事件可导致多次渲染,对于这种事件可以通过以下手段进行优化:
a.使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染
b.增加响应变化的时间间隔,减少重绘次数。
最后,针对合成/绘制只提一个优化手段:
GPU加速
触发GPU加速的方式有:
CSS3 transitions
CSS3 3D transforms
WebGL 3D 绘制
Video
...
GPU加速实际上是大幅减少了合成/绘制时间,从而大大地提高了页面速度,但GPU加速有自己的缺点:
过多的GPU层会带来性能开销,主要原因是使用GPU加速其实是利用了GPU层的缓存,让渲染资源可以重复使用,所以一旦层多了,缓存增大,就会引起别的性能问题。
总结
按需加载提升速度,但可能导致大量重绘;
Touch响应快,但很多场景不适合;
GPU加速效率高,但内存开销大等等
Loading会让整体体验流畅,但容易造成用户流失
图片压缩让带宽成本降低,但可能会导致视觉效果变差
类似这样的矛盾点还有很多,请结合业务按照实际情况进行优化。