前端开发web性能优化 Web前端性能优化的实用技巧汇总

我爱编程网小编给大家带来了前端开发web性能优化 Web前端性能优化的实用技巧汇总相关文章，一起来看一下吧。

如何进行web前端性能优化？

提起Web前端性能优化的问题，前端开发人员非常熟悉，对于一个网站而言，即使内容和功能再优秀，如果用户需要花费很久的时间才能打开，这样迟早会消耗用户的耐心，并最终失去用户。

那如何才能优化前端性能？归纳为三步

一、关键资源字节数

字节数也就是通常说的减少资源文件（js、css、image、video...）的大小。

1、压缩

前端使用uglify混淆压缩

后端开启gzip

对图片进行压缩，使用压缩比例更高的格式（WebP）

2、缓存

强缓存（http状态码：200），不用请求服务器直接使用本地缓存，协商缓存（http状态码：304），使用时先请求服务器若被告知缓存没过期则使用本地缓存，不用下载资源，使用localstorage对数据进行存储。 我爱编程网

3、针对首屏优化

对非关键资源延迟加载、异步加载，减少首屏资源大小

二、关键资源连接数

1、合并请求

使用http2.0的多路复用合并请求配置combo，在无法使用http2.0的情况下作为一种合并资源请求的手段。

2、减少图片请求数

使用spite图，使用svg-symbol。

3、针对一些场景采用css、js内联的方式。

4、使用强缓存减少了一次服务器请求。

5、非关键资源延迟、异步加载，减少了首屏资源连接数。

三、关键渲染路径

1、bigpipe分块输出

这里主要是因为要完成一整个页面的输出后端需要处理很多个任务，我们可以将这些多个任务进行分块，谁先完成谁就先输出，最终通过JS回填的方式输出DOM节点，这种方式主要解决了直出页面阻塞的问题。

2、bigrender分块渲染

常规的手段就是采用前端模板渲染页面，针对首屏时间主要减少了首次构建DOM树时的节点数

3、针对reflow，repaint，composit路径处理。

4、涉及到动画时关于layer的概念renderlayer、graphicslayer。

5、css放在头部、js放底部避免阻塞DOM树的构建，关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。核心：css资源不会阻塞DOM树的构建但会阻塞DOM的渲染，JS会阻塞DOM树的构建，CSS会阻塞JS的执行。

如何进行网站性能优化

一、前端优化

网站性能优化是一个很综合的话题，涉及到服务器的配置和网站前后端程序等各个方面，我只是从实际经历出发，分享一下自己所尝试过的网站性能优化方法。之所以在标题上挂一个web2.0，是因为本文更偏重于中小网站的性能优化，我所使用的系统也是典型web2.0的LAMP架构。

首先讲讲前端的优化，用户访问网页的等待时间，有80%是发生在浏览器前端，特别是页面和页面中各种元素（图片、CSS、Javascript、flash）的下载之上。因此在很多情况下，相对于把大量的时间花在艰苦而繁杂的程序改进上，前端的优化往往能起到事半功倍的作用。雅虎最近将内部使用的性能测试工具yslow向第三方公开，并发布了著名的网站性能优化的十三条规则，建议你下载并安装yslow，并作为测评网站优化效果的工具。下面我挑其中特别有价值的具体说明一下优化的方法：

对于第一次访问您网站，尚未在浏览器cache中缓存您网站内容的用户，我们可以做的事情包括：

1）减少一个页面访问所产生的的头部header中，JS文件引用尽量放在页面底端标签的后面，主要的思路是让核心的页面内容尽早显示出来。不过要注意，一些大量使用js的页面，可能有一些js文件放在底端会引起一些难以预料的问题，根据实际情况适当运用即可。

4）使JS文件内容最小化

具体来说就是使用一些javascript压缩工具对js脚本进行压缩，去除其中的空白字符、注释，最小化变量名等。在使用gzip压缩的基础上，对js内容的压缩能够将性能再提高5%。

