web前端优化

Web前端页面性能优化以及SEO优化

前端优化的目的是什么?

1，从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2，从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的源。

前端的页面主要包括xhtml，css，js。其中xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash，视频等。

tips：
XHTML与HTML之间的差异：html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。
最主要的不同：XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

xhtml的优化

结构语义化

结构包括head和body两个部分，结构语义化主要是body中的标签。
head中其实包括了一些对于我们seo很有用的一些东西，比如title,Description,Keywords，设置缓存等一些其他的信息。
结构中尽量不要出现style和onclick这样的内联的样式和事件，注意结构与表现、行为的分离。

好处

有利于SEO，易于被搜索引擎抓取，有利于推广；
便于团队开发和维护；
方便盲人阅读器、屏幕阅读器等等设备来解析；
在页面没有css或者css还未加载出来的时候，页面也能呈现出很好的结构，如图片的alt属性；
遵循分离结构和表现原则；

css和js 优化

使用外部 JavaScript 和 CSS；
削减 JavaScript 和 CSS；
css文件放置在head，js放置在文档尾部；
图片文件优化：

1. css sprite：如果网页中使用了大量背景图片，那么这些图片每一张都会发送一个http请求，可以使用css sprite来合并网页中的需要频繁加载的多个图片。对于合并之后的图片，我们需要注意对它图片质量和大小的优化，图片越小加载速度越快。（建议使用PNG8格式的图片结合css sprite，同样的图片，PNG8格式会相对来比GIF小）； 
2. 不要在HTML中缩放图像（要不是图片太大谁会缩放啊）；
3. favicon.ico （浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。）要小而且可缓存；
4. 懒加载

多个合并为一个：可以用一个大的css文件来合并多个小的css文件，浏览器在请求每一个css文件时都会发送一个http请求。
sass；
减少DOM访问；
用 link代替 @import；
减小Cookie体积，对于页面内容使用无coockie域名；
利用多个域名来存储网站资源：可以节约cookie带宽。节约主域名的连接数，优化页面响应速度；
利用缓存：Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。
css选择器优化：浏览器以从右到左的方式进行匹配；

#box a{color:#f00};  
//浏览器先遍历页面中所有的 a 元素，然后再找id为box的父元素。

Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序：

1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover, li:nth-child）

根据以上「选择器匹配」与「选择器执行效率」原则，我们可以通过避免不恰当的使用，提升 CSS 选择器性能。

避免使用通用选择器；
.box *{color:#f00;}
浏览器匹配文档中所有的元素后分别向上逐级匹配class为box的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。
避免使用标签或 class 选择器限制 id 选择器；
避免使用标签限制 class 选择器；
避免使用多层标签选择器。使用 class 选择器替换，减少css查找；
避免使用子选择器；
使用继承；

SEO优化

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