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大小和污染

网站跳出率（Bounce Rate)是评价一个网站性能的重要指标，跳出率高，说明网站用户体验做得不好，用户进去就跳出去了，反之如果跳出率较低，说明网站用户体验做得不错，用户能够找到自己需要的内容。而且以后他可能还会再来光顾你的网站，提高了用户粘性，慢慢的可以积累大量的网站用户。

降低用户的跳出率对于网站来说是多么重要，很多有自己网站的站长都希望用户在自己的网站停留更多的时间，希望用户去更多地点击页面，去查看更多地内容，并尽可能达成目标转化。而且，网站的低跳出率还会加深搜索引擎对我们网站的友好度，获得更好的评分。

跳出率指用户通过搜索关键词来到你的网站，仅浏览了一个页面就离开的访问次数与所有访问次数的百分比。 观察关键词的跳出率就可以得知用户对网站内容的认可，或者说你的网站是否对用户有吸引力。而网站的内容是否能够对用户有所帮助留住用户也直接可以在跳出率中看出来，所以跳出率是衡量网站内容质量的重要标准。

降低网站跳出率的6种改善方案：

1、网站良好的结构层次，舒服的布局

这点应该很容易去理解，不管是谁，当你进入一个网站的时候，发现这个网站结构乱七八糟的，层次结构又不清晰，想找一下自己想要的内容，但又在这样混乱的视图中无从下手，要是自己又很急，心情差。我想不管是谁都会有想XXOO这个制作者一顿的心情（咳咳…），所以，我们必须要给予用户更好的体验，以及明确又清晰的视图才行。

最好采用树形的结构来布局网络，这是搜索引擎非常喜欢的结构，会增加对我们网站的好感度的，并且还要能引导用户进入到他想要知道的内容中去。

2、放入广告需要谨慎，别忘了用户体验

说一句老实话，应该没有人会喜欢一个眼花缭乱满天飞的广告的网站。诚然，广告是我们网站盈利和变现的主要手段之一，但是这东西是一把双刃剑，如果你做的太过，用户会非常反感你的网站，甚至有一些网站还用一些“流氓手段”来刷广告，比如强制d窗之类的，这样的话用户对你网站的印象就会很差了。

所以，我们应该谨慎地去打广告，还有一些图片和视频内的广告，会拖慢网站的加载速度。所以，这个量要如何去把握就是靠我们自己了，不要贪得无厌最后反而葬送了自己的网站就得不偿失了。

3、我们网页的加载速度

根据数据表明，如果一个网页的加载时长超过了12秒，用户一般都会选择直接关掉网页。而且，这不仅仅会降低用户对我们网站的好感度，增加用户的跳出率，还会影响到搜索引擎对我们网站的排名。

这是我们站长不可忽视的一个问题，至于解决办法嘛，比如我们可以少在网站中加入图片啊之类比较消耗带宽的东西，也可以去给网站弄一个CDN加速，方法很多。

4、网站良好的内链系统布局

我们的用户若是兴趣盎然地浏览完了一篇文章，这时他会占时失去思考能力，这个时候若是我们能让他们的思维跟着我们走，就可以让用户在我们的站里一直浏览下去。

所以，内链的布局是必不可少的，比如，用户在浏览完这篇文章的时候给他一个相关推荐，热门文章，那么用户就会因为感兴趣而继续浏览下去。这样的话，就增加了用户在我们网站的浏览的深度和广度，也降低了网站的跳出率。又或者用户想看一下关于建站的视频，我们就把视频以内链的方式，第一集，第二集，第三集………排下去，这样用户就会跟着这样一个内链系统一直浏览下去，降低我们网站的用户跳出率，而且也会增加搜索引擎在我们网站爬行的深度和广度。所以虽说外链是很重要的，但也不要忽视内链的作用哦。

5、网站不要有死链

当我们的网站死链多，不仅搜索引擎会对我们网站降权，也会降低用户对我们网站的好感度，这点大家应该都深有体会。

所以，我们应该制作404页面，当出现死链接的时候，给用户一个好的体验，并引导用户回到我们的首页。并且及时在robot文件中屏蔽死链，还要在站长平台中提交死链。

6、增加网站的互动性

用户在我们的网站中浏览了一片文章，可能对这篇文章有很多的看法和心得，就需要说一说，所以我们可以在下方加一个评论的功能，让用户来发挥自己的墨水，如此高的互动性说不定还可以吸引其他人来看看文章，来评论区说两说。这样既可以降低用户的跳出率还可以增加搜索引擎对我们页面的评分。

---