高性能网站建设指南——记录＜减少HTTP请求＞

SONG宋人头

已于 2022-07-16 16:21:40 修改

阅读量88

点赞数

分类专栏： #高性能网站建设指南——记录文章标签：前端 html javascript http

于 2022-07-16 14:23:06 首次发布

本文链接：https://blog.csdn.net/jing2jing2/article/details/125797326

版权

#高性能网站建设指南——记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、减少HTTP请求

1.1、图片地图

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

效果：点击不同星球跳转

1.2、CSS Sprites

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        i {
            width: 30px;
            height: 24px;
            float: left;
            background: url(images/sprite.png);
            margin: 5px 10px 0 0;
        }

        .cat1 i {
            background-position: 0 0;
        }

        .cat2 i {
            background-position: 0 -24px;
        }

        .cat3 i {
            background-position: 0 -48px;
        }

        .cat4 i {
            background-position: 0 -72px;
        }
    </style>
</head>

<body>
    <li class="cat1"><i></i>
        <h3>服饰内衣</h3>
    </li>
    <li class="cat2"><i></i>
        <h3>鞋包配饰</h3>
    </li>
    <li class="cat3"><i></i>
        <h3>运动户外</h3>
    </li>
    <li class="cat4"><i></i>
        <h3>珠宝手表</h3>
    </li>
</body>

</html>