简要：对于影响页面呈选 的因素有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. 解决Myeclipse启动Spring Boot项目报出莫名异常

    有时候明明代码.配置都是正确的,但是一启动却报出莫名其妙的异常. 主要原因是resource包下的xml.yml文件或者其他配置文件路径不正确,解决方法如下: 第一步. 第二步.如果Excluded不 ...

  2. zabbix通过简单shell命令监控elasticsearch集群状态

    简单命令监控elasticsearch集群状态 原理: 使用curl命令模拟访问任意一个es节点可以反馈的集群状态,集群的状态需要为green curl -sXGET http://serverip: ...

  3. python在windows下安装

    打开python官方网站:https://www.python.org/downloads/ 点击下载 翻到底下的file目录下 选择对应的32,64位系统进行安装 一般来说选择Windows x86 ...

  4. python接口自动化测试二：常用操作

    url = '接口地址' r = requests.get(url)                      # 发送get请求 print(r.status_code)               ...

  5. 2018-2019 2 20165203 《网络对抗技术》 Exp4 恶意代码分析

    2018-2019 2 20165203 <网络对抗技术> Exp4 恶意代码分析 实验要求 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp ...

  6. C#4.0特性

    C# 4.0的主要主题是动态编程.对象的意义变得越来越“动态”,它们的结构和行为无法通过静态类型来捕获,或者至少编译器在编译程序时无法得知对象的结构和行为. a. 来自动态编程语言——如Python或 ...

  7. 【深度探索C++对象模型 | 02】构造函数语意学

    默认构造函数的构造操作.拷贝构造函数额构造操作  注意:默认构造函数和拷贝构造函数在必要时的时候由编译器产生出来. 参考资料 关于默认构造函数的几个错误认识(四种情况下,编译器会生成默认构造函数)

  8. IntentService用法

    IntentService 用完即走     IntentService,可以看做是Service和HandlerThread的结合体,在完成了使命之后会自动停止,适合需要在工作线程处理UI无关任务的 ...

  9. poj 1751 输出MST中新加入的边

    给出结点的坐标 以及已建好的边 要输出MST中加入的边(已建好的边就不用输出了)结点的编号从1开始注意这题只有一组数据 不能用多组输入 否则就超时(在这被坑惨了Orz) Sample Input 91 ...

  10. JDK的get请求方式

    package com.example.wang.testapp3; import android.app.ProgressDialog; import android.os.Bundle; impo ...