5）尽量减少外部脚本的使用，减少DNS查询时间

不要在网页中引用太多的外部脚本，首先，一次dns的解析过程会消耗20-120毫秒的时间；其次，如果在页面中引用太多的外部文件（如各种广告、联盟等代码），可能会因为外部文件的响应速度而将你的网站拖得很慢。如果不得不用，那么就尽量将这些脚本放在页脚吧。不过有一点需要提及，就是浏览器一般只能并行处理同一域名下的两个请求，而对于不同子的域名则不受此限制，因此适当将本站静态内容（css,js）放在其他的子域名下（如static.xxx.com）会有利于提高浏览器并行下载网页内容的能力。

对于您网站的经常性访问用户，主要的优化思路就是最大限度利用用户浏览器的cache来减少服务器的开销。

1）在header中添加过期时间(ExpiresHeader)

在header中给静态内容添加一个较长的过期时间，这样可以使用户今后访问只读取缓存中的文件，而不会与服务器产生任何的交互。不过这样做也存在一些问题，当图片、CSS和js文件更新时，用户如果不刷新浏览器，就无法获得此更新。这样，我们在对图片、css和js文件修改时，必须要进行重命名，才能保证用户访问到最新的内容。这可能会给开发造成不小的麻烦，因为这些文件可能被站点中的许多文件所引用。flickr提出的解决办法是通过urlrewrite使不同版本号的URL事实上指向同一个文件，这是一个聪明的办法，因为url级别的操作效率是很高的，可以给开发过程提供不少便利。

要理解为什么这样做，必须要了解浏览器访问url时的工作机制：

a.第一次访问url时，用户从服务器段获取页面内容，并把相关的文件（images,css,js）放在高速缓存中，也会把文件头中的expiredtime,lastmodified,ETags等相关信息也一同保留下来。

b.用户重复访问url时，浏览器首先看高速缓存中是否有本站同名的文件，如果有，则检查文件的过期时间；如果尚未过期，则直接从缓存中读取文件，不再访问服务器。

c.如果缓存中文件的过期时间不存在或已超出，则浏览器会访问服务器获取文件的头信息，检查lastmodifed和ETags等信息，如果发现本地缓存中的文件在上次访问后没被修改，则使用本地缓存中的文件；如果修改过，则从服务器上获取最新版本。

我的经验，如果可能，尽量遵循此原则给静态文件添加过期时间，这样可以大幅度减少用户对服务器资源的重复访问。

2）将css和js文件放在独立外部文件中引用

将css和js文件放在独立文件中，这样它们会被单独缓存起来，在访问其他页面时可以从浏览器的高速缓存中直接读取。一些网站的首页可能是例外的，这些首页的自身浏览可能并不大，但却是用户访问网站的第一印象以及导向到其他页面的起点，也可能这些页面本身使用了大量的ajax局部刷新及技术，这时可以将css和js文件直接写在页面中。

3）去掉重复的脚本

在IE中，包含重复的js脚本会导致浏览器的缓存不被使用，仔细检查一下你的程序，去掉重复引用的脚本应该不是一件很难的事情。

4）避免重定向的发生

除了在header中人为的重定向之外，网页重定向常在不经意间发生，被重定向的内容将不会使用浏览器的缓存。比如用户在访问，服务器会通过301转向到/，在后面加了一个“/”。如果服务器的配置不好，这也会给服务器带来额外的负担。通过配置apache的alias或使用mod_rewrite模块等方法，可以避免不必要的重定向。

还有一些，比如使用CDN分发机制、避免CSS表达式等、避免使用ETags等，因为不太常用，这里就不再赘述了。

做完了上述的优化，可以试着用yslow测试一下网页的性能评分，一般都可以达到70分以上了。

当然，除了浏览器前端和静态内容的优化之外，还有针对程序脚本、服务器、数据库、负载的优化，这些更深层次的优化方法对技术有更高的要求。本文的后半部分将重点探讨后端的优化。

