数据性能提升解析：前端效能优化的具体方法

如何对前端性能进行改良

前端开发代码改良、可维护性、浏览器兼容性是至关重要的议题。从实际工程应用的角度来看，最常遇到的前端改良问题。前端性能改良的规则，基本上可以覆盖现在前端大部分的性能改良原则，许多更加geek和精细改良方法都是从这些原则中衍生出来的。

前端性能改良都有哪些规则

1. 降低HTTP请求次数

尽可能合并图片、CSS、JS。例如，加载一个页面有5个CSS文件，将这5个文件合并成一个，则只需发起一次HTTP请求，节省网络请求时间，加快页面加载速度。

2. 使用CDN

网站上的静态资源，如CSS、JS和图片，全部使用CDN分发。

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空时，浏览器在渲染时会将当前页面的URL作为它们的属性值，从而将页面内容加载进来作为它们的值。因此，要避免此类疏忽。

4. 为文件头指定Expire

Expire用于设置文件的过期时间，通常对CSS、JS和图片资源有效。它可以使内容具有缓存性，这样在下一次访问相同的资源时，就可以通过浏览器缓存区读取，而不需要再次发起HTTP请求。

5. 使用gzip压缩内容

gzip可以压缩任何文本类型的响应，包括HTML、XML和JSON。这可以大大缩小请求返回的数据量。

6. 将CSS放在顶部

网页上的资源在加载时是按照从上到下的顺序加载的，因此将CSS放在页面顶部可以优先渲染页面，让用户感觉页面加载很快。

7. 将JS放到底部

加载JS时会对后续的资源造成阻塞，必须等待JS加载完毕才能加载后续文件，因此将JS放在页面底部最后加载。

8. 避免使用CSS表达式

例如，以下是一个CSS表达式的例子：

font-color: expression((new Date()).getHours()%3?"#FFFFFF":"#AAAAAA");

这个表达式会持续在页面上计算样式，影响页面性能。并且CSS表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件，可以参考原则4。但有时为了减少请求，也会直接写入页面中，需要根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机名会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE用户的图片下载速度就会受到影响。因此，新浪会使用N个二级域名来存放图片。

下面是新浪微博的图片域名，我们可以看到它有多个域名，这样可以确保这些不同域名可以同时下载图片，而无需排队。但是，如果使用的域名过多，响应时间就会变慢，因为域名的响应时间不一致。

11. 精简CSS和JS

这涉及到CSS和JS的压缩。例如，以下是一个新浪的CSS文件示例，将空格、回车全部删除，减少文件大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行CSS和JS文件的压缩，如grunt、glup等。

12. 避免跳转

有一种现象可能会很麻烦，看起来没什么差别，实际上却进行了一次页面跳转。例如，当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http:// baidu.com时，实际上返回的是一个包含301代码的跳转，它指向的是http:// baidu.com/（注意末尾的斜杠）。在nginx服务器中可以使用rewrite；Apache服务器中可以使用Alias或mod_rewrite或the DirectorySlash来避免。

另一种是不用域名之间的跳转，例如访问http:// baidu.com/bbs跳转到http:// bbs.baidu.com/。那么可以通过使用Alias或mod_rewirte建立CNAME（保存一个域名和另一个域名之间关系的DNS记录）来替代。

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中，不管脚本是否可缓存，都存在重复运算JavaScript的问题。

14. 配置ETags

它用于判断浏览器缓存中的元素是否与原始服务器上的一致。比last-modified date更具弹性，例如某个文件在1秒内修改了10次，ETag可以综合Inode（文件的索引节点(inode)数）、MTime（修改时间）和Size进行精确判断，避免UNIX记录MTime只能精确到秒的问题。在服务器集群使用中，可以取后两个参数。使用ETags减少Web应用的带宽和负载。

15. 可缓存的AJAX

异步请求同样会造成用户等待，因此在使用AJAX请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段，cache：true就是显式地要求如果当前

IE独有的属性AlphaImageLoader用于纠正7.0以下版本中PNG图片的半透明显示问题。此滤镜的缺陷在于，在浏览器加载图片时，它会中断内容的展示并使浏览器冻结。它会在每个元素（不仅仅是图片）上执行一次运算，增加了内存消耗，因此问题涉及多个方面。

