前端性能优化面试题

性能优化

列举前端性能优化的方式?

  • 浏览器缓存
  • 防抖、节流
  • 图片资源懒加载、预加载
  • 图片优化：精灵图、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;
}

如果是从左往右：

  1. 需要遍历所有元素，找到所有的 .main 类的节点
  2. 遍历 .main 下的所有的子孙节点，找到所有的 h3
  3. 遍历 h3 下的所有子孙节点，去找 span

这样造成的问题是：会进行大量的子孙节点的遍历，非常消耗成本。效率很低

如果从右往左：

  1. 遍历所有元素，找到所有的 span 节点
  2. 然后基于每一个 span 向上查找 h3
  3. 再由 h3 向上查找 .main 的节点

按照从右往左的匹配的规则，只有第一次会遍历所有元素查找节点，剩下的就看父辈祖辈是否满足选择器的条件，效率得到提升

浏览器是如何进行界面渲染的？

Alt

上图展示的流程是：

  1. 获取 HTML 文件并进行解析，生成 DOM 树（DOM Tree）
  2. 解析 HTML 的同时也会解析 CSS，生成样式规则（Style Rules）
  3. 根据 DOM 树和样式规则，生成渲染树（Render Tree）
  4. 进行布局（Layout 重排），把每个元素节点分配在屏幕的确切位置
  5. 进行绘制（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

posted @ 2021-09-29 15:39  时光凉忆  阅读(72)  评论(0)  编辑  收藏  举报