前端性能优化第一篇-http请求

原创 2018年04月15日 22:12:43

前端性能优化第一篇-http请求

本系列文章是我在阅读《高性能网站架设指南》时的读书笔记,文章的顺序基本和书的顺序是相同的,同时由于这本书的出版时间比较早了,我会根据现代前端的发展变化做出备注。

http请求是提升性能的一个重要方面,我们可以在打开一个网站的时候打开开发者工具的时候看看发生的请求(如果你正在看这篇文章,不妨打开开发者工具,然后看看network,刷新页面),这是就能发现,在一个页面呈现的过程中进行了大量的数据请求,比如样式表,脚本,当然也包括引用的类库和框架
注:现在可以通过前端构建工具,比如webpack等,进行构建,可以大大减少这些消耗

策略一:ImageMap

描述

这是一种取代多个图片链接的方法。

我们都知道如果我们在页面上呈现多个图片就要进行多次请求。如果这几个图片刚好能够排列在一起,将这些内容拼接成一个大图片,然后在不同区域绑定事件。

实现方法

需要三种不同的标签<img><map><area>

  • <img>标签用来设定图片的内容
  • <map> 标签用来和图片进行映射,要在<img>中添加usemap属性来建立这个链接
  • <area>标签用来规定成为热点的区域

一个小栗子(来自MDN,如果想看到效果,
)~

<map name="primary">
  <area shape="circle" coords="75,75,75" href="left.html">
  <area shape="circle" coords="275,75,75" href="right.html">
</map>
<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic">

参考MDN

策略二:图片sprites

描述

除了直接使用<img>标签引用图片之外,CSS中我们使用的图片同样会造成请求和载入,不妨看看这个页面上有多少图标,点赞,评论,分享等等,不胜枚举。
如果没一个图标都进行一次请求的话,页面的速度可想而知。所以我们换一个策略:将同种类的小图标放置在同一个图片中,然后通过background-sizebackground-position属性来得到合适的图标。

栗子~

 某个练手项目中使用的素材

策略三:内联图片

描述

传统的插入图片方式是这样滴:<img src="http://我也不知道写点什么好">,这样需要进行一次请求来的得到数据。

但是对于一个小小的图片,请求一次性价比不高,又没法应用上面提到的第二项的时候哦,我们可以尝试用内联图片:将图片作为数据直接写到页面的静态内容中。这种方法的优点是减少了请求次数,缺点是增加了第一次请求的大小,浏览器不能缓存这张图片,并且图片的大小有了限制

栗子

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

参考html img Src base64 图片显示

策略四:合并脚本和样式表

描述

在前端为了工程化和模块化,我们往往要将不同的功能模块放到不同的文件中,来保证可读性和可维护性。但是一个页面中有十几个css引用和script显然是不现实的。
解决方案就是在将他们合并到一个文件中,这是要尤其注意变量污染之类的问题。同时当文件A,B,C,D合并为X之后,引用X的这个页面只需要A和B的功能,,这样反而造成了冗余。
在现代我们有了更好的解决方案,通过一些构建工具进行自动化构建,可以解决这个问题~

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_39457740/article/details/79954205

前端性能优化十四个规则:

HTTP是一种客户端/服务器协议,由请求和响应构成。浏览器向一个特定的URL发送HTTP请求,URL对应的宿主服务器发回HTTP响应。该协议使用简单的纯文本格式。请求的类型有GET、POST、HEAD...
  • lysunnyrain
  • lysunnyrain
  • 2016-04-05 21:47:28
  • 7064

前端性能优化之http请求的过程

在前端面试中,经常会被问到“一个页面从输入URL到页面加载显示完成,这个过程都发生了什么”,这是前端的经典面试题之一。这个过程涉及的东西很多,区分度很高。大致分为这几个过程:1.DNS解析2.TCP连...
  • Maxbyzhou
  • Maxbyzhou
  • 2017-10-28 17:17:35
  • 246

浅谈前端性能优化(五)——减少HTTP请求数

1、图片地图 图片地图允许在一个图片上关联多个URL,目标URL取决于用户单击的图片上的位置。 1) 优点: 把多张图片整合到一张图片中,虽然文件的总体大小不变,但可以减少HTTP请求数。 2) 使用...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-05-07 16:00:18
  • 1584

前端性能优化方法总结

前端性能优化(一) 前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,...
  • w2326ice
  • w2326ice
  • 2017-03-20 10:25:37
  • 5206

提高web性能之--添加expires头

页面包含了大量的组件,可以使用expires头将组件缓存下来 web服务器使用expires头告诉web客户端它使用一个组件的当前副本,直到制定的时间为止。 但是expires严格要求客户端和服务...
  • lidaweihgy
  • lidaweihgy
  • 2013-04-02 21:53:47
  • 332

前端性能优化 - 请求

此篇博客主要记录学习到的关于服务器请求部分的性能优化,并随时更新。
  • qq451354
  • qq451354
  • 2017-03-06 17:14:47
  • 339

移动h5前端性能优化指南

  • 2017年01月09日 08:27
  • 73KB
  • 下载

前端性能优化-雅虎军规35条

1、尽量减少HTTP请求个数——须权衡 合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。 2、使用CDN(内容分发网络)...
  • shjavadown
  • shjavadown
  • 2016-04-14 22:44:08
  • 1551

Web 前端性能优化思路与学习方法

  • 2017年11月06日 16:30
  • 7.9MB
  • 下载

移动H5前端性能优化指南(网上整理)

PC优化手段在手机端同样适用,在手机端提出3秒钟渲染完成首屏指标,首屏加载3秒完成或使用Loading,基于联通3G网络平均338KB(2.71Mb/s),所以首屏资源不应该超过1014KB;手机端因...
  • css_styles
  • css_styles
  • 2016-05-24 10:46:12
  • 505
收藏助手
不良信息举报
您举报文章:前端性能优化第一篇-http请求
举报原因:
原因补充:

(最多只允许输入30个字)