网站性能优化的方法有哪些（如何进行网站性能优化?）

本文目录一览：

• 1、Web前端性能优化的实用技巧汇总
• 2、如何提高网站并发访问性能

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则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。

注团御：如过在一个对性能要求比较高的操作中更新一段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;}

tdp{text-align:left;}

tdpspan{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(current300){_

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.length0){_____

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.length0(+newDate()-start____f(todo.length0){_____

_etTimeout(arguments.callee,25);

___else{____

_allback(items);_

}_

_,25)

}

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

①一个navigator对象，包括app

如何提高网站并发访问性能

1、HTML静态化

其实大家都知道，效率最高、消耗最小的就是纯静态化的html页面，所以我们尽可能使我们的网站上的页面采用静态页面来实现，这个最简单的方法

其实也是最有效的方法。但是对于大量内容并且频繁更新的网站，我们无法全部手动去挨个实现，于是出现了我们常见的信息发布系统CMS，像我们常访问的各个

门户站点的新闻频道，甚至他们的其他频道，都是通过信息发布系统来管理和实现的，信息发布系统可以实现最简单的信息录入自动生成静态页面，还能具备频道管

理、权限管理、自动抓取等功能，对于一个大型网站来说，拥有一套高效、可管理的CMS是必不可少的。

除了门户和信息发布类型的网站，对于交互性要求很高的社区类型网站来说，尽可能的静态化也是提高性能的必要手段，将社区内的帖子、文章进行实时的静态化、有更新的时候再重新静态化也是大量使用的策略，像Mop的大杂烩就是使用了这样的策略，网易社区等也是如此。

同时，html静态化也是某些缓存策略使用的手段，对于系统中频繁使用数据库查询但是内容更新很小的应用，可以考虑使用html静态化来实现。

比如论坛中论坛的公用设置信息，这些信息目前的主流论坛都可以进行后台管理并且存储在数据库中，这些信息其实大量被前台程序调用，但是更新频率很小，可以

考虑将这部分内容进行后台更新的时候进行静态化，这样避免了大量的数据库访问请求。

2、图片服务器分离

大家知道，对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是基

本上大型网站都会采用的策略，他们都有独立的、甚至很多台的图片服务器。这样的架构可以降低提供页面访问请求的服务器系统压力，并且可以保证系统不会因为

图片问题而崩溃。

在应用服务器和图片服务器上，可以进行不同的配置优化，比如apache在配置ContentType的时候可以尽量少支持、尽可能少的LoadModule，保证更高的系统消耗和执行效率。

3、数据库集群、库表散列

大型网站都有复杂的应用，这些应用必须使用数据库，那么在面对大量访问的时候，数据库的瓶颈很快就能显现并薯出来，这时一台数据库将很快无法满足应用，于是我们需要使用数据库集群或者库表散列。

在数据库集群方面，很多数据库都有自己的解决方案，Oracle、Sybase等都有很好的方案，常用的MySQL提供的Master/Slave也是类似的方案，您使用了什么样的DB，就参考相应的解决方案来实施即可。

上面提到的数据库集群由于在架构、成本、扩张性方面都会受到所采用DB类型的限制，于是我们需要从应用程序的角度来考虑改善系统架构，库表散列是常用并且最有效的解决方案。

我们在应用程序中安装业务和应用或者功能模块将数据库进行分离，不同的模块对应不同的数据库或者表，再按照一定的策略对某个页面或者功能进行更小的数据库散列，比如用户表，按照用户ID进行表散列，这样就能够低成本的提升系统的性能并且有很好的扩展性。

sohu的论坛就是采用了这样的架构，将论坛的用户、设置、帖子等信息进行数据库分离，然后对帖子、用户按照板块和ID进行散列数据库和表，最终可以在配置文件中进行简单的配置便能让系统随时增加一台低成本的数据库进来补充系统性能。

4、缓存

缓存一词搞技术的都接触过，很多地方用到缓存。网站架构和网站开发中的缓存也是非常重要。这里先讲述最基本的两种缓存。高级和分布祥蔽培式的缓存在后面讲述。

架构方面的缓存，对Apache比较熟悉的人都能知道Apache提供了自己的缓存模块，也可以使用外加的Squid模块进行缓存，这两种方式均可以有效的提高Apache的访问响应能力。

网站程序开发方面的缓存，Linux上提供的Memory

Cache是常用的缓存接口，可以在web开发中使用，比如用Java开发的时候就可以调用MemoryCache对一些数据进行缓存和通讯共享，一些大

型社区使用了这样的架构。另外，在使用web语言开发的时候谨唯，各种语言基本都有自己的缓存模块和方法，PHP有Pear的Cache模块，Java就更多

了，.net不是很熟悉，相信也肯定有。

5、镜像

镜像是大型网站常采用的提高性能和数据安全性的方式，镜像的技术可以解决不同网络接入商和地域带来的用户访问速度差异，比如ChinaNet和

EduNet之间的差异就促使了很多网站在教育网内搭建镜像站点，数据进行定时更新或者实时更新。在镜像的细节技术方面，这里不阐述太深，有很多专业的现

成的解决架构和产品可选。也有廉价的通过软件实现的思路，比如Linux上的rsync等工具。

6、负载均衡

负载均衡将是大型网站解决高负荷访问和大量并发请求采用的高端解决办法。

负载均衡技术发展了多年，有很多专业的服务提供商和产品可以选择，我个人接触过一些解决方法，其中有两个架构可以给大家做参考。

（1）、硬件四层交换

第四层交换使用第三层和第四层信息包的报头信息，根据应用区间识别业务流，将整个区间段的业务流分配到合适的应用服务器进行处理。

第四层交换功能就像是虚IP，指向物理服务器。它传输的业务服从的协议多种多样，有HTTP、FTP、NFS、Telnet或其他协议。这些业

务在物理服务器基础上，需要复杂的载量平衡算法。在IP世界，业务类型由终端TCP或UDP端口地址来决定，在第四层交换中的应用区间则由源端和终端IP

地址、TCP和UDP端口共同决定。

在硬件四层交换产品领域，有一些知名的产品可以选择，比如Alteon、F5等，这些产品很昂贵，但是物有所值，能够提供非常优秀的性能和很灵活的管理能力。“Yahoo中国”当初接近2000台服务器，只使用了三、四台Alteon就搞定了。

(2)、软件四层交换

大家知道了硬件四层交换机的原理后，基于OSI模型来实现的软件四层交换也就应运而生，这样的解决方案实现的原理一致，不过性能稍差。但是满足一定量的压力还是游刃有余的，有人说软件实现方式其实更灵活，处理能力完全看你配置的熟悉能力。

软件四层交换我们可以使用Linux上常用的LVS来解决，LVS就是Linux Virtual

Server，他提供了基于心跳线heartbeat的实时灾难应对解决方案，提高系统的强壮性，同时可供了灵活的虚拟VIP配置和管理功能，可以同时满

足多种应用需求，这对于分布式的系统来说必不可少。

一个典型的使用负载均衡的策略就是，在软件或者硬件四层交换的基础上搭建squid集群，这种思路在很多大型网站包括搜索引擎上被采用，这样的架构低成本、高性能还有很强的扩张性，随时往架构里面增减节点都非常容易。

对于大型网站来说，前面提到的每个方法可能都会被同时使用到，这里介绍得比较浅显，具体实现过程中很多细节还需要大家慢慢熟悉和体会。有时一个很小的squid参数或者apache参数设置，对于系统性能的影响就会很大。

7、最新：CDN加速技术

什么是CDN？

CDN的全称是内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。

CDN有别于镜像，因为它比镜像更智能，或者可以做这样一个比喻：CDN=更智能的镜像+缓存+流量导流。因而，CDN可以明显提高

Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题，提高用户访问网站的响应速度。

CDN的类型特点

CDN的实现分为三类：镜像、高速缓存、专线。

镜像站点（Mirror Site），是最常见的，它让内容直接发布，适用于静态和准动态的数据同步。但是购买和维护新服务器的费用较高，还必须在各个地区设置镜像服务器，配备专业技术人员进行管理与维护。对于大型网站来说，更新所用的带宽成本也大大提高了。

高速缓存，成本较低，适用于静态内容。Internet的统计表明，超过80%的用户经常访问的是20%的网站的内容，在这个规律下，缓存服务

器可以处理大部分客户的静态请求，而原始的服务器只需处理约20%左右的非缓存请求和动态请求，于是大大加快了客户请求的响应时间，并降低了原始服务器的

负载。

CDN服务一般会在全国范围内的关键节点上放置缓存服务器。

专线，让用户直接访问数据源，可以实现数据的动态同步。

CDN的实例

举个例子来说，当某用户访问网站时，网站会利用全球负载均衡技术，将用户的访问指向到距离用户最近的正常工作的缓存服务器上，直接响应用户的请求。

当用户访问已经使用了CDN服务的网站时，其解析过程与传统解析方式的最大区别就在于网站的授权域名服务器不是以传统的轮询方式来响应本地

DNS的解析请求，而是充分考虑用户发起请求的地点和当时网络的情况，来决定把用户的请求定向到离用户最近同时负载相对较轻的节点缓存服务器上。

通过用户定位算法和服务器健康检测算法综合后的数据，可以将用户的请求就近定向到分布在网络“边缘”的缓存服务器上，保证用户的访问能得到更及时可靠的响应。

由于大量的用户访问都由分布在网络边缘的CDN节点缓存服务器直接响应了，这就不仅提高了用户的访问质量，同时有效地降低了源服务器的负载压力。

关于网站性能优化的方法有哪些和如何进行网站性能优化?的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。