1. 犀牛前端部落首页
  2. 前端面试题

前端面试题-渲染优化

移动端图标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)

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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4320.html

发表评论

登录后才能评论