前端面试题 CSS之资源加载

css中引用的图片加载问题

<style>
    #test1 {
        background-image: url(/image/a.jpg);
    }   
    #test2 {
        background-image: url(/image/b.jpg);
        display: none;
    } 
    #test3 {
        background-image: url(/image/c.jpg);
        visibility: hidden;
    }
</style>
<div id="test2">
    <div id="test3"> </div>
</div>

问题:图片a,b,c会被浏览器下载吗? a不会,b会,c不会

  • 没有使用到的样式,其中的资源不会被下载
  • display: nonevisibility: hidden的图片仍会被下载,因为元素存在于页面,只是不显示(前者不占空间,后者占据空间)
  • 父元素display: none,子元素样式将被忽略,因此c不会被下载
  • 如果div#test2去掉display属性,改为visibility:hidden,那么b,c都会下载

img图片加载问题

<style>
    #test1 {
        display: none;
    }
    #test2 {
        background-image: url(./a.jpg)
    }
</style>
<div id="test1">
    <img src="./b.jpg" alt="My photo">
    <div id="test2"></div>
</div>

问题:图片a,b会被浏览器下载吗? a不会,b会

  • img标签解析到src时,仍会发起请求

CSS文件的加载问题

<head>
    <link href="main1.css" rel="stylesheet">
    <script>
        alert('Hello World');
    </script>
</head>

问题:弹出“Hello World”之前,main1.css必须先下载并被解析吗? 是

<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>

问题:main2.css获取之前,main1.css必须先被下载并解析吗? 否

<head>
    <link href="main1.css" rel="stylesheet">
</head>
<body>
    <p>段落一</p>
    <p>段落二</p>
    <link href="main2.css" rel="stylesheet">
</body>

问题:段落一渲染之前,main2.css必须先被下载并解析吗? 是

png,jpg,gif这些图片格式解释一下,分别什么时候用,webp呢

  1. gif图形交换格式,索引颜色格式,颜色少的情况下,产生的文件极小,支持背景透明,动画,图形渐进,无损压缩(适合线条,图标等),缺点只有256种颜色
  2. jpg支持上百万种颜色,有损压缩,压缩比可达180:1,而且质量受损不明显,不支持图形渐进与背景透明,不支持动画
  3. png为替代gif产生的,位图文件,支持透明,半透明,不透明。不支持动画,无损图像格式。Png8简单说是静态gif,也只有256色,png24不透明,但不止256色。
  4. webp谷歌开发的旨在加快图片加载速度的图片格式,图片压缩体积是jpeg的2/3,有损压缩。高版本的W3C浏览器才支持,google39+,safari7+

外部引用CSS中 link与@import的区别

  1. link属于XHTML标签,而@importCSS提供的一种方式。link标签除了可以加载CSS外,还可以定义RSS,rel连接属性等,@import只能加载CSS
  2. 加载顺序:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。浏览@import加载CSS的页面时开始会没有样式,网速慢时尤其明显
  3. 兼容性:由于@import是CSS2.1提出的,IE5以上可识别,而link标签无此问题
  4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,@import不是dom可以控制的。

CSS Sprite是什么,有什么优缺点

将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

  1. 优点:
    • 减少HTTP请求数,极大地提高页面加载速度
    • 增加图片信息重复度,提高压缩比,减少图片大小
    • 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现
  2. 缺点:
    • 图片合并麻烦
    • 维护麻烦,修改一个图片可能需要从新布局整个图片,样式
gzdaijie            updated 2018-05-16 22:59:02

results matching ""

    No results matching ""