web长页面如何优化？

想要成为一名合格的Web前端工程师，Web前端性能优化是一个必须要掌握的知识，那么应该怎么进行Web前端性能优化呢？

1、CSS精灵

CSSSprites在国内很多人叫CSS精灵，是一种网页应用处理方式。它允许你将一个页面涉及到的所有零星都包含到一张大图中去，这样一来，当访问该页面时，载入的就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张的所需载入时间基本是差不多的，所以无需顾忌这个问题。

2、代码压缩

（1）将table改为div布局

尽量将table标签布局HTML重构div布局，可以节约至少40%的代码量。由于div代码少于table布局的HTML网页，所以搜索引擎索引权重也优于table布局的HTML网页。

（2）缩减精简div、span、ul、li等系列标签

布局DIV+CSS网页时候，有时候可以节约一些DIV布局代码，减少代码量。

（3）删除多余空格

删除多余空格换行，可以有效地压缩HTML代码占用字节，一般在开发完成后可以对HTML中代码进行删除换行和空格内容。

（4）表格类型布局时候适当使用table替代div布局

如果是本身是表格数据列表排版，我们最好选择table，因为表格布局使用table优于div布局，使用table布局却比div布局节约HTML标签代码和节约CSS样式。

（5）网页GZIP压缩

自己的服务器推荐设置网页Gzip压缩功能。

3、高质量的JS代码肯定能省很多事，封装JS以及重复调用方法能够减少很多操作。

4、减少对DOM的操作

（1）创建临时父元素。

（2）创建子元素，并添加内容，设置属性。

（3）把子元素加入到临时父元素中。

（4）把临时父元素添加到DOM树。

或：（1）找到要添加位置的元素。

（2）改变该元素内容为需要的HTML。

5、使用JSON格式来进行数据交换

原理：JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

6、高效使用HTML标签和CSS样式

7、使用CDN加速（内容分发网络）

CDN的全称是ContentDeliveryNetwork，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

8、精简CSS和JS文件

9、注意控制Cookie大小和污染

主要是C盘需要整理整理减减负,最少要个5/6G,增加些虚拟缓存大小(可以指定),D盘就不用了;另外windows目录下的前面还$符号的文件夹是打补丁文件时生成的可以删除,其它文件最好不要动;

