文档章节

前端进阶篇——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
粉丝 4
博文 52
码字总数 48520
作品 0
ELSE 技术周刊(2017.12.18期)

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

风清洋ELSE
2017/12/18
0
0
C#进阶系列——WebApi 接口参数不再困惑:传参详解

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

杰克.陈
2017/12/19
0
0
前段优化——雅虎的14条优化规则

Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上。  web性能对于用户体验有及其重要的影响,根据著名的原则: 当用户在2秒以...

凡尘里的一根葱
2015/09/12
44
0
JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

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

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

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

彭博
2012/04/12
370
0

没有更多内容

加载失败,请刷新页面

加载更多

js的

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:forEach items="${topics}" var="item" varStatus="status"> </c:forEach> 注意 c:forEach E大写 varStatus ......

踏破铁鞋无觅处
22分钟前
0
0
带你走进java集合之ConcurrentHashMap

一、概述 上一篇文章《带你走进java集合之HashMap》分析了HashMap的实现原理,重点分析了HashMap是怎么样的一种数据结构,以及如何去插入,查询,扩容等操作。相信经过上一篇文章的学习,大家...

木木匠
23分钟前
0
0
spring-boot 热加载实现替换

参考资料 1、spring-boot 热加载实现替换

哎小艾
25分钟前
0
0
kotlin使用spring mvc(二)

使用FilterRegistrationBean注册Filter 使用WebFilter配置过滤器的缺点是不可以对过滤器进行排序,但是使用FilterRegistrationBean可以设置Filter执行的顺序 编写过滤器 class CustomFilter...

weidedong
26分钟前
0
0
Qt那些事0.0.5

碰到了中文乱码问题。 虽然是自己做了件令自己都不齿的事情,但是情急之下,暂且如此:将中文硬编码进代码中。 我也想通过tr+qm翻译进行转换,但是难过的是,tr之后,找不到或者不起作用。这...

Ev4n
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部