前端面试题-渲染优化

移动端图标SVG

从PNG到IconFont

• 多个图标一套字体，减少获取时的请求数量和体积
• 矢量图形，可伸缩
• 直接通过CSS修改样式（颜色、大小等）

从IconFont到SVG

• 保持图片能力，支持多色彩
• 独立的矢量图形
• XML语法，搜索引擎SEO和无障碍读屏软件读取

Flexbox优化布局

• 更高性能的实现方案
• 容器有能力决定子元素的大小、顺序、对齐、间隔等
• 双向布局

优化资源加载顺序

• 浏览器默认安排资源加载优先级
• 使用preload、prefetch调整优先级
  • preload：提前加载较晚出现，但对当前页面非常重要的资源
  • prefetch：提前加载后继路由需要的资源，优先级低

<link rel='preload' href='img/a.svg' as='image'>
<link rel='prefetch' href='css/a.css' as='style'>

预渲染页面

• 大型单页应用的性能瓶颈：JS下载 + 解析 + 执行
• SSR的主要问题：牺牲TTFB来补救First Paint，实现复杂
• Pre-rendering：打包时提前渲染页面，没有服务端参与

WIndowing（窗口化）提高列表性能

• 加载大列表、大表单的每一行严重影响性能
• Lazy loading仍然会让DOM变得过大
• windowing只渲染可见的行，渲染和滚动的性能都会提升

使用骨架屏Skeleton减少布局移动（Layout Shift）

• 占位
• 提高用户感知性能