前端性能优化面试题
性能优化
列举前端性能优化的方式?
- 浏览器缓存
- 防抖、节流
- 图片资源懒加载、预加载
- 图片优化:精灵图、svg 图片、字体图标
- css、js 代码优化压缩
- 按需导入 js
- 减少 http 请求数量
- 对于图片可以使用精灵图
- css、js 分别进行合并操作
- 提前渲染开始时间:将 css 链接放在 html 头部
- 减轻解析器的阻塞:将 js 链接放在 body 尾部
CSS 性能优化
- css 代码压缩
- link 代替 @import
- 避免多层选择器
JS 性能优化
- js 代码压缩
- 按需导入 js 模块
Vue 性能优化
- v-for 遍历添加 key
- 避免 v-for 和 v-if 同时使用,v-for 要比 v-if 优先级更高,v-if 会重复运行在每个 for 循环中
- 要区别使用 v-if 和 v-show,频繁切换使用 v-show、反之使用 v-if
- 要区别使用 watch 和 computed
- 使用 keep-alive 包裹不活动的组件实例,避免重复渲染
- 路由懒加载
- 按需引入第三方库
- 可以将压缩好的文件放到 static 目录下。
- 开启 gzip 压缩
提升编译速度
- 检查依赖,减少不必要的依赖
- 分割代码为更小的块而不是一整陀的
- 尽可能推迟加载 JavaScript,按需要加载或者动态加载。
- 使用开发者工具和 DeviceTiming 来检测性能瓶颈
- 用像 Optimize.js 的工具来帮助解析器选择立即解析或者懒解析以加快解析速度
如何优化代码
- 代码重用
- 避免全局变量
- 拆分函数,避免函数过于臃肿
- 代码注释
前端接收到的数据包比较大,需要怎么处理?
- 分页加载:降低加载的压力
- 懒加载:用户滚动到页面某位置时,再进行加载。而不是一次性将所有数据都加载出来,这样可以能够减少页面初始化加载的数据量
- 数据缓存:一些不常变化的数据,进行缓存
- 定时渲染:可以使用 requestAnimationFrame 代替 setTimeout
const renderList = async () => {
const list = await getList()
const total = list.length
const page = 0
const limit = 200
const totalPage = Math.ceil(total / limit)
const render = (page) => {
if (page >= totalPage) return
requestAnimationFrame(() => {
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]
const div = document.createElement('div')
div.className = 'sunshine'
div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
container.appendChild(div)
}
render(page + 1)
})
}
render(page)
}
什么是 CDN?说说实现原理?
CDN(Content Delivery Network),即内容分发网络
当用户访问资源的时候,会根据用户位置分配最近的资源
依靠部署在各地的边缘服务器,通过中心平台的复杂均衡、内容分发、调度等功能模块。使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN 的主要技术主要有内容存储和分发技术
浏览器底层
浏览器是如何解析 CSS 选择器的?
css 选择器是从右向左解析的,为了避免对所有元素进行遍历
举个例子,看一段样式代码:
.main h3 span {
font-size: 16px;
}
如果是从左往右:
- 需要遍历所有元素,找到所有的
.main
类的节点 - 遍历
.main
下的所有的子孙节点,找到所有的h3
- 遍历
h3
下的所有子孙节点,去找span
这样造成的问题是:会进行大量的子孙节点的遍历,非常消耗成本。效率很低
如果从右往左:
- 遍历所有元素,找到所有的
span
节点 - 然后基于每一个
span
向上查找h3
- 再由
h3
向上查找.main
的节点
按照从右往左的匹配的规则,只有第一次会遍历所有元素查找节点,剩下的就看父辈祖辈是否满足选择器的条件,效率得到提升
浏览器是如何进行界面渲染的?
上图展示的流程是:
- 获取 HTML 文件并进行解析,生成 DOM 树(DOM Tree)
- 解析 HTML 的同时也会解析 CSS,生成样式规则(Style Rules)
- 根据 DOM 树和样式规则,生成渲染树(Render Tree)
- 进行布局(Layout 重排),把每个元素节点分配在屏幕的确切位置
- 进行绘制(Paint 重绘),遍历渲染树节点,调用 GPU(图形处理器)将元素呈现出来
重绘和回流是什么?
重排(repaint)
重排是指部分或整个渲染树需要重新分析、计算尺寸。主要表现为重新生成布局,重新排列元素
重绘(回流 reflow)
重绘是指某些元素的样式外观发生改变。需要进行重新绘制
两者关系
重绘不一定会出现重排,重排必定会触发重绘
何时会触发重排?
- 添加或者删除可见的 DOM 元素
- 元素位置改变
- 元素尺寸改变(边距、填充、边框、宽度高度)
- 内容改变(比如文本改变或者图片大小改变,引起的计算值宽度和高度改变)
- 页面渲染初始化(页面初始化渲染的时候会触发重排)
- 浏览器窗口尺寸发生改变(resize 事件发生)
浏览器对重排重绘的优化?
浏览器内部会维护一个队列,把所有会引起重排、重绘的操作放入这个队列
等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器进行一个批处理
什么是防抖和节流?有什么区别?
- 防抖: 规定时间之后执行事件。如果在规定时间内重复触发,则重新计时
- 节流: 规定时间之内只运行一次。如果在规定时间内重复触发,只有一次生效
网络攻击
什么是 CSRF?
https://blog.csdn.net/weixin_40482816/article/details/114301717
CSRF 称为跨站请求伪造
攻击者通过伪造用户的浏览器请求,向一个用户曾经认证访问过的网站发送请求,是目标网络误以为是用户的真是操作
防御 CSRF 攻击:
- 验证请求头中的 HTTP Referer 字段
- 请求中增加 token 并验证
- 请求头中增加自定义属性并验证
什么是 Referer:
请求头中有一个字段叫 Referer,记录了该 HTTP 请求的来源地址,比如访问 http://163.com
用户登录这个网站进行操作,Referer 值就是所在页面的 url。黑客实施 CSRF 攻击,只能在他自己的网站伪造请求,该请求的 Referer 指向黑客自己的网站
什么是 DOS 攻击?
https://www.zhihu.com/question/448741406?ivk_sa=1024320u
- 性能优化
- 列举前端性能优化的方式?
- CSS 性能优化
- JS 性能优化
- Vue 性能优化
- 提升编译速度
- 如何优化代码
- 前端接收到的数据包比较大,需要怎么处理?
- 什么是 CDN?说说实现原理?
- 浏览器底层
- 浏览器是如何解析 CSS 选择器的?
- 浏览器是如何进行界面渲染的?
- 重绘和回流是什么?
- 何时会触发重排?
- 浏览器对重排重绘的优化?
- 什么是防抖和节流?有什么区别?
- 网络攻击
- 什么是 CSRF?
- 什么是 DOS 攻击?
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/15353175.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)