文档章节

前端进阶篇——01、减少HTTP请求

wlc534
 wlc534
发布于 2017/09/12 10:24
字数 1221
阅读 5
收藏 0

本系列文章主要介绍在前端开发过程中,如何对网页资源、请求响应等前端开发过程和实践中会经历的事务进行不同层面的优化。本文主要参考的书籍有《高性能网站建设指南》、《高性能网站建设进阶指南》两本书籍(非常实用,值得一买),笔者本人阅读的是电子书,需要的朋友可以私信我,我分享给你
在web开发中,最直观的操作和展示都是在浏览器载入的过程中,
至少有80%的时间花在了显示Web页面上,并且这些时间是花在html文档下载完毕后发生的。


与之相对应的规则就是:减少HTTP请求。(由于笔者接触HTTPS较少,所以只能暂时介绍HTTP)

(本文中所进行的性能操作比较都是通过Google Chrome Developer Console的工具)

1、图片地图:

在一个图片上关联多个url,目标url的选择取决于用户点击了图片上的哪个位置。

   图片地图有两种类型:服务器端图片地图(将所有点击提交到同一个目标url,向其传递用户点击的x,y坐标。Web应用程序将该x,y坐标映射为适当的操作)和客户端图片地图(将用户的点击映射到一个操作)。映射通过html的map标签实现。

   缺点:在定义图片地图上的区域坐标时,如果采用手工的方式则很难完成且容易出错,而且除了矩形意外无法定义其他星座。通过dhtml创建的图片地图则在ie中无法工作。

所以图片地图在我PA系中估计很难存活。。。所以我就没有在这一方法上作死。。。

 

2、CSS Sprites:

使用同一个背景图片,然而每个元素有一个不同的类,通过background-position属性指定了CSS Sprites的偏移量

以下是示例代码:

 

<style type="text/css">

   #navbar span {

       width: 31px;

       height: 31px;

       display: inline;

       float:left;

       background-image: url(/img/sprite.gif);

    }

   .home {background-position: 0 0; margin-right: 4px; margin-left: 4px;}

   .gifts {background-position: -32px 0; margin-right: 4px;}

   .cart {background-position: -64px 0; margin-right: 4px;}

   .settings {background-position: -96px 0; margin-right: 4px;}

   .help {background-position: -128px 0; margin-right: 0;}

</style>

<div id="navbar"style="background-color: #F4F5EB; border: 2px ridge #333; width:180px;height: 32px; padding: 4px 0 4px 0">

   <a href="javascript:alert('Home')"><spanclass="home"></span></a>

   <a href="javascript:alert('Gifts')"><spanclass="gifts"></span></a>

   <a href="javascript:alert('Cart')"><spanclass="cart"></span></a>

   <a href="javascript:alert('Settings')"><spanclass="settings"></span></a>

   <a href="javascript:alert('Help')"><spanclass="help"></span></a>

</div>


下面两幅图是比较不同的代码对于页面的性能效果
 
使用图片地图


 
无图片地图

 

3、内联图片


 

这种方式比较简单粗暴,

data:[<mediatype>][;base64],<data>

通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的http请求。IE还不支持。同时可能存在数据大小上的限制。

由于data:URL是内联在页面中的,在跨越不同页面时不会被缓存,所以不要去内联公司logo

这里给需要实践的朋友一个在线的图片文件转Base64地址:http://imgbase64.duoshitong.com/

下面是使用data:URL方式和原生backgroud的两种语法代码

data:URL

body {
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAlgCWAA...(省略));

}

 

background原生

body {  
    background: url(images/logo.jpg) top center no-repeat;
    background-size:cover;
  }

 

下面两幅图是使用data:url和原生background的效果比较

 

data:url

 

原生background


 

在CSS样式表代码中直接嵌入数据的确可以优化实现速度,但是对于图片的显示效果还需提升,这里的建议是:在转化成BASE64前先把图片自行修改

 

4、合并脚本和样式表

这种方法应该有前端开发经验的都被领导要求过。。。。我就不多说了


 

