文档章节

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

wlc534
 wlc534
发布于 2017/09/12 10:24
字数 1221
阅读 5
收藏 0
点赞 0
评论 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
博文 30
码字总数 30966
作品 0
C#进阶系列——WebApi 接口参数不再困惑:传参详解

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

杰克.陈 ⋅ 2017/12/19 ⋅ 0

ELSE 技术周刊(2017.12.18期)

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

风清洋ELSE ⋅ 2017/12/18 ⋅ 0

JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

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

晨曦之光 ⋅ 2012/05/21 ⋅ 0

JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

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

彭博 ⋅ 2012/04/12 ⋅ 0

前段优化——雅虎的14条优化规则

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

凡尘里的一根葱 ⋅ 2015/09/12 ⋅ 0

nginx 进阶ssl、fastcgi

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

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

JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

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

长平狐 ⋅ 2012/12/10 ⋅ 0

无需Flash录视频——HTML5中级进阶

视频采集 本篇介绍的栗子 都是在chrome 47 版本以上的,低版本的可能会出现白屏和错误。 1.安全环境 随着Chrome版本的升高,安全性问题也越来越被重视,较新版本的Chrome浏览器在调用一些API...

力谱宿云 ⋅ 2016/10/13 ⋅ 0

2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方 ⋅ 2017/12/14 ⋅ 0

Fiddler 抓包高级进阶篇-天罗地网抓包大法

阅读本篇内容之前,建议先对基础熟悉下 本文内容纲要如下 喜欢的话关注收藏评论转发比心么么哒!Python学习交流719-139-688内有大量的项目开发和新手教学视频PDF书籍的千人大群等着你来加入 ...

雁横 ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 46分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部