web前端性能优化及seo

前言
作为前端工作者，从根本上来讲我们服务的是用户，用户体验直接决定了我们的工作价值。而提升用户体验最直接的办法就是对web页面进行性能优化。

讲优化之前我们先来看一下浏览器处理流程。

浏览器处理流程

当我们在浏览器的地址栏输入网址 ，然后回车，回车这一瞬间到看到页面到底发生了什么呢？

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户。

其中，域名解析和三次握手我们管不了，我们从http请求开始。

1.减少http请求

在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。

减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。相同网速下，下载一个100KB的图片比下载两个50KB的图片要快。所以，可以将图片进行整合。

其次，能不用小图标就不用，尽量用字体图标代替
阿里巴巴矢量图标库官网：http://iconfont.cn/

2.使用浏览器缓存

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

cache-control（缓存控制）及expires（过期时间）具体内容可点击链接查看https://blog.csdn.net/chen_fly2011/article/details/55253518

在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。

3.减少DOM操作

修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是罪恶的行为。 所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
举一个简单的例子:

//我希望在页面上输出 1-100
错误示范:
for(var i = 1;i≤100;i++){
	document.getElementById('p1').innerHTML += ' ' + i;
}

上面这段代码当然可以在页面上输出1-100的数字，但是注意，这里每次循环都会调用document.getElementById来访问DOM元素，那这里这个循环就访问了100次DOM。
简单修改一下：

var str = '';
for(var i = 1;i≤100;i++){
strs += ' ' + i;
}
document.getElementById('p1').innerHTML = str;

同样的效果，但是我们只访问了一次DOM，字符串的累积操作我们完全在JavaScript中做。

4.CSS选择符优化

我们中的大多数人都是从左向右进行阅读，而浏览器和我们不一样，在读取选择符时是从右往左进行读取。
比如#toc a{color:#444}这样的选择符开销则更大，浏览器不但要查找所有的a标签，还要遍历DOM树去查找ID为toc的祖先元素，如果被评估的连接不上toc的后代，那么浏览器就要向上一级继续遍历直到文档的根节点。

规则都知道了，我们就可以从另外一个角度看CSS选择符，并将其调整得更高效，前辈给我们留下了宝贵的几点建议：

一：避免使用通配规则，除了传统意义上的通配选择符之外，我们的前辈Hyatt也把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到“通配规则”分类下，他推荐仅适用ID、类和标签选择符。

二：不要限定ID选择符：在页面中一个指定的ID只能对应一个元素，所有没必要额外添加限定符，例如DIV#toc是没有必要的，应简化为#toc。

三：不要限定类选择符：不要用具体的标签限定类选择符，而是根据实际情况对类名进行扩展。例如把li.chapter改为.li-chapter，或是.list-chapter更好。

四：让规则越具体越好，不要试图编写像ol li a这样的长选择符，最好是创建一个像.list-link一样的类。

五：避免使用后代选择符，通常处理后代选择符的开销是最高的。遵循下条规则。

六：避免使用标签-子选择符，如果有像#toc > li > a这样的基于标签的子选择符，那么应该使用一个类来关联每个标签元素，如.toc-link。

七：质疑子选择符的所有用途，再次提醒大家检查所有使用子选择符的地方，然后尽可能用具体的类取代它们。

八（我觉得这条特别实际特别靠谱特别实用）：依靠继承，了解哪些属性可以通过继承而来，然后避免对这些属性重复指定规则。

CSS选择符优化内容具体可点击此链接
http://caibaojian.com/616.html

SEO

什么是SEO优化

当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。

在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容是它的语言，那么它便能看懂，它的语言即SEO。

SEO全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，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.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

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

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

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

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

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

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

<p>
　  第一行文字内容<br/>
    第二行文字内容<br/>
    第三行文字内容
</p>

8.表格应该使用<caption>表格标题标签

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

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

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

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

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

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

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

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

16. 不断精简代码

17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。
　 前端SEO技巧详情请点击
　　https://www.cnblogs.com/EnSnail/p/5671345.html