简要：对于影响页面呈选 的因素有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. ODOO引用Echarts数据展示

    作为一个后端开发,首先想到的是将需要的数据进行处理反馈给前端. 具体如下: 然后就是专门的echarts模块(我这样写主要是因为echarts会用到的地方比较多,后续直接调用) 1. 2.echart ...

  2. zabbix系列(十)zabbix添加对zookeeper集群的监控

    1.应用场景描述 在目前公司的业务中,有部分ESB架构用ZooKeeper作为协同服务的场景,做好ZooKeeper的监控很重要. 2.ZooKeeper监控要点 系统监控 内存使用量    ZooK ...

  3. Expm 7_1树中的最大独立集问题

    [问题描述] 给定一个无回路的无向图(即树),设计一个动态规划算法,求出该图的最大独立集,并输出该集合中的各个顶点值. package org.xiu68.exp.exp7; import java. ...

  4. js发送get 、post请求的方法简介

    POST请求: 发送的参数格式不同,请求头设置不同,具体参照 Http请求中请求头Content-Type讲解 发送的参数格式不同,后台获取方式也不相同 php请看 php获取POST数据的三种方法 ...

  5. OCM_第五天课程：Section2 —》AGENT 的安装 、GC 的使用

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

  6. JFreeChart入门

    JFreeChart主要用来各种各样的图表,这些图表包括:饼图.柱状图(普通柱状图以及堆栈柱状图).线图.区域图.分布图.混合图.甘特图以及一些仪表盘等等 (源代码下载) 示例程序运用的jar包: j ...

  7. JQUery利用Uploadify插件实现文件异步上传（十一）

    一:简介: Uploadify是JQuery的一个上传插件,实现的效果非常好,带进度显示 ,且Ajax异步,能一次性上传多个文件,功能强大,使用简单 1.支持单文件或多文件上传,可控制并发上传的文件数 ...

  8. spring配置redis注解缓存

    前几天在spring整合Redis的时候使用了手动的方式,也就是可以手动的向redis添加缓存与清除缓存,参考:http://www.cnblogs.com/qlqwjy/p/8562703.html ...

  9. 用SQL统计每分钟的访问量

    以前面试没有理解到它什么意思的一道题,回忆中是这个题意 ), to_char(r.datelastmaint, 'yyyy-mm-dd hh24:mi'), sum(abs(r.tranamt)) f ...

  10. python全栈开发day22-常用模块二（hashlib、configparse、logging）

    一.昨日内容回顾 1.钻石继承 #新式类,本身或父类显示继承object #找名字的时候是广度优先顺序 #有mro方法,super方法, # super并不是单纯的找父类,和mro顺序是完全对应的 # ...