web前端性能以及SEO优化

引子

为什么要做性能优化?

1. 提高用户体验,加速页面的相应速度
2. 提高用户交互性，操作体验更好
3. 为搜索引擎服务

常用的技术

1. css精灵图片
2. 压缩图片大小
3. 合并css js文件
4. 减少http请求的次数
5. 合理的使用cdn资源，加速资源加载速度、降低服务器压力
6. 合理的使用html节点，减少不必要的节点
7. 优化css元素选择
8. 优化js代码
9. 服务器配置gzip

为什么要进行SEO

为了提高网站的权重，让用户能在搜索引擎中快速的找到网站。

常用方法

1. 定期的更新网站的文章内容，在html的head中加入关键字和描述信息
2. 增加外链
3. 做站点集群
4. 百度竞价排名

正文

网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。

而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。就好像，好多人问，男人在找女朋友的时候是不是只看外表，一些智慧的男人给出了这样的回答：脸蛋和身材决定了我是否想去了解她的思想，思想决定了我是否会一票否决她的脸蛋和身材。同理，网站也是这样，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。

不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。所以说，网站和女人一样，都要内外兼修啊(￣▽￣)”。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？

一般说来，web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。

浏览器访问优化

浏览器请求处理流程如下图：

yahoo前端性能团队总结了35条黄金定律：

一、网页内容

1、减少http请求次数

80%的响应时间花在下载网页内容(图片，CSS样式表，JS脚本，flash等)，因此减少http请求次数是缩短响应时间的关键！

将多个JS脚本文件捆绑成一个文件，将多个CSS样式表文件捆绑成一个文件，以此来减少文件的下载次数。

把多个图片拼成一张图片，然后通过CSS的background属性来控制具体显示整张图片的什么位置。

2、减少DNS查询次数

DNS查询也消耗响应时间，如果网页内容来自各个不同的domain，那么客户端首次解析这些domain也需要消耗一定的时间，但由于DNS查询结果会缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问网页时的速度有影响。

减少DNS查询次数需要减少来自不同domain的请求的数量，如尽量将外部域的对象下载到本地服务器上等等。

3、避免页面跳转

当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，有的网站甚至会一直跳n次，这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。

4、延迟加载

了解网页最初加载需要的最小内容集，剩下的内容放到延迟加载的集合中。

先确保网页在没有JavaScript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

5、避免在页面的主体布局中使用table

table要等其中的内容完全下载之后才会显示出来，显示比div+CSS布局慢。

6、减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，因此要减少DOM元素的数量。

7、根据域名划分下载内容

浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以增大浏览器的并行下载连接，但是注意控制域名使用在2-4个之间，不然DNS查询也会消耗响应时间。

一般网站规划会将静态资源放在静态域名static.example.com上，动态内容放在动态域名www.example.com上，这样还可以在静态域名上避免使用cookie。

8、减少iframe数量

iframe的优点

1. 用来加载速度较慢的内容，如广告。

2. 安全沙箱保护,浏览器会对iframe中的内容进行安全控制。

3. 脚本可以并行下载。

iframe的缺点

1. 即使iframe内容为空也消耗加载时间。

2. 会阻止页面加载。

3. 没有语义。

9、避免404

404代表服务器没有找到资源，网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，客户端还会将下载回来的内容(404)当成JavaScript去解析。

二、服务器

1、使用CDN

下载速度可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。如果网站上有大量的静态内容，那CDN是必不可少的。事实上大多数互联网巨头都有自己的CDN，而自己的网站可以先通过免费的CDN供应商来分发网页资源。

2、添加Expires 或Cache-Control报文头

对一个网站而言，CSS、JavaScript、图片等静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存

添加Expires，将静态内容设为永不过期，或者很长时间后才过期。

添加Cache-Control报文头，来控制网页的缓存。

3、Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。

Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。

pdf文件可以从需要被压缩的类型中剔除，因为pdf文件本身已经压缩，Gzip对其效果不大，而且会浪费CPU。

4、配置ETags

Etag通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。

但即使是主流服务器，Etags的版本信息也未能很好地支持跨服务器的判断。遇到这样的问题，IIS 7中可以将Etag去掉，使用URL Rewrite，IIS8中则提供了一个简单配制来直接关闭Etag。

5、尽早flush输出

网页后台程序中，一般调用Response.Flush()都是在程序末尾，但这个方法可以被调用多次，目的是可以将现有的缓存中的回复内容先发给客户端，让客户端有事可干。

一般情况下，可以在对于需要加载比较多外部脚本或者样式表时可以提前调用一次这个方法，客户端收到了关于外部脚本或者样式表的链接可以并行的先发请求去下载，服务器接下来把后续的处理结果发给客户端。

6、使用GET Ajax请求

浏览器在实现XMLHttpRequest POST时分成两步，先发header再发送数据，而GET却可以用一个TCP报文完成请求。

