浅谈高性能Web前端技术栈——小白轻松减少HTTP请求

时间：2023-04-05 21:08:01 HTML5

小白如何轻松编写高性能Web前端页面1.从减少HTTP请求开始CSSSprites、内联图片、样式表合并、脚本文件合并。1.图片映射：服务端图片映射和客户端图片映射。操作原理：利用用户点击图片的x、y坐标提交目标URL，或者映射操作。>举个栗子：页面的导航栏模块由四张图片组成，用户点击每张图片都会链接到不同的URL地址。>方法一：四张单独的图片对应四个单独的超链接，需要四次HTTP请求（效率较低）；>方法二：一张图片由四个导航组成，用图片映射实现，需要一次HTTP请求，减少响应时间（**提高效率**），**图片地图中的图片必须是连续的**。代码实例:方法一(效率低)

方法二（**效率高**）

2.CSSSprites：一种更灵活的将多张图片合并为单张图片的方法运行原理：通过合并图片减少http请求，比图片贴图更灵活，减少下载量，合并图片比求和更小的单独的图片。优点：标签干净，图像少，响应时间短代码实现：

#navbarspan{宽度：31px；高度：31px；显示：内联；向左飘浮;背景图片：url(/images/spritebg.gif?t=1526305412);}.home{背景位置：00;右边距：4px；左边距：4px；}.gifts{背景位置：-32px0;右边距：4px；}.cart{背景位置：-64px0;右边距：4px；}......3。inlineimages：更灵活的将多张图片组合成一张图片的方式使用数据的缺点：URL方式：IE8及以下不支持。由于数据大小的限制，整体下载量会增加，不会缓存。格式如下：data:,data可用于内联图片，需要指定URL的地方，可以使用SCRIPT和A标签，使用CSS将内联图片设置为背景和把它放在外部样式表中。虽然增加了一个HTTP请求，但是可以实现额外的缓存代码实现

#navbarspan{width:31px;高度：31px；显示：内联；向左飘浮;利润-right:4px;}.home{background-image:url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGvc7OxtZ7ANbWz…ddWZZ5UAGPOTXlgkNVOSZdBxEwIkYu7VhYnAol5GaadRqF0Uaz0TgXnX2umVFyGakJUUAAADs=);margin-left:4px;}4.合并脚本和样式表：将脚本合并，样式表Merge,reduceHTTPrequests'