完全避免使用AlphaImageLoader的最佳方法就是使用PNG8格式替代，这种格式在IE中表现良好。如果确实需要使用AlphaImageLoader，请使用下划线_filter使其对IE7以上版本的用户无效。

22.不要在HTML中调整图片大小

例如，如果你需要的图片尺寸是5050

那就不要使用一张500500的大尺寸图片，以免影响加载速度。

23.缩小favicon.ico并缓存

在前端开发中如何进行SEO优化

许多人掌握了SEO的一些基本常识，就认为自己已经学会了SEO，能够为许多网站提供建议，但实际上，他们提出的建议，很多时候都是基于猜测和感觉。至于这些建议是否有效，是否会给网站带来积极影响，只能边走边看。

实际上，一个SEO的效果如何，最了解的还是自己。优秀的SEO专家能够通过日常积累的数据，进行汇总，通过数据分析来明确SEO的方向。

SEO是什么？在我看来，SEO就是优化搜索引擎的排名，而SEO的最终目的只有一个，那就是通过排名良好的关键词来获取流量，也就是说，我们最终的目标就是流量。因此，我们很多时候不应该局限于自己的站点，而应该将思路拓展到各个不同的模块和领域。

那么，作为SEO专家，如何科学地分析自己工作的效果，如何更好地通过数据来指导自己的思维呢？

我们都知道，流量与排名、点击率、排名数、收录数有关，因此，我们的数据主要监控这三个维度。

1、排名点击率：

如果是自己的网站，那就比较简单，安装流量统计工具就可以很好地监控到关键词的点击率。如果是外部站点，可以通过关键词覆盖查询来估算自己的排名点击率。实际上，在站点和内容都不变的情况下，点击率一般不会有太大的变化。因此，排名和收录的因素影响较大。

2、网站排名：

网站的排名主要看两大方面，一是重点词的排名，二是长尾关键词的覆盖率。

2.1、重点词的排名：

每天都要监控，重点词是你的核心词，主要用于监控站内关键词的变化情况。如果重点词排名出现大幅波动，就意味着在这个周期内，你的排名有极大的波动。排名监控可以使用分析牛关键词排名监控，它可以记录一个月的排名数据，一个月内的排名变化情况一目了然。如果发现排名有明显变化，就要分析近一个月内的网站日志，找出问题的原因。

2.2、长尾关键词覆盖率：

长尾词的关键词覆盖率主要用于监控站外排名。

之前与一个做推广的人聊天，他问我：“查一下关键词覆盖率，什么是关键词覆盖？”

关键词覆盖的目的是尽可能地将你的关键词覆盖到搜索引擎结果中，比如百度搜索结果第一页有10个排名，这10个排名都是你所发的，那么用户就只能点击你，而无法点击别人。

做医疗行业长尾关键词，一般都是地域性的，都是尽可能长的关键词。

之前做的关键词覆盖，当覆盖率达到60%时，一天有10个有效对话；当覆盖率达到50%时，一天的有效对话只有8个；当关键词覆盖率达到30%时，一天的有效对话只有4个。

那么，长的长尾关键词能带来对话吗？答案是肯定的，能。有人会说，那么长的词，谁能搜索得到呢？确实，那么长的词可能没有人搜索，但是通过分词带来的长尾关键词呢？最重要的是，这种长尾关键词有足够的量，当量大的时候，蚂蚁也能干过一个军团。

因此，关键词覆盖率可以很好地体现你关键词所做的情况。

有人会问，站外推广那么难做，都没有什么地方可做。其实，有些平台永远都是好的，只是你没去认真研究而已。为什么别人都在做，你却做不了呢？

3、网站收录：

站点的收录非常关键。当排名和覆盖率相对稳定时，收录越多，也就意味着你的长尾关键词越多。

我们看收录，并不是看单个链接的收录，而是看整体收录变化比。这时可以通过链接权重查询来查询网址的收录情况。

在排名率不变的情况下，当你的收录越来越高，你的流量就会越来越多。因此，如何提高收录也是一个非常重要的手段。

总结：

总体来看，SEO的核心还是数据分析。具体的数据分析可以参考（百度排名只需分析关键词数据）。实际上，只要观察细致，很多问题都会变得很简单。你要真正搞清楚你想要什么，你想要的流量，而流量与网站的排名、网站的收录、排名的点击率有直接关系。搞清楚这些关系，逐一分析每一个细节，你会发现SEO变得很简单。