二、后端优化

上次写完web2.0网站前端优化篇之后，一直想写写后端优化的方法，今天终于有时间将思路整理了出来。

前端优化可以避免我们造成无谓的服务器和带宽资源浪费，但随着网站访问量的增加，仅靠前端优化已经不能解决所有问题了，后端软件处理并行请求的能力、程序运行的效率、硬件性能以及系统的可扩展性，将成为影响网站性能和稳定的关键瓶颈所在。优化系统和程序的性能可以从以下的方面来入手：

1）apache、mysql等软件的配置的优化

尽管apache和mysql等软件在安装后使用的默认设置足以使你的网站运行起来，但是通过调整mysql和apache的一些系统参数，还是可以追求更高的效率和稳定性。这个领域中有很多专业的文章和论坛（比如：），要想掌握也需要进行深入的研究和实践，这里就不重点讨论了。

2）应用程序环境加速

这里仅以我最常应用的php开发环境为例，有一些工具软件可以通过优化PHP运行环境来达到提速的目的，其基本原理大致是将PHP代码预编译并缓存起来，而不需要改变任何代码，所以比较简单，可以将php的运行效率提升50%以上。比较常用的php加速工具有：APC(-info.php?package=APC)、TurckMMCache（）、phpaccelebrator()，还有收费的ZendPerformanceSuite

3）将静态内容和动态内容分开处理

apache是一个功能完善但比较庞大的webserver，它的资源占用基本上和同时运行的进程数呈正比，对服务器内存的消耗比较大，处理并行任务的效率也一般。在一些情况下，我们可以用比较轻量级的webserver来host静态的图片、样式表和javascript文件，这样可以大大提升静态文件的处理速度，还可以减少对内存占用。我使用的webserver是来自俄罗斯的nginx，其他选择方案还包括lighttpd和thttpd等。

4）基于反向代理的前端访问负载均衡

当一台前端服务器不足以应付用户访问时，通过前端机实现web访问的负载均衡是最快速可行的方案。通过apache的mod_proxy可以实现基于反向代理的负载均衡，这里推荐使用nginx做代理服务器，处理速度较apache更快一些。

5）应用缓存技术提高数据库效能，文件缓存和分布式缓存

数据库访问处理并发访问的能力是很多网站应用的关键瓶颈，在想到使用主从结构和多farm的方式构建服务器集群之前，首先应该确保充分使用了数据库查询的缓存。一些数据库类型（如mysql的innoDB）自身内置对缓存的支持，此外，还可以利用程序方法将常用的查询通过文件或内存缓存起来。比如通过php中的ob_start和文件读写函数可以很方便的实现文件形式的缓存，而如果你拥有多台服务器，可以通过memcache技术通过分布式共享内存来对数据库查询进行缓存，不仅效率高而且扩展性好，memcache技术在livejournal和Craigslist.org等知名网站应用中都得到了检验。

6）服务器运行状态的检测，找到影响性能的瓶颈所在

系统优化没有一劳永逸的方法，需要通过检测服务器的运行状态来及时发现影响性能的瓶颈，以及可能存在的潜在问题，因为网站的性能，永远取决于木桶中的短板。可以编写一些脚本来检测web服务的运行，也有一些开源的软件也提供了很好的功能

7）良好的扩展架构是稳定和性能的基础

一些技巧和窍门可以帮你度过眼前的难关，但要想使网站具备应付大规模访问的能力，则需要从系统架构上进行彻底的规划，好在很多前人无私的把他们架构

网站的经验分享给我们，使我们可以少走甚多弯路。我最近读到的两篇有启发的文章：

-从LiveJournal后台发展看大规模网站性能优化方法

-Myspace的六次重构

最后不得不提到程序编码和数据库结构对性能的影响，一系列糟糕的循环语句，一个不合理的查询语句、一张设计不佳的数据表或索引表，都足以会使应用程序运行的速度成倍的降低。培养全局思考的能力，养成良好的编程习惯，并对数据库运行机制有所了解，是提高编程质量的基础。

