Skip to content

性能优化面试题

preload(预加载) 和 prefetch 的区别

preload 是页面加载前加载,

prefetch 异最低优先级 lowest 来提前加载

preload 加载资源一般是当前页面需要,它告诉浏览器预先请求当前页面需要的资源

prefetch 一般是其他页面需要用到的资源

defer 或者 async

使用 Preload/Prefetch 优化你的应用

如何做页面的性能优化

1.减少体积(打包优化、babel 优化)

webpack 打包,使用 webpack content-hash

文件指纹是打包后输出的文件名的后缀

  • Hash :和整个项目的构建相关,只要项目文件有修改,整个项目构建的 hash 值就会更改

  • Chunkhash:和 webpack 打包的 chunk 有关,不同的入口会有不同的 chunkhash

  • Contenthash:根据文件内容来定义 hash,文件内容不变,则 contenthash 不变

    2.延迟加载(资源的异步加载)

react 懒加载

3.网络加速(cdn、dns 预解析、http 并发数)

4.首屏渲染 (ssr、骨架图)

5.利用缓存(http 缓存)

本文看点

如何监控页面加载速度,指标是什么

如何对应用提速,性能优化的点有哪些

页面监控的指标有哪些

FCP(First Contentful Paint):白屏时间(第一个文本绘制时间)

Speed Index:首屏时间

TTI(Time To Interactive):第一次可交互的时间

lighthouse score(performance):Chrome 浏览器审查工具性能评分

FCP(白屏时间):是指从用户进入网站(输入 url、刷新、跳转等方法)的时刻开始计算,一直到页面有内容展示出来的时间节点

这个过程包括 dns 查询、建立 tcp 连接、发送首个 HTTP 请求、返回 html 文档、html 文档 head 解析完毕

有哪些软件可以监控到

百度、google...

如何提速

说白了是如何做性能优化,这里不说废话,从四个角度切入

前端工程化角度思考(以 webpack 为例)

​ webpack 方面的

构建时压缩图片、使用 webp 图片、优化 SVG 图标

框架角度

Vue 我不熟,仅 React 而言,可以从这几个方面来做功夫

如果是类组件的话,使用 pureComponent、shouldComponentUpdate

如果是函数式组件的话,可以使用 useMemo、useCallback、memo

​ useMemo 和 useCallback 的区别

​ memo 应该和 useMemo 结合

优化 UI 代码体积

使用 React.lazy 做代码分割

如果遇到列表,使用 key 做关键字,并可使用虚拟列表

​ 关于虚拟列表的解决方案,我在这篇文章都写了

具体为懒加载、IntersectionObserver、getBoundingClientRect

HTTP 方面

使用 HTTP 缓存

升级为 HTTP2

服务器使用 gzip 压缩

OSS+CDN 加速

页面构建方面

CSS 放顶部、JS 放底部

减少回流和重绘

​ 回流和重绘

script defer、async

参考资料