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

最新推荐文章于 2024-04-21 08:37:16 发布

weixin_34161029

最新推荐文章于 2024-04-21 08:37:16 发布

阅读量193

点赞数

原文链接：https://my.oschina.net/u/3298482/blog/1535663

版权

2019独角兽企业重金招聘Python工程师标准>>>

本系列文章主要介绍在前端开发过程中，如何对网页资源、请求响应等前端开发过程和实践中会经历的事务进行不同层面的优化。本文主要参考的书籍有《高性能网站建设指南》、《高性能网站建设进阶指南》两本书籍（非常实用，值得一买），笔者本人阅读的是电子书，需要的朋友可以私信我，我分享给你
在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的偏移量

以下是示例代码：

#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>

下面两幅图是比较不同的代码对于页面的性能效果
forum.php?mod=attachment&aid=MjM2NHxmYTUwNjBiM3wxNTA0NzU5NzI1fDc2NXwyNTUx&noupdate=yes
使用图片地图

无图片地图

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的效果比较

forum.php?mod=attachment&aid=MjM2M3xiZGVlNjcxZnwxNTA0NzU5NzI1fDc2NXwyNTUx&noupdate=yes

data:url

forum.php?mod=attachment&aid=MjM2MnwyMDFkZTNhM3wxNTA0NzU5NzI1fDc2NXwyNTUx&noupdate=yes

原生background

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

4、合并脚本和样式表

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

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

forum.php?mod=attachment&aid=MjM2NnxiMmI4YTJmZnwxNTA0NzU5NzI1fDc2NXwyNTUx&noupdate=yes

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

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

forum.php?mod=attachment&aid=MjM2N3w1YzE3NjA5NXwxNTA0NzU5NzI1fDc2NXwyNTUx&noupdate=yes
chrome下载页面

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