自用前端面试题（优化）

用户7583108113360
198 阅读12分钟

1.做过哪些性能优化相关的？

具体优化措施参照：
vue性能优化： juejin.cn/post/719632…
SPA首屏优化：juejin.cn/post/719632… webpack优化：juejin.cn/post/719817…

此外还可以讲述：

  • 性能分析工具使用 Network devtool、performance devtool、webpack分析工具
  • 指标监控体系建设
  • ROI衡量

2.关注哪些性能指标？是如何计算的？

3.你用的指标上报方式是什么？为什么采用gif图片而不是ajax上报？

上报方式

美团一般是封装好的sdk，直接调用sdk的api上报

空白gif图上报数据

优点：
1.gif图片格式体积小， 可使用1px*1px的空白gif图片
2.图片请求方式不会出现跨域问题

示例：

<button onClick="aa()">haorooms</button>
  <script>
    function aa(){
      new Image().src = './test.gif?ac=test&'+Math.random() 
    }
  </script>

最普遍的就是在图片请求url后面，将指标数据作为query参数拼接，进行上报

4.遇到哪些性能瓶颈？采用了什么解决方案？

参考答案：
遇到首屏加载慢问题，优化方案：juejin.cn/post/719632…

5.讲一讲做过的自动化测试相关的工作

没做过就说没做过，不建议硬讲，坑太大

6.介绍下如何实现token加密

使用非对称加密 ，非对称使用公共/私钥对: 标识提供方采用私钥生成签名, JWT 的使用方获取公钥以验证签名。由于公钥 (与私钥相比) 不需要保护, 因此大多数标识提供方使其易于使用方获取和使用 (通常通过一个元数据URL)。

7.介绍下前端加密常见的场景和方法

blog.csdn.net/weixin_4444…

8.引入CDN字体，会发生什么问题？

字体文件在CDN服务器上、项目部署在自己的服务器上，字体文件就出现了跨域加载的问题

9.讲一下对SEO优化的理解，SPA被搜索引擎爬到的html文档是什么样的？

SEO优化

它是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。

一般SEO优化方式

第一步，确立SEO的关键词。根据自有的资源、目的，确定相应的关键词，这一步是SEO的基础，因此市面上有大量的提供关键词挖掘的工具，无外乎都是希望能够借助大数据、语义分析等功能划定关键词，为进一步SEO作准备；

第二步，整理与关键词匹配的资源。这些资源有很多形式，最简单的纯文字，复杂一些的图文，以及视频等都可以被称之为资源。但需要注意的是，很多资源并不会天生附带关键词，因此需要SEO从业者为其匹配上相应的关键词，通过代码标签、介绍等文字性的内容，向搜索引擎展示资源；

第三部，依照关键词分发资源。这也是SEO工作的具体表现，这一任务通常由搜索引擎来体现，表现形式就是用户在搜索引擎内搜索关键词所展示的结果。一般来说，只要资源能够被搜索引擎通过搜索行为推送给用户，那么SEO的工作就已经完成了

SPA被搜索引擎爬取

SPA在页面初始阶段，只返回了页面的基础架构，后续页面内容都是通过JS动态获取的，所以搜索引擎爬取到的html文档是不完整的。

10.10000条数据怎么展示？

使用虚拟列表展示
详解：blog.csdn.net/Laollaoaola…

11.怎么看待组件嵌套很多层？

blog.csdn.net/xiaokangss/…

12.介绍下PWA

learn.microsoft.com/zh-cn/micro…

13.讲一下项目的优化措施

  1. 移除生产环境的控制台打印。方案很多，esling+pre-commit、使用插件自动去除，插件包括babel-plugin-transform-remove-console、uglifyjs-webpack-plugin、terser-webpack-plugin。最后选择了terser-webpack-plugin，脚手架vue-cli用这个插件来开启缓存和多线程打包，无需安装额外的插件，仅需在configureWebpack中设置terser插件的drop_console为true即可。最好还是养成良好的代码习惯，在开发基本完成后去掉无用的console，vscode中的turbo console就蛮好的。

  2. 第三方库的按需加载。echarts，官方文档里是使用配置文件指定使用的模块，另一种使用babel-plugin-equire实现按需加载。element-ui使用babel-plugin-component实现按需引入。

