前端优化技术笔记

设备优化

1.在 Internet上域名与IP地址之间是一一对应的，域名很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工作称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。

2.通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，杭州的用户访问近杭州服务器上的内容，北京的访问近北京服务器上的内容。这样可以有效减少数据在网络上传输的时间，提高速度。

内容优化

只有10%-20%的最终用户响应时间花在了下载html文档上, 其余80%-90%时间花在了下载页面的相关组件上。

减少HTTP请求数目

---- 由于每次请求都会消耗TCP三次握手时间， 如果能够减少请求的次数，则能提高响应和时间。

1、合并文件 -- 将多个CSS文件或Javascript文件合并成一个

2、地图图片 -- 在一个图像上划分不同区域映射不同的链接，这样不用将一副图片切割为多个图片。

3、内联图片（HTML5 data 作用到src属性中） -- 将图片在服务器端转换为文本，嵌入src属性中，让图像与文本一起下载和显示，浏览器端会将图片显示出来。

http://jingyan.baidu.com/article/8cdccae99bf04a315413cd0c.html?st=&net_type=&bd_page_type=1&os=&rst=

什么是内联图片。    内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为：data URI scheme。通常我们存储的图片在网页中需要写：<imgsrc="http://blog.xmaoseo.com/images /xmaoseo.jpg"/>而内联图片写法会是 <imgsrc="https://img-blog.csdnimg.cn/2022010613483045969.png" />

4、CSS Sprite ---利用 CSS background 相关元素进行背景图绝对定位

  工具：http://www.csssprites.com/ 这是个工具网站，它可以自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和gif的格式输出

 

利用缓存

1、直接使用缓存，不去服务器验证

在响应报文头中添加如下头域，可以保证浏览器端在规定时间内，访问相同资源都使用缓存。

 

Cache-Control: max-age=60 60秒之后缓存过期（相对时间）

Expires: Mon, 19 Nov 2012 08:40:01 GMT 缓存过期的时间（绝对时间）

 

 

按F5刷新浏览器和在地址栏里输入网址然后回车。 这两个行为是不一样的。

按F5刷新浏览器， 浏览器会去Web服务器验证缓存。

如果是在地址栏输入网址然后回车，浏览器会"直接使用有效的缓存", 而不会发http request 去服务器验证缓存，这种情况叫做缓存命中

 

2、缓存超期后，通过与服务器交互判断，资源的新鲜度，有可能还是使用缓存。

在响应报文头中添加如下头域：

Last-Modified: Mon, 19 Nov 2012 08:38:01 GMT	服务器端文件的最后修改时间
ETag: "20b1add7ec1cd1:0"	服务器端文件的Etag值

 

 

在缓存超期后， 浏览器重新发起条件请求，Web服务器通过2种方式来判断浏览器缓存是否是最新的。

第一种， 浏览器把缓存文件的最后修改时间通过 header ”If-Modified-Since“来告诉Web服务器。

第二种， 浏览器把缓存文件的ETag, 通过header "If-None-Match", 来告诉Web服务器。

如果客户端缓存还是新鲜的，则服务器告诉客户端，304 Not Modified， 则显示还是使用缓存。

 

来自：

http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html

 

减少文件大小 -- 工具

使用工具将 js 文件 压缩，大小缩减显著。

本工具 非网络上常见的简单的正则、字符串替换， 而是服务器后台调用行业界知名的几大压缩内核，内核模拟浏览器词法分析，压缩后的代码非常的安全稳定。

关于内核：

UglifyJS 是用 NodeJS 编写的 JavaScript 压缩工具，是目前最流行的JS压缩工具，JQuery 就是使用此工具压缩，UglifyJS 压缩率高，压缩选项多，并且具有优化代码，格式化代码功能，目前国内能提供UglifyJS压缩的都还处在1.0版本，本站率先升级到 2.0 时代。

YUI compressor 是Java编写的压缩工具，由雅虎发布，压缩是 100％ 的安全，比大多数其他工具有更高的压缩比， 一般代码的压缩率达到 40％ 至 60％，YUI compressor 也能够压缩CSS文件，国内互联网公司，阿里、淘宝、百度等都是采用 YUI compressor 内核压缩后发布代码。

JSPacker 由PHP编写的压缩工具，可以混淆代码保护知识产权，产生的代码兼容IE、FireFox等常用浏览器，国内大部分在线工具网站都采用这种算法压缩，只因为此算法采用PHP编写，正则表达式替换语句，没有语法分析内核，环境搭建成本低，压缩率上远不如以上两种内核，并且混淆代码页不符合开源精神。

JsMin 是用C语言编写的一个轻量级JS压缩器，去除JavaScript文件中的注释和不必要的空格。它通常减少了一半的文件大小，从而导致更快的下载速度。

对于其他压

 

减少文件大小 -- 编码

1.去除不必要的html标签：
a. <div><table>…</table></div>  è    <table>…</table>
b. &nbsp;   è  margin 或者 padding、letter-spacing

2.避免内联式样式：
<div style=‘color:Red’>…</div>  è  css style

3.CSS代码优化：
a.    .color1 {color:Red;}
       .color2 {color:Red;}          è .color1,.color2{color:Red;}

b.    .style1{  border-left:solid 1px #112233;

  border-right:solid 1px #112233 ;

  border-top:solid 1px #112233 ;

  border-bottom:solid 1px #112233 ;}

        è  .style1{border:solid 1px #112233;}

 

 样式表放在将顶部

css，全称Cascading Style Sheets (层叠样式表单)。层叠即意味这后面的css可以覆盖前面的css，级别高的css可以覆盖级别低的css。

既然前面的可以被覆盖，浏览器在他完全加载完毕之后再去渲染无疑也是合情合理的很多浏览器下，所以我们应该尽快让css加载完毕.

 

•IE 把样式表放在页面的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素，那用户只能看到空白页了。

•FIREFOX 不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题

 

将script放在底部

1、因为防止script脚本的执行阻塞页面的下载。

 

2、脚本引起的第二个问题是它阻塞并行下载数量。

避免重定向

页面的重定向会消耗一定的时间。

 

例： 当输入http://www.baidu.com的时候服务器会自动产生一个301服务器转向 http://www.baidu.com/

 

发生重定向的原因有很多，但是不变的是每增加一次重定向就会增加一次web请求，所以因该尽量减少

 

更多：

http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.html

http://kb.cnblogs.com/page/70525/

 https://developer.yahoo.com/performance/rules.html

 

备注： 大部分来自网上