另外跟你的服务器(哪年买的CPU/内存/硬盘大小及性能以及访问的用户量也有关系,实在不行升级服务器吧

　　网站服务器运行段间down掉原能造种现象：比tomcat堆非堆内存设置足程序没能释放内存空间造内存溢或者某些进程直运行没能释放造cup资源量消耗除程序本身原能客服端访问造（客户端包含蜘蛛软件等搜索引擎）服务器客户端建立链接(用netstat -a命令查看网络访问信息)需要http响应connection做定设置

　　http11requestreponse header都能现connection字段header含义clientserver通信于链接何进行处理http11clientserver都默认支持链接 client使用http11协议希望使用链接则需要header指明connection值close；server想支持链接则response需要明确说明connection值close

　　论requestresponseheader包含值closeconnection都表明前使用tcp链接请求处理完毕断掉client再进行新请求必须创建新tcp链接

　　HTTP Connectionclose设置允许客户端或服务器任何关闭底层连接双都要求处理请求关闭TCP连接

　　何程序设置：滤器加入：responsesetHeader(connection, close);

　　内容自: HTTP Keep-Alive详解

　　HTTP Keep Alive

　　HTTP Keep-Alive 程序误解面介绍HTTP/10HTTP/11版本何工作及其JAVA运行原理

　　HTTP请求响应模式典型范例即客户端向服务器发送请求信息服务器响应信息HTTP版本每请求都创建新客户端->服务器连接连接发送请求接收请求模式优点简单容易理解编程实现；缺点效率低Keep-Alive提用解决效率低问题

　　HTTP/10

　　HTTP/10版本并没官标准规定Keep-Alive何工作实际附加HTTP/10协议客户端浏览器支持Keep-AliveHTTP请求添加字段 Connection: Keep-Alive服务器收附带Connection: Keep-Alive请求响应添加同字段使用Keep-Alive客户端服务器间HTTP连接保持断（超Keep-Alive规定间意外断电等情况除外）客户端发送另外请求使用条已经建立连接

　　HTTP/11

　　HTTP/11版本官规定Keep-Alive使用标准HTTP/10版本些同默认情况所HTTP11所连接都保持除非请求或响应指明要关闭：Connection: Close Connection: Keep-Alive字段再没意义原另外添加新字段Keep-Alive:字段并没详细描述用做忽略

　　Not reliable（靠）

　　HTTP状态协议意味着每请求都独立Keep-Alive没能改变结另外Keep-Alive能保证客户端服务器间连接定跃HTTP11版本唯能保证连接关闭能通知所应该让程序依赖于Keep-Alive保持连接特性否则意想

　　Keep-AlivePOST

　　HTTP11细则规定POST消息体面能任何字符指于某特定浏览器能并遵循标准（比POST消息体面放置CRLF符）据我所知部浏览器POST消息体都自跟CRLF符再发送何解决问题呢根据面说明POST请求禁止使用Keep-Alive或者由服务器自忽略CRLF部服务器都自忽略未经测试前能知道服务器否做

　　内容自:

　　HTTP状态协议Connection:Keep-Alive容易犯误区

　　名词解释：

　　HTTP状态：状态指协议于事务处理没记忆能力服务器知道客户端状态另面讲打服务器网页前打服务器网页间没任何联系

　　要实现购物车需要借助于Cookie或Session或服务器端API（NSAPI and ISAPI）记录些信息请求服务器结算页面同些信息提交服务器

　　登录网站登录状态由Cookie或Session记忆服务器并知道否登录

　　优点：服务器用每客户端连接配内存记忆量状态用客户端失连接清理内存更高效处理WEB业务

　　缺点：客户端每请求都需要携带相应参数服务器需要处理些参数

　　Keep-Alive：参考另外篇文章HTTP Keep-Alive 详解

　　容易犯误区：

　　1、HTTP状态面向连接协议状态代表HTTP能保持TCP连接更能代表HTTP使用UDP协议（连接）

　　2、HTTP/11起默认都启Keep-Alive保持连接特性简单说网页打完客户端服务器间用于传输HTTP数据TCP连接关闭客户端再访问服务器网页继续使用条已经建立连接

　　3、Keep-Alive永久保持连接保持间同服务器软件（Apache）设定间

　　内容自:

　　Keep-Alive简介及Tomcat配置

　　Keep-Alive功能使客户端服务器端连接持续效现服务器继请求Keep-Alive功能避免建立或者重新建立连接市场 部Web服务器包括iPlanet、IISApache都支持HTTP Keep-Alive于提供静态内容网站说功能通用于负担较重网站说存另外问题：虽客户保留打连 接定处同影响性能处理暂停期间本释放资源仍旧占用Web服务器应用服务器同台机器运行Keep-Alive功能资源利用影响尤其突 功能HTTP 11预设功能HTTP 10加Keep-Alive header提供HTTP持续作用功能

　　Keep-Alive: timeout=5, max=100

　　timeout：期间5秒（应httpdconf参数：KeepAliveTimeout）max百请求强制断掉连接

　　timeout间内新连接同max自减1直0强制断掉

　　Tomcat相关设置,serverxml Connector 元素

　　keepAliveTimeout：

　　间连接close单位milliseconds

　　maxKeepAliveRequests：

　　连接数（1表示禁用-1表示限制数默认100般设置100~200间）

　　maxKeepAliveRequests=1″避免tomcat产量TIME_WAIT连接定程度避免tomcat假死

　　<Connector executor=tomcatThreadPool

　　port=80″ protocol=HTTP/11″

　　connectionTimeout=60000″

　　keepAliveTimeout=15000″

　　maxKeepAliveRequests=1″

　　redirectPort=443″

　　maxHttpHeaderSize=8192″ URIEncoding=UTF-8″ enableLookups=false acceptCount=100″ disableUploadTimeout=true/>　　网站服务器运行段间down掉原能造种现象：比tomcat堆非堆内存设置足程序没能释放内存空间造内存溢或者某些进程直运行没能释放造cup资源量消耗除程序本身原能客服端访问造（客户端包含蜘蛛软件等搜索引擎）服务器客户端建立链接(用netstat -a命令查看网络访问信息)需要http响应connection做定设置

　　http11requestreponse header都能现connection字段header含义clientserver通信于链接何进行处理http11clientserver都默认支持链接 client使用http11协议希望使用链接则需要header指明connection值close；server想支持链接则response需要明确说明connection值close

　　论requestresponseheader包含值closeconnection都表明前使用tcp链接请求处理完毕断掉client再进行新请求必须创建新tcp链接

　　HTTP Connectionclose设置允许客户端或服务器任何关闭底层连接双都要求处理请求关闭TCP连接

　　何程序设置：滤器加入：responsesetHeader(connection, close);

　　内容自: HTTP Keep-Alive详解

　　HTTP Keep Alive

　　HTTP Keep-Alive 程序误解面介绍HTTP/10HTTP/11版本何工作及其JAVA运行原理

　　HTTP请求响应模式典型范例即客户端向服务器发送请求信息服务器响应信息HTTP版本每请求都创建新客户端->服务器连接连接发送请求接收请求模式优点简单容易理解编程实现；缺点效率低Keep-Alive提用解决效率低问题

　　HTTP/10

　　HTTP/10版本并没官标准规定Keep-Alive何工作实际附加HTTP/10协议客户端浏览器支持Keep-AliveHTTP请求添加字段 Connection: Keep-Alive服务器收附带Connection: Keep-Alive请求响应添加同字段使用Keep-Alive客户端服务器间HTTP连接保持断（超Keep-Alive规定间意外断电等情况除外）客户端发送另外请求使用条已经建立连接

　　HTTP/11

　　HTTP/11版本官规定Keep-Alive使用标准HTTP/10版本些同默认情况所HTTP11所连接都保持除非请求或响应指明要关闭：Connection: Close Connection: Keep-Alive字段再没意义原另外添加新字段Keep-Alive:字段并没详细描述用做忽略

　　Not reliable（靠）

　　HTTP状态协议意味着每请求都独立Keep-Alive没能改变结另外Keep-Alive能保证客户端服务器间连接定跃HTTP11版本唯能保证连接关闭能通知所应该让程序依赖于Keep-Alive保持连接特性否则意想

　　Keep-AlivePOST

　　HTTP11细则规定POST消息体面能任何字符指于某特定浏览器能并遵循标准（比POST消息体面放置CRLF符）据我所知部浏览器POST消息体都自跟CRLF符再发送何解决问题呢根据面说明POST请求禁止使用Keep-Alive或者由服务器自忽略CRLF部服务器都自忽略未经测试前能知道服务器否做

　　内容自:

　　HTTP状态协议Connection:Keep-Alive容易犯误区

　　名词解释：

　　HTTP状态：状态指协议于事务处理没记忆能力服务器知道客户端状态另面讲打服务器网页前打服务器网页间没任何联系

　　要实现购物车需要借助于Cookie或Session或服务器端API（NSAPI and ISAPI）记录些信息请求服务器结算页面同些信息提交服务器

　　登录网站登录状态由Cookie或Session记忆服务器并知道否登录

　　优点：服务器用每客户端连接配内存记忆量状态用客户端失连接清理内存更高效处理WEB业务

　　缺点：客户端每请求都需要携带相应参数服务器需要处理些参数

　　Keep-Alive：参考另外篇文章HTTP Keep-Alive 详解

　　容易犯误区：

　　1、HTTP状态面向连接协议状态代表HTTP能保持TCP连接更能代表HTTP使用UDP协议（连接）

　　2、HTTP/11起默认都启Keep-Alive保持连接特性简单说网页打完客户端服务器间用于传输HTTP数据TCP连接关闭客户端再访问服务器网页继续使用条已经建立连接

　　3、Keep-Alive永久保持连接保持间同服务器软件（Apache）设定间

　　内容自:

　　Keep-Alive简介及Tomcat配置

　　Keep-Alive功能使客户端服务器端连接持续效现服务器继请求Keep-Alive功能避免建立或者重新建立连接市场 部Web服务器包括iPlanet、IISApache都支持HTTP Keep-Alive于提供静态内容网站说功能通用于负担较重网站说存另外问题：虽客户保留打连 接定处同影响性能处理暂停期间本释放资源仍旧占用Web服务器应用服务器同台机器运行Keep-Alive功能资源利用影响尤其突 功能HTTP 11预设功能HTTP 10加Keep-Alive header提供HTTP持续作用功能

　　Keep-Alive: timeout=5, max=100

　　timeout：期间5秒（应httpdconf参数：KeepAliveTimeout）max百请求强制断掉连接

　　timeout间内新连接同max自减1直0强制断掉

　　Tomcat相关设置,serverxml Connector 元素

　　keepAliveTimeout：

　　间连接close单位milliseconds

　　maxKeepAliveRequests：

　　连接数（1表示禁用-1表示限制数默认100般设置100~200间）

　　maxKeepAliveRequests=1″避免tomcat产量TIME_WAIT连接定程度避免tomcat假死

　　<Connector executor=tomcatThreadPool

　　port=80″ protocol=HTTP/11″

　　connectionTimeout=60000″

　　keepAliveTimeout=15000″

　　maxKeepAliveRequests=1″

　　redirectPort=443″

　　maxHttpHeaderSize=8192″ URIEncoding=UTF-8″ enableLookups=false acceptCount=100″ disableUploadTimeout=true/>

1、减少HTTP请求数量

这主要是修改网站代码，减少外部、CSS、JS等文件数量，手动合并多个CSS/JavaScript文件。IIS那里不用设置。

2、使用CDN

对于小网站来说，这个就免了吧。当然有钱人可以试试，可以从技术上解决用户访问网站响应速度慢的问题。

3、启用内容过期

对于静态文件启用内容过期可以提高访问性能。首先网站的目录要划分合理，、CSS、JavaScript均放在单独目录下，然后在IIS中选择目录，点属性-HTTP头，启用内容过期，可以选择30天后过去，这样，用户浏览器将比较当前日期和截止日期，以便决定是显示缓存页还是从服务器请求更新的页，由于、CSS、JS通常变化较少，因此基本上都从本地缓存读取，从而加快显示速度。

4、启用Gzip压缩

HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如Gzip等压缩HTML、JavaScript或 CSS文件。压缩的最大好处就是降低了网络传输的数据量，从而提高客户端浏览器的访问速度。

使用方法是，右击“网站”->“属性”，选择“服务”。在“HTTP压缩”框中选中“压缩静态文件”，“临时目录”建议单独设置另一个盘的目录下。

之后，IIS管理器中，右击“Web服务扩展”->“增加一个新的Web服务扩展”，在“扩展名”中输入“HTTPCompression”，添加“要求的文件”为C:\WINDOWS\system32\inetsrv\gzipdll，其中Windows系统目录根据您的安装可能有所不同，选中“设置扩展状态为允许”。

最后，使用文本编辑器打开C:\Windows\System32\inetsrv\MetaBasexml，在HcFileExtensions中增加需要压缩的静态文件后缀名，默认为HTML和TXT文件，建议再添加上js、css等，不要添加或ZIP等已经被压缩的文件。

5、将样式文件放在头部

这是基本的HTML代码风格，将所有的CSS文件都放在HTML页面的头部。

6、将脚本文件放在尾部

这也是基本的HTML代码风格，将所有的JavaScript文件都放在HTML页面的尾部。

7、避免CSS表达式

这点很简单，因为大多数人从来不用CSS表达式。

8、使用外部的JavaScript和CSS

将所有的JavaScript和CSS都做成外部文件的形式进行引用，这主要是为了让这些文件可以被浏览器缓存起来，参见第三点的介绍。

9、减少DNS查询

域名的DNS查询会带来额外的访问开销，减少页面内文件的主机域名数量，一个页面的主机域名保持在2-4个以内，这样就不会降低页面的装入速度。

10、压缩JavaScript文件

压缩脚本文件，删除不必要的字符，可以改善加载时间，目前有很多JavaScript文件的压缩工具，我这里有一个GUI界面的JS压缩工具供下载。

11、避免重定向

网页的重定向会带来额外的运行开销，因此要避免页面进行重定向跳转操作。

12、删除重复脚本

一个页面两次包含同一个JavaScript文件会影响加载的性能，因此需要将重复的脚本文件删除。

13、配置ETag

这是一个令人迷惑的问题。理论上说将服务器的ETag删除会提高HTTP请求的性能，但是按照微软官方提供的修改方法配置IIS 60，并没有实际效果，最终我使用了一个remetag，以ISAPI的方式实现了删除ETag的功能。