web页面的性能优化以及SEO（搜索引擎优化）

Web页面的性能优化

研究表明：用户最满意的打开网页的时间是2-5秒，如果等待超过5秒，99%的用户会关掉页面。

一、尽量减少前端HTTP请求

 1，能使用icon不适用图片，实在避免不了要使用图片，就使用精灵图（雪碧图）

2，对图片进行压缩（一般网站的图片在200k到500k之间）尽量小于200k,

3，图片转base64

4, 使用静态资源缓存

5, 添加Expires头 a,页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。写法：Cache-Control： max-age=12345600

6， 精简代码

7，多使用外部文件，公共的js,css

8, 图片懒加载，资源按需加载，可以减少大量的的请求

浏览器并发线程数有限，所以针对资源文件的优化，一般有：

1、 合并脚本文件和CSS文件
2、 CSS Sprites利用CSS background相关元素进行背景图绝对定位,把多个图片合成一个图片。

二、浏览器缓存

在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。
1、添加Expires头和Cache-Control
Expires头，浏览器端根据过期时间选择是否加载最新的版本。缺点是：需要服务器和客户端时间的严格同步，
HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age制定组件被缓存多久，使用秒为单位，例如Cache-Control：max-age=3600；表示组件将被缓存60分钟。如果max-age和Expires同时出现，则max-age有更高的优先级，浏览器会根据max-age的时间来确认缓存过期时间。
2、Last-Modified
在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。

三、页面压缩

 

• 1、GZIP
  • IE和Firefox浏览器都支持GZIP解码。后端服务器容器对数据GZIP压缩之后在传输到客户端，浏览器拿到数据后根据 Content-Encoding：gzip 进行解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。对于纯文本来讲，压缩率是相当可观的。
• 2，HTML压缩
• 3，JS压缩 混淆
• 4，CSS压缩
• 5，图片压缩，展示尺寸和图片尺寸吻合

 

四、HTML代码结构优化

1，正确布置行内脚本

• 尽可能使用外部脚本和样式文件
• 脚本尽可能移到底部
• 脚本放在顶部带来的问题，
  1） 使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞
  2） 在下载脚本时会阻塞并行下载
  放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。所以要综合考虑情况。
• Script延迟加载 defer属性(IE & FF3.1+)、setTimeout
• 风险：行内(内联)脚本在样式表后面。
  所有主流浏览器都会保持CSS和JavaScript的顺序。在样式表完全下载、解析及应用之后，内联脚本才能执行。同时，必须在内联脚本执行后，剩余资源才能下载。
  CSS的下载解析可以和其他资源并发执行。

2，少用iframe

       优点：可以和主页面并行加载
       缺点： iframe会阻塞onload事件 解决：onload事件后设置iframe的src，或者JS创建iframe节点和主页面使用同一个连         接池
       避免src为空—为空默认为主页面地址

       减少iframe数量，或者不要使用iframe因为爬虫不会爬取iframe里边的内容

3，减少DOM结构的层级
      DOM层级越深会增加 CSS rule Tree 和 Dom Tree 匹配构造的性能
4，减少Cookie的大小

5，尽量用div取代table，或者将table打破成嵌套层次深的结构
table会影响页面呈现的速度，只有table里的内容全部加载完才会显示。

五、组件分成多个域

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，建议采用2个子域名。

减少DNS查找：

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

SEO：

全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。 存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。 简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。

一，网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

1,控制首页链接数量

2,扁平化的目录层次

3,导航优化

4,网站的结构布局--不可忽略的细节

5,控制页面的大小，减少http请求，提高网站的加载速度