Web前端性能优化的实用技巧汇总

今天小编要跟大家分享的文章是关于Web前端性能优化的实用技巧汇总。javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。





一.提高加载性能


1.IE8,FF,3.5,Safari4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。


2.减少页面外链脚本文件的数量将会提高页面性能：


http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。


3.动态脚本加载技术：


无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。


functionlaodScript(url,callback){


varscript=document.createElement('script');_


_cript.type='text/javascript';



__f(script.readyState){//ie


____cript.onreadystatechange=function(){_____


if(script.readyState=='loaded'||script.readyState=='complete'){_______


_cript.onreadystatechange=null;_______


callback()_____


____


__


}else{//其他浏览器___


script.onload=function(){_____


_allback()


___}_


}_


script.src=url;_


document.getElementsByTagName('head')[0].appendChild(script);


}
//使用


loadScript('./a.js',function(){_


loadScript('./b.js',function(){___


loadScript('./c.js',function(){_____


console.log('加载完成')___


})_


})


})


4.无阻塞加载类库——LABjs,使用方法如下：





//链式调用时文件逐个下载，.wait()用来指定文件下载并执行完毕后所调用的函数


$LAB.script('./a.js')_


.script('./b.js')_


.wait(function(){__


_pp.init();


})
//为了保证执行顺序，可以这么做,此时a必定在b前执行


$LAB.script('./a.js').wait()_


.script('./b.js')_


.wait(function(){___


_pp.init();


})


二.数据存取与JS性能


1.在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特点。


2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢


3.由于局部变量存在于作用域链的起始位置，因此访问局部变量的比访问跨域作用变量更快


4.嵌套的对象成员会明显影响性能，应尽量避免


5.属性和方法在原型链位置越深，访问他的速度越慢


6.通常我们可以把需要多次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能


三.DOM编程


1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。


注：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement()


2.HTML集合优化


HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。


①_优化一——集合转数组collToArr


functioncollToArr(coll){_


for(vari=0,a=[],len=coll.length;i

a._ush(coll[i]);


__


returna


}


②缓存集合length


③访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）


3.遍历DOM


①使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}






属性名




被替代属性






children




childNodes






childElementCount




childNodes.length






firstElementChild




firstChild






lastElementChild




lastChild






nextElementSibling




nextSibling






previousElementSibling




previousSibling






_谘≡衿_PI——querySelectorAll()


querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。


let_rr=_ocument.querySelectorAll('div.warning,_iv.notice>_')


4.重绘和重排


浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构——_OM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.


①重排发生的条件：


添加或删除可见的DOM元素位置变化元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸变化出现滚动条时会触发整个页面的重排_嘏疟囟ㄖ鼗


5.渲染树变化的排列和刷新


大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。


offsetTop,offsetWidth...


scrollTop,scrollHeight...


clientTop,clientHeight...


getComputedStyle()


一些优化建议：将设置样式的操作和获取样式的操作分开：


//设置样式


body.style.color='red';


body.style.fontSize='24px'


//读取样式


letcolor=body.style.color


let_ontSize=_ody.style.fontSize


另外，获取计算属性的兼容写法：


functiongetComputedStyle(el){_


varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'');_


returncomputed


}


6.最小化重绘和重排


①.批量改变样式


/*使用cssText
*/el.style.cssText='border-left:1px;_order-right:2px;_adding:20px';


②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档


functionappendDataToEl(option){


vartargetEl=option.target||document.body,___


createEl,___


data=option.data||[];_//让容器脱离文档流，减少重绘重排_


vartargetEl_display=targetEl.style.display;_


targetEl.style.display='none';
_


//*****创建文档片段来优化Dom操作****_


varfragment=document.createDocumentFragment();_//给元素填充数据_


for(vari=0,max=data.length;i

createEl=
document.createElement(option.createEl);___


for(varitemindata[i]){_____


if(item.toString()==='text'){_______


createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________


_f(item.toString()==='html'){_______


createEl.innerHTML=item,data[i][item];_______


continue;_____


}_____


_reateEl.setAttribute(item,data[i][item]);_______


//****将填充好的node插入文档片段****___


fragment.appendChild(createEl);___


//****将文档片段统一插入目标容器****_


targetEl.appendChild(fragment);_


//显示容器，完成数据填充_


targetEl.style.display=
targetEl_display;


}
//使用


varwrap=document.querySelectorAll('.wrap')[0];


vardata=[_


_name:'xujaing',text:'选景',title:'xuanfij'},_


{name:'xujaing',text:'选景',title:'xuanfij'},_


{name:'xujaing',text:'选景',title:'xuanfij'}];


appendDataToEl({_


target:wrap,_


createEl:'div',


_ata:data


});


上面的优化方法使用了文档片段:_蔽颐前盐牡灯尾迦氲浇诘阒惺保导噬媳惶砑拥闹皇歉闷蔚淖咏诘悖皇瞧伪旧怼？梢允沟_om操作更有效率。


②.缓存布局信息


//缓存布局信息


letcurrent=el.offsetLeft;


current++;


el.style.left=current+'px';


if(current>300){_


stop();


}


④.慎用:hover


如果有大量元素使用:hover,那么会降低相应速度，CPU升高


⑤.使用事件委托（通过事件冒泡实现）来减少事件处理器的数量，减少内存和处理时间


functiondelegation(e,selector,callback){_


e=e||window.event;_


vartarget=e.target||e.srcElement;
_if(target.nodeName!==selector||
target.className!==selector||target.id!==selector){___


return;


_}_


if(typeofe.preventDefault==='function'){__


_.preventDefault();___


e.stopPropagation();


}else{___


e.returnValue=false;


e.cancelBubble=true;_


}
__allback()}


四.算法和流程控制


1.循环中减少属性查找并反转(可以提升50%-60%的性能)


//for循环


for(vari=item.length;i--){_


process(item[i]);


}


//while循环


varj=item.length;


while(j--){_


process(item[i]);


}


2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）


3.基于函数的迭代（比基于循环的迭代慢）


items.forEach(function(value,index,array){__rocess(value);})


4.通常情况下switch总比if-else快，但是不是最佳方案


五.字符串和正则表达式


1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。2.使用[\s\S]来匹配任意字符串3.去除尾部空白的常用做法：


if(!String.prototype.trim){_


String.prototype.trim=function(){___


returnthis.replace(/^\s+/,'').replace(/\s\s*$/,'')_


}


}


六.快速响应的用户界面


1.浏览器的UI线程：用于执行javascript和更新用户界面的进程。


2.在windows系统中定时器分辨率为15毫秒，因此设置小于15毫秒将会使IE锁定，延时的最小值建议为25ms.


3.用延时数组分割耗时任务：


functionmultistep(steps,args,callback){_


vartasks=steps.concat();
__etTimeout(function(){___


vartask=tasks.shift();___


task.apply(null,args||[]);_//调用Apply参数必须是数组
___


if(tasks.length>0){_____


setTimeout(arguments.callee,25);


___else{_____


_allback();___


__


},25);


}


4.记录代码运行时间批处理任务：


functiontimeProcessArray(items,process,callback){_


vartodo=item.concat();



__etTimeout(function(){___


varstart=+newDate();
__o{_____


_rocess(todo.shift());___


}while(todo.length>0&&(+newDate()-start<50));
____f(todo.length>0){_____


_etTimeout(arguments.callee,25);


___else{____


_allback(items);_


}_


_,25)


}


5.使用WebWorker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成：


①一个navigator对象，包括app

以上就是我爱编程网小编给大家带来的前端开发web性能优化 Web前端性能优化的实用技巧汇总，希望能对大家有所帮助。