最后,再提一种前端开发时的网络环境监控测试不同性能,前端开发的新人可能不太了解,在这里给大家介绍一下

 

在谷歌浏览器的开发者选项中,也存在着自主选择网络环境条件的选择,在开发过程中,可以更好地帮助开发人员进行真实场景的模拟





本篇文章到了这里就基本结束了,下面是我个人的一个兴趣想法,欢迎各位前辈和我交流
google chrome浏览器本身有许多可访问的url,如下载、设置等
对应的url就是chrome://downloads/这一类的,其实谷歌本身的下载、设置等界面也都是由前端所开发的,如下图

 
chrome下载页面

我欢迎有感兴趣的小伙伴和我一起分享chrome自身的代码和工具,本文中仅分享部分我收集下来的css样式

© 著作权归作者所有

共有 人打赏支持
wlc534
粉丝 6
博文 84
码字总数 143947
作品 0
私信 提问
C#进阶系列——WebApi 接口参数不再困惑:传参详解

原文:C#进阶系列——WebApi 接口参数不再困惑:传参详解 前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料。如今,使用WebApi也有段时间了,今天就记录下API接口传...

杰克.陈
2017/12/19
0
0
ELSE 技术周刊(2017.12.18期)

业界动态 他们写的代码能上天!NASA的10条安全编码准则大公开 NASA的10条代码编写规范准则 本期推荐 Node.js 中遇到含空格 URL 的神奇“Bug”——小范围深入 HTTP 协议 本文阐述了博主遇到含...

风清洋ELSE
2017/12/18
0
0
JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

本文先介绍如何为apache配置多域名,然后再用JSONP(JSON with Padding)来解决JSON的跨域问题。 阅读本文之前,推荐先参阅《JSON进阶第二篇AJAX方式传递JSON数据》。 一.apache配置多域名 在...

晨曦之光
2012/05/21
256
0
JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

本文先介绍如何为apache配置多域名,然后再用JSONP(JSON with Padding)来解决JSON的跨域问题。 阅读本文之前,推荐先参阅《JSON进阶第二篇AJAX方式传递JSON数据》。 一.apache配置多域名 在...

彭博
2012/04/12
413
0
nginx 进阶ssl、fastcgi

一、配置https网站 1、自建CA (下面是我们自建ca的步骤,线上情况我们需要购买ca证书,才能被认证) (1)生成私钥文件 mkdir -p /etc/pki/CA/private #创建私钥保存的目录 (umask 077;ope...

奋斗的阿Q
2017/02/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Centos 7 JDK、Tomcat9 安装并配置

Centos 7 JDK、Tomcat9 安装并配置 2017年04月17日 22:44:36 我是一座离岛 阅读数:5707更多 个人分类: webCentOS 版权声明:博主原创文章,转载请注明出处。 https://blog.csdn.net/ngl272...

linjin200
15分钟前
1
0
Spring boot遇到的问题

2018年12月11日 Ver:2.0.2升级到2.1.1文件上传遇到问题 The method setMaxFileSize(String) from the type MultipartConfigFactory is deprecated 是不是就不用设置了?...

夏碌冬藏
15分钟前
1
0
Spark sql操作Hive

这里说的是最简便的方法,通过Spark sql直接操作hive。前提是hive-site.xml等配置文件已经在Spark集群配置好。 val logger = LoggerFactory.getLogger(SevsSpark4.getClass) def main(args:...

守望者之父
16分钟前
1
0
炫酷粒子表白 | 听说女神都想谈恋爱了!

最近听女神说想谈恋爱了,✧(≖ ◡ ≖) 嘿嘿,一定不能放过这个机会,给她来个不一样的表白。 那么咱们就一起来把这个粒子系统玩出花来吧 演示地址: https://es2049.studio/work-show/text...

我的卡
17分钟前
2
0
Spark Streaming管理Kafka偏移量

前言 为了让Spark Streaming消费kafka的数据不丢数据,可以创建Kafka Direct DStream,由Spark Streaming自己管理offset,并不是存到zookeeper。启用Spark Streaming的 checkpoints是存储偏移...

架构师springboot
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部