幽离知识库Appearance
SEO
SEO（搜索引擎优化）是一种通过自然搜索结果来增加网站流量的做法。SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。
SEO分为白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。
为什么要做SEO
提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善（潜在）用户体验，促进销售的作用。
搜索引擎基础
搜索引擎是用于查找和排名与用户搜索匹配的Web内容的工具。每个搜索引擎都包含两个主要部分：
- 搜索索引。有关网页信息的数字图书馆。
- 搜索算法。匹配搜索并进行排名的计算机程序。
搜索引擎旨在为用户提供最佳、最相关的结果，至少从理论上讲，这就是他们获取或维持市场份额的方式。搜索引擎具有两种类型的搜索结果：
- 自然排名结果。你无法付费获取。
- 付费排名结果。你可以付费获取。
用户点击付费搜索结果，广告商都会付钱给搜索引擎，这是点击付费（PPC）广告，这一定的刺激了搜索引擎优化搜索质量，进而提高搜索引擎的收入。
搜索引擎工作原理
在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。
一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。
前端SEO规范
网站结构布局优化
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬了。所以我们需要做到：
控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
扁平化的目录层次
尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处是从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
网站的结构布局
- 页面头部：logo及主导航，以及用户的信息。
- 页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
- 页面底部：版权信息和友情链接。
注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而“首页 下一页 尾页”这种写法是不推荐的。
利用布局，把重要内容HTML代码放在最前
搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。
控制页面的大小，减少http请求，提高网站的加载速度
一个页面最好不要超过100k，网页大小太大，页面加载速度慢。
网页代码优化
突出重要内容——合理的设计title（标题）、description（网页描述）和keywords（关键词）。
标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的标题中不要设置相同的内容。
关键词：列举出几个页面的重要关键字即可，切记过分堆砌。
网页描述：需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
HTML代码语义化
尽量让代码语义化，在适当的位置使用适当的标签，用适当的标签做适当的事情。如：h1~h6用于标题类的场景中。
页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如首页的logo上可以加h1标签。副标题用h2标签, 而其它地方不应该随便乱用 h 标题标签。
img标签应使用“alt”属性加以说明，表格应该使用caption表格标题标签，caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。br标签只用于文本内容的换行。
需要强调时使用strong标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，em标签强调效果仅次于strong标签；b、i标签：只是用于显示效果时使用，在SEO中不会起任何效果。
文本缩进不要使用特殊符号，应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法打出版权符号©。重要内容不要用JS输出，尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。谨慎使用 display：none。
前端网站性能优化概述
减少http请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态。对此，有三个解决方法：
- CSS Sprites图片合并
- 合并CSS和JavaScript文件
- 使用懒加载
控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。一般情况下都是CSS在头部，JS在底部。
尽量外链CSS和JS
保证网页代码的整洁，有利于后续的维护。
利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
减少重排（Reflow）
重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
减少 DOM 操作
图标使用IconFont替换
不使用CSS表达式，会影响效率
使用CDN网络缓存，加快用户访问速度，减轻服务器压力
启用GZIP压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大
伪静态设置
如果是动态网页，可以开启伪静态功能，让蜘蛛“误以为”这是静态网页，因为静态网页比较合蜘蛛的胃口，如果url中带有关键词效果更好。