前后端数据交换方面，推动项目组使用蓝湖、接口文档，与后端同学协商，规范后台数据返回。

  1. 避免css表达式、滤镜，减少少DOM操作，优化图片、精灵图，避免图片空链接等。

  2. 性能问题：页面加载性能、动画性能、操作性能。Performance API，记录性能数据。

  3. 缓存使用客户端控制的强缓存策略。

  4. 降低请求成本：DNS 由客户端控制，隔一段时间主动请求获取域名IP，不走系统DNS（完全看不懂）。TCP/TLS连接复用，服务器升级到HTTP2，尽量合并域名。

  5. 减少请求数：JS、CSS打包到HTML。JS控制图片异步加载、懒加载。小型图片使用data-uri。

  6. 较少传输体积：尽量使用SVG\gradient代替图片。根据机型和网络状况控制图片清晰度。对低清晰度图片使用锐化来提升体验。设计上避免大型背景图。

  7. 使用CDN加速，内容分发网络，是建立在承载网基础上的虚拟分布式网络，能够将源站内容缓存到全国或全球的节点服务器上。用户就近获取内容，提高了资源的访问速度，分担源站压力。

  8. 减少style操作，当需要设置的样式很多时设置className而不是直接操作style；

  9. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

  10. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

14.讲一下回流、重排、重绘？以及如何优化？

回流、重排

回流、重排是一回事。当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流

产生原因

  • 页面的首次渲染
  • 浏览器的窗口大小发生变化
  • 元素的内容发生变化
  • 元素的尺寸或者位置发生变化
  • 元素的字体大小发生变化
  • 激活CSS伪类
  • 查询某些属性或者调用某些方法
  • 添加或者删除可见的DOM元素

重绘

当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘

产生原因
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格而不会影响布局时

优化措施

优化的主要目的是减少重绘和重排：

  • 操作DOM时，尽量在低层级的DOM节点进行操作

  • 不要使用table布局， 一个小的改动可能会使整个table进行重新布局

  • 使用CSS的表达式

  • 不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。

  • 使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素

  • 避免频繁操作DOM，可以创建一个文档片段documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中

  • 将元素先设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

  • 将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。

浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列

浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘

15.解决浏览器兼容问题的实践总结？

mp.weixin.qq.com/s?__biz=MjM…

16.端到端的请求如何优化时间，有哪些手段?

前端面试之道

图片优化

计算图片大小

对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是 说每个像素有 4 个通道，每个通道 1 个字节(8 位 = 1个字节)，所以该图片大小大概为 39KB(10000 * 1 * 4 / 1024)。

但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图 片的大小。

了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了:

  • 减少像素点
  • 减少每个像素点能够显示的颜色

图片加载优化

  1. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。

  2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。

  3. 小图使用 base64 格式

  4. 将多个图标文件整合到一张图片中(雪碧图)

  5. 选择正确的图片格式:

    对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能 带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
    小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
    照片使用 JPEG

DNS 预解析

DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。

节流

考虑一个场景，滚动事件中会发起网络请求，但是我们并不希望用户在滚动过程中一直发起请求，而是隔一段时间发起 一次，对于这种情况我们就可以使用节流。

防抖

考虑一个场景，有一个按钮点击会触发网络请求，但是我们并不希望每次点击都发起网络请求，而是当用户点击按钮一 段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖

预加载

在开发中，可能会遇到这样的情况。有些资源不需要⻢上用到，但是希望尽早获取，这时候就可以使用预加载。 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载

预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性 不好。

预渲染

可以通过预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染

<link rel="prerender" href="http://example.com">

预渲染虽然可以提高⻚面的加载速度，但是要确保该⻚面大概率会被用户在之后打开，否则就是白白浪费资源去渲染

懒执行

懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的， 就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。

懒加载

懒加载就是将不关键的资源延后加载。

懒加载的原理就是只加载自定义区域(通常是可视区域，但也可以是即将进入可视区域)内需要加载的东⻄。对于图片 来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时， 就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。

CDN

CDN 的原理是尽可能的在各个地方分布机房缓存数据，这样即使我们的根服务器远在国外，在国内的用户也可以通过 国内的机房迅速加载资源。

因此，我们可以将静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。并且对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消 耗流量。

avatar
文章
阅读
粉丝