高并发大流量专题---3、前端优化（减少HTTP请求次数）

一、总结

一句话总结：

图片地图：使用<map><area></area></map>标签。图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
CSS Sprites：SS Sprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。
合并脚本和样式表：使用外部的js和css文件引用的方式，因为这要比直接写在页面中性能要更好一点。把多个脚本合并为一个脚本，把多个样式表合并为一个样式表
图片使用Base64编码减少页面请求数：采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入

1、为什么要减少HTTP请求？

性能黄金法则：只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件（图片，script，css，flash等等）进行的HTTP请求上。
HTTP连接产生开销：域名解析--TCP连接--发送请求--等待--下载资源--解析时间

2、http1.1是Keep-Alive，为什么还需要减少HTTP请求？

HTTP1.1协议请求只能串行发送：HTTP1.1协议规定请求只能串行发送，也就是说一百个请求必须依次逐个发送，前面的一个请求完成才能开始下个请求
虽然不会花费tcp三次握手时间：但是本身是串行请求

3、已经有了DNS缓存，为什么我们还是要 减少HTTP请求？

查找DNS缓存也需要时间：多个缓存就要查找多次，也有可能缓存会被清除

4、减少HTTP请求的方式的本质？

减少组件的数量：改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。

5、减少HTTP请求的方式？

图片地图：使用<map><area></area></map>标签。图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
CSS Sprites：SS Sprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。
合并脚本和样式表：使用外部的js和css文件引用的方式，因为这要比直接写在页面中性能要更好一点。把多个脚本合并为一个脚本，把多个样式表合并为一个样式表
图片使用Base64编码减少页面请求数：采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入

6、backgroud-position属性 使用注意？

右下都是负

backgroud-position:x y；x和y可以写负值也可以写正值，我们可以想象图片的左上方为（0，0），以（0，0）坐标向右是为负数的x轴，以（0，0）坐标向下是为负数的y轴。

7、图片地图与CSS精灵 的优化的性能 的量级？

快50%以上：图片地图与CSS精灵的响应时间基本上相同，但比使用各自独立图片的方式要快50%以上

8、独立的一个js比用多个js文件组成的页面 性能量级？

快38%：独立的一个js比用多个js文件组成的页面载入要快38%

二、内容在总结中

 

高并发大流量专题---3、前端优化（减少HTTP请求次数）的更多相关文章

  1. 高并发大流量专题---10、MySQL数据库层的优化

    高并发大流量专题---10.MySQL数据库层的优化 一.总结 一句话总结: mysql先考虑做分布式缓存,过了缓存后就做mysql数据库层面的优化 1.mysql数据库层的优化的前面一层是什么? 数 ...

  2. 高并发大流量专题---11、Web服务器的负载均衡

    高并发大流量专题---11.Web服务器的负载均衡 一.总结 一句话总结: 推荐使用nginx七层(应用层)负载均衡的实现:配置那是相当的简单 http{ upstream cluster{ serv ...

  3. 高并发大流量专题---5、CDN加速

    高并发大流量专题---5.CDN加速 一.总结 一句话总结: CDN就是多整几台节点服务器,选距离用户最近的服务器来给用户服务,实现的话可以用阿里云.腾讯云他们提供的功能,简单方便,妈妈再也不用担心我 ...

  4. nodejs高并发大流量的设计实现,控制并发的三种方法

    nodejs高并发大流量的设计实现,控制并发的三种方法eventproxy.async.mapLimit.async.queue控制并发Node.js是建立在Google V8 JavaScript引 ...

  5. php解决与处理网站高并发 大流量访问的方法

    方法/步骤   首先,确认服务器硬件是否足够支持当前的流量 普通的P4服务器一般最多能支持每天10万独立IP,如果访问量比这个还要大, 那么必须首先配置一台更高性能的专用服务器才能解决问题 ,否则怎么 ...

  6. [原创]lvs+ospf+nginx实现高可用大流量web架构

    lvs+ospf+nginx实现高可用大流量web架构配置总概述 架构图: 配置如下: .quagga之zebra配置: # cat /etc/quagga/zebra.conf ! ! Zebra ...

  7. MySQL在大数据、高并发场景下的SQL语句优化和"最佳实践"

    本文主要针对中小型应用或网站,重点探讨日常程序开发中SQL语句的优化问题,所谓“大数据”.“高并发”仅针对中小型应用而言,专业的数据库运维大神请无视.以下实践为个人在实际开发工作中,针对相对“大数据” ...

  8. Java高并发情况下的锁机制优化

    本文主要讲并行优化的几种方式, 其结构如下: 锁优化 减少锁的持有时间 例如避免给整个方法加锁 1 public synchronized void syncMethod(){ 2 othercode ...

  9. Nginx高并发实现原理以及常用的优化手段

    Nginx 是如何实现高并发的? 异步,非阻塞,使用了epoll 和大量的底层代码优化. 如果一个server采用一个进程负责一个request的方式,那么进程数就是并发数.正常情况下,会有很多进程一 ...

随机推荐

  1. Ajax局部刷新（使用JS操作）

    对于在不使用Ajax的情况下,使用JS来进行局部刷新,主要有如下的几步: 1. 得到XMLHttpRequest 2. 使用open方法打开连接 3. 设置请求头信息 4. 注册onreadystat ...

  2. C++学习笔记（三）--数组、字符串

    1.数组,C++中不允许数组的下标值为变量,只能是常量或者常量表达式,必须先定义后使用.数组赋初值几种常见方式: int a[] = {1,2,3,4,5}: int a[4] = {2,1,3,4} ...

  3. SAP smartforms打印数据出框线或跟框线重叠，但是预览是正常的

    如图,打印内容压在框线上,但是打印预览是正常的 预览图如下,预览是正常的 预览用PDF!命令,导出PDF,也是正常的,就直接打印有问题,不是打印机的问题,用Adobe PDF打印机也是不行 如果只有一 ...

  4. linux下shell显示git当前分支

    function git-branch-name { git symbolic-ref HEAD 2>/dev/null | cut -d"/" -f 3 } functio ...

  5. from、includes、indexOf

    from.includes.indexOf:https://blog.csdn.net/j59580/article/details/53897630?utm_source=blogxgwz1 语法 ...

  6. 洛谷 P3374 【模板】树状数组 1（单点加，区间和）

    题目链接 https://www.luogu.org/problemnew/show/P3374 树状数组 树状数组最基本的就是求区间和. 维护: 空间复杂度:O(n) 时间复杂度(区间和,单点修改) ...

  7. C# form 传参数的几个方法

    方法一:传值最先想到的,Form2构造函数中接收一个string类型参数,即Form1中选中行的文本,将Form2的TextBox控件的Text设置为该string,即完成了Form1向Form2的传 ...

  8. zabbix4.0短信告警配置

    #!/usr/bin/env python3 import requests import sys #http://utf8.api.smschinese.cn/?Uid=USERNAME&K ...

  9. 如何查找django安装路径

    需要找到django的安装路径,官方说的那个方法不好用,国内搜索都是都不到的,后来谷歌搜到了很简单 import django django 这样就可以找django的安装路径了,真心不懂为什么国内都 ...

  10. C# 事务的创建，提交和回滚

    在C#中开启事务的步骤 01.调用SqlConnection对象的BeginTransaction()方法,创建一个SqlTransaction对象,标志事务开始. 02.将创建的SqlTransac ...