web性能优化&SEO

前言：探讨web性能优化方法，一直是前端开发者不懈努力的事情，获得总结的方法也很多，看了几位大牛的总结，特此与大家共同分享一下。

前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

 

web前端性能优化方法总结

一．html语义化

　　语义化的html是让标签做自己该做的事，便于其他开发者阅读以及使代码规范，优雅整洁。 也是为了网络爬虫更好的解析。

       问： 为什么要做到语义化呢？

1. 有利于SEO（是指从自然搜索结果获得网站流量的技术和过程），有利于搜索引擎爬虫更好的解析我们的网页，从而获取更多的有效信息，提升网页的权重。

2. 在没有css的时候能够清晰的看出网页的结构，增强可读性。

3. 团队合作中，语义化的html更能让其他开发人员理解和阅读，便于团队的代码维护与修改。

4. 支持多终端设备的浏览器渲染。

二．减少重复代码，压缩css，js代码大小

      1. 你的背景图片保证不超过3个以上，你的css文件不超过2个，js文件不超过3个。而且良好的遵守web标准的一些规定，css放到head中，js文件放到</body>之前或者之后。

三．背景图片大小及数量

1. 图片的大小可以压缩，尽量选择比较小的图片。

2. 可将多张图片用css精灵之城 css sprites

四．减少http请求，合理设置缓存

1. 合并css，js文件，减少css，js重复代码，合并图片等都是为了减少http请求，应为每次http请求的代价都是非常昂过的，所以减少http请求能有效优化访问性能。

2. 缓存能缓存得更多，缓存得更久，也是可以大大减少http请求，就优化了访问性能。

五．图片懒加载（lazyout images）

六．减少cookie传输

　　一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。　　

七．js中减少DOM操作，避免使用eval和 Function，减少作用域链查找（尽量把变量设为局部变量）。

八．CDN加速

CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据。

九．反向代理

1. 传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。

2.反向代理也可以实现负载均衡的功能，而通过负载均衡构建的应用集群可以提高系统总体处理能力，进而改善网站高并发情况下的性能。

 

SEO

SEO（Search Engine Optimization）：汉译为搜索引擎优化，是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

一、代码优化

合理地使用html标签，使标签语义化，为表现的内容使用合理的标签。

1.合理的使用h1-h6标签将提高搜索引擎对于关键字的权重。

2.主导航可以使用<nav>标签

3.对于<img>标签必须要为其设置title，和alt属性。title对图片说明，alt用于图片在未加载时进行替换。

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

5.对于想要强调重要的内容或信息可以使用<strong>标签，<em>标签仅次于<strong>。

二、外部优化

1.外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性；

2.外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升；

3.外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。