Web页面性能优化以及SEO

为什么要提高web性能？

Web性能黄金准则：只有10%_{20%的最终用户响应时间花在了下载html文档上，其余的80%}90%时间花在了下载页面组件上。
　　
web性能对于用户体验有及其重要的影响，根据著名的2-5-8原则：

• 当用户在2秒以内得到响应，会感觉系统的响应非常快
• 当用户在2-5秒之内得到响应，会感觉系统的响应速度还可以
• 当用户在5-8秒之内得到响应，会感觉系统的响应非常慢，但还可以接受
• 当用户在8秒之后都没有得到响应，会感觉系统糟透了，甚至系统已经挂掉；要么打开竞争对手的网站，要么重新发起第二次请求

优化方法

1、减少HTTP请求基本原理

在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
　　
　　而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。
　　
　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。
　　
　　我们看一下百度首页中的http请求在各阶段耗费的时间，上面不同的颜色代表下图中的不同阶段

除了图片之外，其余大部分http请求的事件花在了建立连接与等待阶段。

http协议建立在TIC/IP协议之上，在TCP/IP协议中，TCP协议提供可靠的连接服务，采用三次握手建立一个连接。 简单来说三次握手就是一个身份确认的过程。

解决办法：

• 合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

• 减少脚本文件与样式表的请求
  　减少脚本与样式表的请求主要原则就是合并。在实际开发中我们遵循模块化的原则将代码分散到许多小文件中，按照软件开发的原则这是完全正确的，但对于上线页面来说，每一个文件都会产生一个http请求，严重影响性能。和css sprites一样，将这些小文件合并到一个文件中，可以减少http请求的数量并缩短最终用户响应时间。在合并过程中我们还需要使用工具精简（移除不必要的字符以减小文件大小缩减下载时间）和混淆（除了移除不必要字符外，还会改写源代码，比如函数和变量名使用更短的标量名）Javascript代码。对于采用AMD或CMD进行模块化开发的同学，在合并过程中通常会将依赖的其他模块打包到一个文件中，而模板html通常以字符串的方式内联到Javascript文件中。目前最常用的前端构建工具就是glup。

2、请减少对DOM的操作
基本原理：

对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
　　天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

解决办法：
　　修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

注：在IE中:hover会降低响应速度。

3、使用JSON格式来进行数据交换
基本原理：
　　JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
　　
　　与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

JS操作JSON：

在JSON中，有两种结构： 对象和数组。

一个对象以 “ { ” 开始，“ } ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值 对”之间使用 “ , ”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：

　var obj={"name":"darren","age":24,"location":"beijing"}

数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},　　
{"name":"weidong.nie","age":24,"location":"hunan"}];

对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。

4、高效使用HTML标签和CSS样式
基本原理：
　　HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
　　
　　CSS指层叠样式表 (Cascading Style Sheets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。
　　
　　一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的

HTML： 1
2
3 … 4
5
复制代码
或者这样的CSS:

body .box .border ul li p strong span{color:#000}
复制代码

以上都是对HTML和CSS非常糟糕的使用方法。
正确理解：

HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
　　CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：

ID选择符 #box

类选择符 .box

标签 div

伪类和伪元素 a:hover

当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

5、减少下载量
　　减少下载量最有效的方式就是开启gzip压缩，gzip是GNU开发的一种免费格式。压缩组件通过减小http响应的大小来加快响应速度。HTTP1.1通过使用Accept-Encoding来标识支持的压缩，如果服务器看到这个标识，会使用请求头中的一种方式来压缩响应。并通过Content-Encoding来通知web客户端。很多网站会压缩html文件，实际上包括xml跟json在内的任何文本都可以压缩，但图片和pdf不应该压缩。根据经验通常可以对大于1kb或2kb的文件进行压缩。压缩通常能将响应的数据量减少70%。压缩的成本在于：服务器需要耗费额外的cpu进行压缩，客户端需要解压缩。所以需要在cpu的消耗和数据块的大小之间进行取舍。

6、优化网络连接

网络连接的优化主要有三个规则：使用CDN加速、减少DNS查找、避免重定向
　　CDN：CDN是地理上分布的web server的集合，用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web server。 这缩短了资源的传输响应时间，有效提高web性能。
　　DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒。浏览器会首先根据页面的主机名进行域名解析，在有ISP返回结果之前页面不会加载任何内容，所以减少DNS查找可以有效降低等待时间。为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS Client Service），浏览器。IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。 我们能做的是尽量减少一个页面的主机名，但要在浏览器最大并行下载数跟dns查找之间做权衡。根据雅虎的研究，最好将主机名控制在2-4个内。
　　
　　重定向：将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状态码完成的，如： 　　
　　　　 HTTP/1.1 301 Moved Permanently
　　　　Location: http://example.com/newuri
　　　　Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。 种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，导致自动产生结尾斜线的原因是，浏览器在进行get请求是必须指定一些路径；如果没有路径它就会简单的使用文档根。（主机缺少结尾斜线是不会发生重定向：http://www.baidu.com）缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。

搜索引擎优化SEO

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
　　
主要工作
　　通过了解各类搜索引擎 抓取互联网页面、进行索引以及确定其对特定关键词搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售或宣传的效果。搜索引擎优化对于任何一家网站来说，要想在网站推广中取得成功，搜索引擎优化都是至为关键的一项任务。同时，随着搜索引擎不断变换它们的排名算法规则，每次算法上的改变都会让一些排名很好的网站在一夜之间名落孙山，而失去排名的直接后果就是失去了网站固有的可观访问量。所以不少商业网站都希望透过各种形式来干扰搜索引擎的排序。搜索引擎优化专家“一来胜”认为，在网站里尤以各种依靠广告为生的网站最甚。SEO技术被很多目光短浅的人，用一些SEO [2] 作弊的不正当手段，牺牲用户体验，一味迎合搜索引擎的缺陷，来提高排名，这种SEO方法是不可取的，最终也会受到用户的唾弃。
　　所以每次搜索引擎算法的改变，都会在网站之中引起不小的骚动和焦虑。我们可以说，搜索引擎优化也成了一个愈来愈复杂的任务。

搜索引擎优化
　一、内部优化
　　（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化；
　　（2）内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接；
　　（3）网站内容更新：每天保持站内的更新(主要是文章的更新等)。
　二、外部优化
　　（1）外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性；
　　（2）外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升；
　　（3）外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。

优化目的
　　1.随着网络的发展，网站的数量已经数以亿计，互联网上的信息量呈爆炸性增长，加大了人们寻找目标信息的难度，而搜索引擎的出现给人们寻找信息带来极大的便利，已经成为不可或缺的上网工具。
　　２.根据人们的使用习惯和心理，在搜索引擎中排名越靠前的网站，被点击的几率就越大，相反，排名越靠后，得到的搜索流量就越少。据统计，全球500强的公司中，有90%以上的公司在公司网站中导入了SEO技术。
　　3.一般的网络公司因缺乏专业的营销知识和理念，仅从技术的角度出发为您建造网站，美工只管将您的网站设计漂亮，程序员只管实现您要求的功能模块，这样做出来的网站是有缺陷的，不符合搜索引擎的收录要求，所以必须对网站进行全面的针对性优化。