简要：对于影响页面呈选 的因素有3个地方：服务器连接数据库并计算返回数据 ， http请求以及数据（文件）经过网络传输 ， 文件在浏览器中计算渲染呈选； 其中大约80%的时间都耗在了http请求上，所以要想大幅度优化页面，必须从http请求上入手

一：首先要认识页面中各个文件http请求耗时情况，这样我们才能知道整个响应过程中网络请求耗时情况，各个文件请求加载耗时情况对比和顺序，那些请求可以优先加载，那些可以合并加载等等。

chrome的timeLine是一个很好的http请求观测工具：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="bootstrap.min.css">

    <link rel="stylesheet" href="Common.css">

</head>

<body>

<div>

    <div style="height:100px;background-color: red"></div>

    <link rel="stylesheet" href="goodsinfor.css?version=201703311116">

    <div style="height:1000px;background-color: blue"></div>

    <img src="data:image/201703/aaecb9c0-a848-4632-8d2d-2d2ccb4c04dc-source.png" />

    <script src="vender/jquery.js?version=201703311116"></script>

    <div id="imgContent"></div>

    <script>

        $("#imgContent").append("<img src='https://imgsa.baidu.com/news/q%3D100/sign=93e66e1cde2a60595410e51a1836342d/7aec54e736d12f2e7bd12cb546c2d5628435680b.jpg' />");

    </script>

    <div style="height:1000px;background-color: orange">

        <img  src="data:image/201703/f89dfdcf-4602-4b4e-8c87-a5d37566fa8f-source.png"/>

    </div>

</div>

</body>

<script src="vender/bootstrap.min.js?version=201703311116"></script>

<script src="vender/require.min.js?version=201703311116"></script>

</html>

上面代码所反映的http请求情况如下图：

由图中可以看到：

先加载的index.html，接着css几乎同时并行请求加载（说明css的请求加载时有并行线程的），

<script>jquery.js</script> 放在<img>元素前面，jquery.js会先发起请求，这个时候其实并不会影响下面img，css，js文件发起请求，发起请求在浏览器中是有并行线程的

但jquery.js下面的div和img的渲染以及<script>的执行会被阻塞

图中灰色线框白色背景的叫做Queueing ,浏览器会把一系列请求先存放在队列中，然后有序的发起请求。

图中灰色横条叫做Stalled  ， 这个是指发起请求到建立TCP连接成功之间的耗时。

图中绿色横条代表Waiting，指等待服务器返回数据，浏览器接受到数据的耗时，这一段通常耗时是最大的

图中蓝色横条代表Content DownLoad，将内容下载下来所耗时间。

接下来是chrome里面的Timeline工具，这个工具非常强大，它能帮助我们分析从请求，到渲染，到绘制，最后在页面显示一系列动作的具体情况，对于前端优化作用非常大。

还是上面的代码。

这里我不在具体说明了，关于Network和timeline ，可以参考如下几篇文章：

http://www.cnblogs.com/ys-ys/p/5625409.html

http://www.jianshu.com/p/4da0f0bda768

http://www.cnblogs.com/cherryblossom/p/5502591.html

二：在认识了浏览器http请求后，以下是一些关于http请求的优化方案：

1：最简单的做法是减少http请求，

制作图片地图：允许一个图片关联多个url，即将多个图片合并为一个图片，如下导航栏demo：

<img usemap="#map1" border=0  src="/images/imagemap.gif?t=1196816255">

<map name="map1">

<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">

<area shape="rect" coords="36,0,66,31" href="gifs.html" title="Gifts">

<area shape="rect" coords="71,0,101,31" href="settings.html" title="Cart">

<area shape="rect" coords="106,0,136,31" href="help.html" title="Help">

</map>

但如上方法采取手工方式则很难完成且容易出错，而且除了矩形之外几乎无法定义其他形状，通过DHTML创建的图片地图在IE中无法工作。

CSS Sprites:还可通过css中的background-position来定位图片中的某一具体部分,它比图片地图更灵活，建议大家使用。

内联图片：通过使用data：URL数据形式可以替代http请求，甚至可以用于script和a标签中，其缺陷是Base64编码会增加图片的大小，并且嵌在网页中，会加大网页的数据量，

但它可以减少http网络请求耗时。这里提供图片生成dataurl数据的方法。

var can = document.createElement("canvas")；

var ctx = can.getContext("2d")；

img.onload = function(){

     ctx.drawImage(this, , , width, height);

    can.toDataURL();

}

2：合并脚步和样式表

对于前端工程师来说，javascript和css可以嵌入html文档中内联 ，还可以放入外部脚步样式表中，前者会增加文档大小，并且不符合低耦合的开发思路，使得代码较难维护，但

