前端开发面试宝典-HTML/CSS部分

2023-07-08 74 阅读1分钟

HTML部分

H5新增语义化标签

svg和canvas的区别

相同点：都是描述2D图形
svg可处理事件程序canvas不能
svg矢量图不依赖分辨率，canvas位图依赖分辨率
svg适合大型渲染区域如地图，canvas适合视频、图像密集型的游戏等

CSS部分

Flex布局

align-item:center;//垂直居中
justify-content:center;//水平居中
flex-direction: row; //改变排版方向 row-reverse、column、column-reverse、initial、inherit

动画

使用requestAnimationFrame()代替setTimeout()节省CPU开销
GPU硬件加速

注意：尽管 GPU 硬件加速可以提高性能，但过度使用可能会增加内存消耗，并且并不是所有的情况都适合使用。

使用3D变换属性

transform: translate3d(0, 0, 0);

告诉浏览器该元素将要发生什么变化，从而让浏览器提前进行优化。

will-change: transform;

使用 backface-visibility 属性

backface-visibility: hidden;

使用 CSS 动画或过渡
使用 transform 和 opacity 进行动画