GET是去服务器取数据，而POST则是向服务器发送数据。

所以使用Ajax请求数据时尽量通过GET来完成。

7、避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器，完全浪费时间和服务器的资源。尤其是网站每天被很多人访问时，这种空请求造成的伤害不容忽略。

三、Cookie

1、Cookie注意事项

Cookie信息被包含在http报文头中，对于cookie要注意以下几点，来提高请求的响应速度：

1. 去除没有必要的cookie，如果网页不需要cookie就完全禁掉。

2. 将cookie的大小减到最小。

3. 注意cookie设置的domain级别，没有必要时不要影响到sub-domain

4. 设置合适的过期时间，较长的过期时间可以提高响应速度。

2、页面内容使用无cookie域名

可以采用不同的domain来单独存放这些静态文件，从而减少cookie的大小从而提高响应速度。常见的划分domain的方式是将静态内容放在static.example.com，动态内容放在www.example.com。

有些proxy拒绝缓存带有cookie的内容，而大多数网站的静态资源都没必要使用cookie，将这些静态资源的cookie去除，可以得到proxy的缓存支持。

四、CSS

1、将CSS样式表放在顶部

浏览器在css全部传输完全之前不会去渲染任何的东西。

将DHTML特征的样式表放在文档顶部(Head中)能使页面加载得更快(改善页面加载时间)。

2、避免使用 CSS 表达式（expression）

虽然CSS表达式可以动态的设置CSS属性，但只在IE5-IE8中支持，其他浏览器中表达式会被忽略。

3、用代替@import

避免使用@import的原因很简单，因为它相当于将CSS放在网页内容底部。

4、避免使用滤镜

滤镜的使用会导致图片在下载时阻塞网页绘制，另外会导致内存使用量的问题。

五、JavaScript

1、把脚本置底

1. 可以让网页渲染所需要的内容尽快加载显示给用户。

2. 现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。

3. HTML5中新加了async关键字，可以让脚本异步执行。

2、使用外部Javascirpt和CSS文件

使用外部JavaScript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用；同时将JavaScript和CSS文件从内联变为外部也减小了网页内容的大小。

使用外部JavaScript和CSS文件的决定因素在于这些文件的重用率。如果用户在浏览页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以带来很大的好处；但对于用户通常只会访问一次的页面，内联的JavaScript和CSS相对来说可以提供更高的效率。

3、精简JavaScript和CSS

将JavaScript或CSS中的空格和注释全去掉，无空格地放在一行。

4、去除重复脚本

重复脚本不仅浪费浏览器的下载时间，而且浪费浏览器的解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。

5、减少DOM操作次数

1. 缓存已经访问过的元素。

2. 用innerHTML代替DOM操作。

3. 避免通过JavaScript修复layout。

六、图片

1、图片预加载

var img = new Image();
img.src="";

2、不要在HTML中缩放图片

不要通过图片缩放来适应页面，如果需要小图片，就直接使用小图片。

3、使用小且可缓存的favicon.ico

不管服务器有还是没有网站图标文件favicon.ico，浏览器都会去尝试请求这个图标。所以要确保这个图标存在且尽量小，最好小于1k，并设置一个长的过期时间。

SEO优化

SEO简介

全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。

存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。

分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能做什么呢？

1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；

2. 网站内容优化：内容与关键字的对应，增加关键字的密度；

3. 在网站上合理设置Robot.txt文件；

4. 生成针对搜索引擎友好的网站地图；

5. 增加外部链接，到各个网站上宣传；

前端SEO

通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。

(1)网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

1. 控制首页链接数量

网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。

因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

2.扁平化的目录层次，

尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”–> “水果” --> “苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。

3.导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率

4. 网站的结构布局–不可忽略的细节

页面头部：logo及主导航，以及用户的信息。

页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。

页面底部：版权信息和友情链接。

特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

5.控制页面的大小，减少http请求，提高网站的加载速度。

一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

(2)网页代码优化

1.title标题
只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的标题中不要设置相同的内容。

2.标签：
关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

3.标签：
网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

4.中的标签：
尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，

标签是用来设置页面主导航的等。

5.标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el=“nofollow” 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

6.正文标题要用标签：“蜘蛛” 认为它最重要，若不喜欢的默认样式可以通过CSS设置。尽量做到正文标题用标签，副标题用标签, 而其它地方不应该随便乱用 h 标题标签。

7.标签：只用于文本内容的换行，比如:

　　 第一行文字内容

第二行文字内容

第三行文字内容

8.表格应该使用表格标题标签

9.应使用 “alt” 属性加以说明

10.、标签 : 需要强调时使用。标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，标签强调效果仅次于标签。

、标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

11、文本缩进不要使用特殊符号 &.nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

13.重要内容不要用JS输出，因为“蜘蛛”不认识

14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

15.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

16. 不断精简代码

17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。