后者增加了http请求数，对于时间上来说会比较耗时，所以要根据实际情况来决定如何俩配合使用比较好。

可以将多个脚步合并为一个脚步，多个css文件合并为一个css文件，理想情况下：一个页面应该使用不多于一个的脚步和样式表。但这种将所有东西合并到一处的行为对于模块化编程思维来说是一种倒退，解决方法是遵守编译型语言的模式，开发模式下保持js文件的模块化，生成打包的时候生成一个目标文件部署到线上。

3:配置多个域名和CDN加速

通常浏览器对于一个域名的并发请求是有限的，比如：有100个文件要加载，但浏览器一次只可能并发请求10个文件，这样并发多次就会耗时。因此配置多个域名能够最大限度的增加并发请求量，

但这里有个缺点就是会增加浏览器域名解析的次数，这里建议利用CDN来加载不是经常更新和修改的静态资源（图片，css库，js第三方库等等）。一个是CDN域名一般都会缓存到本地中，另一个是CDN网络请求速度是非常快的。

由于CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。

参考连接：http://blog.csdn.net/mahoking/article/details/51472697

关于http请求还有很多，未完待续。。。    

前端性能优化 —— 减少HTTP请求的更多相关文章

  1. 前端性能优化-减少http请求，dns预解析，减少repaint和reflow

    前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...

  2. 前端性能优化---减少http请求数量和减少请求资源的大小

    减少http请求数量:就是资源的合并 减少http请求大小:就是资源的压缩   一.资源合并的原理:   资源不合并的缺点: 1.文件和文件之间有插入请求----请求a.js,b.js,c.js(三行 ...

  3. 515，前端性能优化--减少http请求（待补充）

    对于影响页面呈选的因素有三个地方:服务器连接数据库并计算返回数据,http请求以及数据(文件)经过网络传输,文件在浏览器中计算渲染呈选:其中大约80%的时间都消耗在了http的请求上,所以要想大幅度的 ...

  4. web性能优化--减少客户端请求数（一）

    多图标合并,用css分隔 设置较长时间的过期时间 合并多个css文件 合并多个js文件 根据域名划分内容 首先介绍一款速度测试工具:webpagetest(填上url,username,passwor ...

  5. Web前端性能优化教程01：减少Http请求

    性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...

  6. 前端性能优化成神之路—资源合并与压缩减少HTTP请求

    资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信 ...

  7. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  8. 前端性能优化 http请求的过程及潜在的优化点

    CS架构:比如我们的代码开发好,打包成apk,发布到平台,那么最终怎么运行到用户的手机上呢,用户首先需要从相关的应用商城下载这个apk包,并且运行这个 apk 包,那么这个 apk 包就会被解压,最后 ...

  9. Web前端性能优化教程06：减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

随机推荐

  1. 【转】#ifdef __cplusplus+extern "C"的用法

    时常看到别人的头文件中,有这样的代码: #ifdef __cplusplus extern "C" { #endif //一段代码 #ifdef __cplusplus } #en ...

  2. ajax post 传参数加引号和不加引号的区别

    1.前言 用ajax技术,type:post,data:参数列表.参数列表就是一个JSON数据,但key可以加引号,也可以不加引号,那总有区别的. 2.区别 var d2 = "two&qu ...

  3. OCM_第十五天课程：Section6 —》数据库性能调优 _SQL 访问建议 /SQL 性能分析器/配置基线模板/SQL 执行计划管理/实例限制

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

  4. 学习笔记(二)--->《Java 8编程官方参考教程（第9版）.pdf》:第七章到九章学习笔记

    注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...

  5. hdu1937 二维尺取

    /* 二维上的尺取,外层循环枚举j轴上的可能,内层在i轴上尺取即可 O(N^3) */ #include<iostream> #include<cstdio> #include ...

  6. HDU1536 S-Nim（sg函数变换规则）

    S-Nim Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  7. 支付宝回调JAVA版代码

    支付宝回调: 1 //这个是支付宝回调的信息 2 @RequestMapping("alipay_callback.do") 3 @ResponseBody 4 public Ob ...

  8. 使用vmware提示无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件

    问题描述 打开虚拟机时候提示 “vmware没有正常关闭,再次打开使用时蓝屏,在安全模式下再次打开不会蓝屏,但提示“无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件,你想要安 ...

  9. Hibernate api 之常见的类（配置类，会话工厂类，会话类）

    1:Configuration :配置管理类对象 1.1:config.configure(): 加载主配置文件的方法(hibernate.cfg.xml) ,默认加载src/hibernate.cf ...

  10. Linux与Windows中的UTC时间

    Linux与Windows中的UTC时间 先介绍几个术语 UTC 协调世界时,又称世界标准时间或世界协调时间,简称UTC(从英文“Coordinated Universal Time”/法文“Temp ...