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这样的内联的样式和事件，注意结构与表现、行为的分离。

好处

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

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. 懒加载 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的父元素。 #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 选择器性能。

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

SEO优化

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