web页面的性能优化以及seo

为什么要性能优化？

1、加快页面的展示速度（提高用户的体验性）

2、节约服务器宽带流量

3、减少服务器压力

web页面的性能优化

　一、页面级优化

1. 减少 HTTP请求数

每个请求都是有成本的，既包含时间成本也包含资源成本。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 )，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间。

(1). 从设计实现层面简化页面
　　保持页面简洁、减少资源的使用时最直接的

(2). 合理设置 HTTP缓存
　　缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。

       怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。

(3). 资源合并与压缩
　　尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

(4). CSS Sprites（css精灵）
　　合并 CSS图片，减少请求数的又一个好办法。

2. 将外部脚本置底

将脚本内容在页面信息内容加载后再加载

3. 将 CSS放在 HEAD中

如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

4. 异步请求 Callback

将一些行为样式提取出来，慢慢的加载信息的内容
在某些页面中可能存在这样一种需求，需要使用 script标签来异步的请求数据
 

5. 减少不必要的 HTTP跳转
　　对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/'，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。

6. 避免重复的资源请求
　　这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求

7.精简Javascript和CSS

精简（压缩）就是将Javascript或CSS中的空格和注释全去掉

8.使用CDN
或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

SEO

SEO（Search Engine Optimization）：搜索引擎优化。

通过了解各类搜索引擎 抓取互联网页面、进行索引以及确定其对特定关键词搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售或宣传的效果。

前端SEO优化主要从两个方面入手：网站结构布局优化和页面代码优化

网站结构布局优化

最主要的要求就是网站结构层次结构要少，最好的是扁平化的网站结构设计。 
1. 控制首页的链接。网站首页的链接最好在100个以内。 
2. 网站结构扁平化铺开，最好是三层到底。结构大概是首页-分类页-详细页。 
3. 导航设置。建议导航多设置几个，导航不止能在头部，也可以在底部，还可以在中间。导航还可以设置成主导航-副导航结构。除了文字导航外还可以设置图片导航，但是图片一定要设置其title和alt属性。
当然还有分页的问题：选择一个好的分页格式有助于用户的体验。 
4. 保证网页的加载速度。单页大小最好不要超过100K。 

页面代码优化

一、清理垃圾代码

清理垃圾代码是指删除页面中的冗余代码，可以删除80%的冗余代码。

垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。 最常见的垃圾代码，空格 空格字符是网页中最常见的垃圾代码。空格字符最常出现 在代码的开始和结束处，还有就是空行中。 这些都是容易产生垃圾代码的地方。消除这样的垃圾代码的方法就是选中代码然后按shift+tab键左对齐。

二、HTML标签

1.在制作html页面的时候，进行优化的选择使用的标签。

2：表格，ur 等容器形式的标签

在编写html的时候：尽量使一个一个容器独立，如果要嵌套的时候，一定要使其清楚、简介。

3.图片ait标签

<img src="图片地址" alt="图片关键字"/> alt一定要写

4. 合理 target="_blank"

合理而不频繁使用target="_blank" 是能够在一定程度上位网站带来回旋流量和点击。同时，在细节上使用 target="_blank" ，可以增强网站整体用户体验。

三、CSS优化

1.  最利于seo优化的是 引用css文件

2.   良好的命名习惯 

代码缩写 CSS代码缩写可以提高你写代码的速度，精简你的代码量。

3.   利用CSS继承 如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量

4.   使用多重选择器 

你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。

 5.   适当的代码注释 

代码注释可以让别人更容易读懂你的代码且合理的组织代码注释，可使得结构更加清晰。

 
6.    使用外部样式表 

不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。

7.   避免使用CSS表达式

四、JS调用 

引用JS文件，引用外部地址的JS会影响打开网页的速度。