文档章节

前端进阶篇——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
博文 40
码字总数 37684
作品 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
nginx 进阶ssl、fastcgi

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

奋斗的阿Q
2017/02/08
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

以太坊总结

一、概念说明 1.以太坊(Ethereum blockchain)由V神(Vitalik Buterin)发明,是一个交易记录的永久数据库,它以一个“无信任”的交易系统来运行,不需要任何第三方信任机构即可进行点对点的...

盼望明天
26分钟前
1
0
Java并发工具类——AtomicInteger

基本类型int的递增等操作并不是线程安全的,加上synchronized又会影响性能,因此在并发情况下我们应该使用AtomicInteger,下面通过一个例子验证一哈。 public class TestAtomicInteger {...

东都大狼狗
28分钟前
1
0
基于CentOS7.2系统对RabbitMQ单机版安装过程

准备虚拟机系统 我的系统如下 系统版本7.2 安装perl yum install perl 安装wget工具 yum install -y wget 安装相关依赖工具 yum install ncurses ncurses-base ncurses-devel ncurses-libs ...

凌晨一点
32分钟前
1
0
Maven常用命令

Maven常用命令 说到命令,则不得不提一下环境变量,在之前的博文中简单提了一下环境变量的配置,这里具体说一下。说完环境变量的配置,然后就是Maven的常用命令,这里说的是常用的几个命令,...

星汉
49分钟前
0
0
Flink操作mysql kafka和hbase

主程序 package com.streaming.flink;import java.util.Properties;import org.apache.flink.api.common.functions.FlatMapFunction;import org.apache.flink.api.common.functi......

守望者之父
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部