17.阶段测 Ⅳ-灵析社区

1. 请简述过渡和动画在各方面的区别。

transition

• 事件驱动：需要访客或JS使状态发生变化后触发 • 一次性：想要循环，需要反复修改状态

• 定义两个状态：开始状态和结束状态

• 可指定唯一过渡属性：transition-property:all默认两个状态间所有可过渡属性，都会有补间动画。可以通过transition-property指定可以唯一过渡属性

animation

• 自动执行或事件驱动

• 循环或指定执行次数

• 定义多个状态

• 不可指定唯一过渡属性

• 可控制：暂停，播放等

2. 为了提升动画体验，应该减少不必要动画元素和属性，避免使用什么语句？

transition:all。

3. 不同属性值引起改变，重新渲染有哪三种执行路径？

layout > paint > composite；paint > composite；composite。

4. 可通过合成属性，如transform在 compositor 线程实现动画的是哪个动画？

CSS 动画。

5. 请描述实现打字机效果的思路。

• 给一个DIV添加动画，宽width从0到文字总长度变化

• 有多少字，就从补间动画平均取多少个过渡状态，每状态对应显示一个字

• 光标闪烁，只有显示和隐藏两个状态，期间不需要过渡效果，并且无限循环

6. 用子绝父相的定位方式，在需要显示为骨架屏的元素内，放置两个伪元素，请描述这两个伪元素的用途。

一个撑满父容器，表示未填充数据前的元素
一个填充倾斜的渐变条纹，移动条纹位置，模拟进度条动画

7. CSS有四种加载方式？

style属性（内联样式）；标签（嵌入样式）；（外链样式）；@import（导入样式）。

8. 为什么CSS 会阻塞 JS 执行？

JS 可能需要查询、修改 DOM 树和 CSS 样式，本身阻塞DOM 解析。

9. CSS和不依赖 DOM 的JS应该放在什么标签前？

。

10. 请简单写出浏览器解析和渲染 CSS 的步骤。

解析、级联、层叠、Render Tree、布局、绘制、合成、重新渲染。

11. 浏览器是如何解析 CSS 的？

将 CSS 字符串转换为包括选择器、属性名、属性值的数据结构，长度单位被转换为像素，关键字被转换为具体值，需要计算的函数转为具体值。

12.重新渲染一般哪有三种执行路径？

重排：布局 → 绘制 → 合并
重绘：绘制 → 合并
合并

13. 请简要写出避免重排和重绘的6种方法。

• 尽量使用仅引起合成的属性

• 限制重新渲染区域

• 减少使用display:table或table表格布局

• 利用浏览器自身优化

• 手动一次渲染

• 优化 DOM 树

14. 实现小于 1px 像素的边有哪两种方法？

通过媒体查询，将边框宽度设为1px / devicePixelRatio
伪类 +resolution+transform

15. 实现圆角边框有哪几种方法？

• 背景图片：绘制圆角边框，切成 4 个圆角 + 4 个边框的小图片，拼成圆角边框

• border-radius

• clip-path：创建裁剪区域

16. 实现小三角有哪几种方法？

伪类 + 特殊符号；特殊符号 + 缩进 + 溢出 + 旋转；宽高为 0 的边框。

17. 实现文字描边有哪三种方法？

text-shadow；-webkit-text-stroke；position: relative/position: absolute子绝父相。

18. 实现渐变背景有哪两种方法？

背景图片：一张宽 1px 像素，高度沿渐变方向固定，重复铺满即可
linear-gradient