前端性能优化-减少HTTP请求数

2024-05-10 14:13:56

1、图片地图

图片地图允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。

1) 优点：

把多张图片整合到一张图片中，虽然文件的总体大小不变，但可以减少HTTP请求数。

2) 使用条件：

只有在图片的所有组成部分在页面中是紧挨在一起时才能使用，如导航栏。

3) 缺点：

确定图片的坐标比较繁琐且易出错，同时使用图片地图导航也不具有可读性，因此不推荐使用图片地图。

4) 实例：

导航往往使用多个分开的图片，让每个图片对应一个超链接，这会产生多个HTTP请求。

图片地图将多个图片合并为一张图片，以位置定位超链接，把HTTP请求减少为一个。

<!DOCTYPE html>
<html><head><title></title></head><body><img src="data:images/img.jpg" usemap="#myMap"/><map name="myMap"><area shape="rect" coords="50,50,100,100" href="#" οnclick="return show('Rect!')"><area shape="circle" coords="240,240,40" href="#" οnclick="return show('Circle!')"></map><script>function show(shape){alert(shape);return false;}</script></body>
</html>

2、CSS Sprites

CSS Sprites，CSS精灵，合并图片，通过指定CSS的backgroud-image和backgroud-position来显示元素。

工具：CSS Sprite Generator，可以合并图片，还可以生成图片的CSS样式。

<!DOCTYPE html>
<html><head><title></title><style>.last{ background-image:url(images/img.png); background-position:0px 0px; width:20px; height:20px; }.next{ background-image:url(images/img.png); background-position:-20px 0px; width:20px; height:20px; }.last:hover{ background-position:0px -20px; }.next:hover{ background-position:-20px -20px; }</style></head><body><div><div class="last"></div><div class="next"></div></div></body>
</html>

3、合并JS脚本和CSS样式表

适当地把多个JS脚本合并为一个脚本，把多个CSS样式表合并为一个样式表。

4、使用外部JS和CSS文件

在用户不带缓存访问页面的时候，内联所有的js和css的效率更快，原因是外置js和css带来额外的http请求开销，1个http请求相对于3个http请求要更快一些。

其实，使用外部JS和CSS文件会产生更快的访问速度，这是由于外部JS和CSS文件能被浏览器缓存，当下次再请求相同的JS和CSS时，浏览器将不会再发出HTTP请求，而是使用缓存的JS和CSS文件，减少了HTTP请求数。

前端性能优化-减少HTTP请求数相关推荐

前端性能优化学习 05 请求和响应优化 01（DNS 解析、HTTP 长连接、HTTP2、避免重定向、压缩传输的数据资源）
请求和响应优化目的:更快的内容到达时间. 核心思路: 更好的连接传输效率更少的请求数量更小的资源大小合适的缓存策略最佳实践: 减少 DNS 查找:每次主机名的解析都需要一次网络往返,从而增加 ...
前端性能优化有哪些方法
1. 浏览器http请求并发前端如何优化减少网络请求数: 1) 配置304请求,提高请求速度(这属于后端配置) 2) 将图标合成雪碧图,减少图片数量,减少http请求数 3) 使用webpack合并 ...
前端性能优化、垃圾回收，闭包，跨域
目录前端性能优化减少HTTP请求使用服务器端渲染将 CSS 放在文件头部,JavaScript 文件放在底部更多使用异步编程 ES6新特性 let,const,var的区别以及箭头函数解构 ...
大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
笔试题http请求方式状态码布局多标签通信前端性能优化
企业前端面试题 QA 页面从输入 URL 到加载显示完成,过程发生什么前端性能优化 1.加载优化 2. 图片优化 3.css优化 4.js优化 5.渲染优化 6.首屏优化 7.打包优化(主要是we ...
前端性能优化之——浏览器http请求并发
一.什么是http请求并发随着现在的网页设计的越来越炫酷,功能越来复杂.伴随着的是网页加载的资源越来越多,常常一个页面加载的CSS.JS.图片.接口等超过几十上百个. 但其实,在客户端,浏览器并不一 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
WEB前端性能优化小结
1. 请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
前端性能优化最佳实践（转）
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

最新文章

热门文章