关注我 么么哒

【前端】干货一箩筐

  • 作者:smile
  • 学无止境
  • 时间:Thu May 28 2020 15:46:10 GMT+0800 (China Standard Time)
  • 58人已阅读
简介

CSS Sprites

简介

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。

优点:

  • CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
  • CSS Sprites能减少图片的字节
  • CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
  • CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点:

  • 图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
  • 图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
  • 图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
  • 可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。

回流与重绘

在讨论回流与重绘之前,我们要知道:

浏览器使用流式布局模型 (Flow Based Layout)。

浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。

有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。

由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table布局的原因之一。

一句话:回流必将引起重绘,重绘不一定会引起回流。

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。

会导致回流的操作:

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容变化(文字数量或图片大小等等)
  • 元素字体大小变化
  • 添加或者删除可见的DOM元素
  • 激活CSS伪类(例如::hover)
  • 查询某些属性或调用某些方法

特别的元素

有个特别的元素,一个是p一个是a,p是块元素,但是其不能包含除了它本身之外的任何块元素,a是内联元素,但是它可以包含除了它本身外的任意块元素

CSS 百分比参照问题

  • 参照父元素宽度的元素:padding margin width text-indent
  • 参照父元素高度的元素:height
  • 参照父元素属性:font-size line-height
  • 特殊:相对定位的时候,top(bottom) left(right)参照的是父元素的内容区域的高度与宽度,而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

数组空元素问题

ES5中

  • forEach(), filter(), reduce(), every() 和some()都会跳过空位。
  • map()会跳过空位,但会保留这个值
  • join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。

ES6 中都会将空位当做undefined

 

文章评论