【专题版】前端面试宝典（项目）

前端_律动
81 阅读11分钟

项目

项目相关命令行

npx create-react-app demo：创建react项目

package.json

相关资料：package.json 配置完全解读

依赖配置

  • dependencies：运行依赖，也就是项目生产环境下需要用到的依赖。比如 react，vue，状态管理库以及组件库等。
  • devDependencies：开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发，通常包括项目工程化工具比如 webpack，vite，eslint 等。

项目方案

假如有10万条数据返回，最终呈现是长列表，前端如何处理

常规的分页渲染不符合需求，可以考虑使用虚拟列表。虚拟列表就是只对可见区域进行渲染，对非可见区域的数据不渲染，以减少消耗，提高用户体验，它是长列表的一种优化方式，性能的话还是挺不错的。

实现思路：

  • 第一步：写一个代表可视区域的div固定器高度，通过overflow使其允许纵向y轴滚动
  • 第二步：计算可视区域中可以显示的数据条数，用可视区域的高度除以单条数据的高度
  • 第三步：监听滚动，当滚动条变化的时候，计算出被卷起的数据高度
  • 第四步：计算可视区域内数据的起始索引，也就是区域内的第一条数据，可以用卷起的高度除以单条数据高度
  • 第五步：计算可视区域内数据的结束索引，通过起始索引加上可以显示的数据条数
  • 第六步：取起始索引和结束索引中间的数据渲染到可视区域
  • 第七步：计算起始索引对应的数据，在整个列表的偏移位置并设置到列表上

Vue 怎么做权限管理

权限管理一般需求是页面权限和按钮权限的管理，具体实现的时候分前端和后端两种方案：

  • 前端方案：把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如会配置一个asyncRoutes数组，需要认证的页面在其路由的meta中添加一个roles字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过router.addRoutes(accessRoutes)方式动态添加路由即可。
  • 后端方案：会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息
  • 按钮权限的控制通常会实现一个指令，例如v-permission，将按钮要求角色通过值传给v-permission指令，在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮。

纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息。

项目问题

项目优化

白屏优化

相关资料：导致页面加载白屏时间长的原因有哪些，怎么进行优化

优化方案：

  1. DNS解析优化
  2. TCP网络链路优化
  3. 服务端处理优化
  4. 浏览器下载、解析、渲染页面优化

HTML优化

  1. 避免 HTML 中书写 CSS 代码，因为这样难以维护。
  2. 使用 Viewport 加速页面的渲染。
  3. 使用语义化标签，减少 CSS 代码，增加可读性和 SEO。
  4. 减少标签的使用，DOM 解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。
  5. 避免 src、href 等的值为空，因为即时它们为空，浏览器也会发起 HTTP 请求。
  6. 减少 DNS 查询的次数

CSS优化

  1. 优化选择器路径：使用 .c {} 而不是 .a .b .c {}。
  2. 选择器合并：共同的属性内容提起出来，压缩空间和资源开销。
  3. 精准样式：使用 padding-left: 10px 而不是 padding: 0 0 0 10px。
  4. 雪碧图：将小的图标合并到一张图中，这样所有的图片只需要请求一次。
  5. 避免通配符：.a .b * {} 这样的选择器，根据从右到左的解析顺序在解析过程中遇到通配符 * {}
  6. 会遍历整个 DOM，性能大大损耗。
  7. 少用 float：float 在渲染时计算量比较大，可以使用 flex 布局。
  8. 为 0 值去单位：增加兼容性。 9、压缩文件大小，减少资源下载负担。

JavaScript优化

  1. 尽可能把<script> 标签放在 body 之后，避免 JS 的执行卡住 DOM 的渲染，最大程度保证页面尽快地展示出来
  2. 尽可能合并 JS 代码：提取公共方法，进行面向对象设计等
  3. CSS 能做的事情，尽量不用 JS 来做，毕竟 JS 的解析执行比较粗暴，而 CSS 效率更高。
  4. 尽可能逐条操作 DOM，并预定好 CSs 样式，从而减少 reflow 或者 repaint 的次数。
  5. 尽可能少地创建 DOM，而是在 HTML 和 CSS 中使用 display: none 来隐藏，按需显示。
  6. 压缩文件大小，减少资源下载负担。

Vue的性能优化

（1）编码阶段

  • 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
  • v-if和v-for不能连用
  • 如果需要使用v-for给每项元素绑定事件时使用事件代理
  • SPA 页面采用keep-alive缓存组件
  • 在更多的情况下，使用v-if替代v-show
  • key保证唯一
  • 使用路由懒加载、异步组件
  • 防抖、节流
  • 第三方模块按需导入
  • 长列表滚动到可视区域动态加载
  • 图片懒加载

（2）SEO优化

  • 预渲染
  • 服务端渲染SSR

（3）打包优化

  • 压缩代码
  • Tree Shaking/Scope Hoisting
  • 使用cdn加载第三方模块
  • 多线程打包happypack
  • splitChunks抽离公共文件
  • sourceMap优化

（4）用户体验

  • 骨架屏
  • PWA
  • 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

移除生产环境的控制台打印。方案很多，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就蛮好的。

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

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

雅虎军规提到的，避免css表达式、滤镜，较少DOM操作，优化图片、精灵图，避免图片空链接等。

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

winter重学前端 优化技术方案：

缓存：客户端控制的强缓存策略。

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

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

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

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

前端性能优化

  • 减少回流重绘
  • 缩小代码体积，例如：Tree-shaking、代码压缩、代码分割、Scope-hoisting等
  • 减少请求数，例如：雪碧图、基础库打成一个包
  • 并发请求，使用cdn，突破浏览器对同一域名的TCP连接数限制，或者使用http2
  • 运行时加载，例如：图片懒加载，组件动态import
  • 缓存，例如：http缓存，dll等

18.你有对 Vue 项目进行哪些优化？

（1）代码层面的优化

  • v-if 和 v-show 区分使用场景
  • computed 和 watch 区分使用场景
  • v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
  • 长列表性能优化
  • 事件的销毁
  • 图片资源懒加载
  • 路由懒加载
  • 第三方插件的按需引入
  • 优化无限列表性能
  • 服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

  • Webpack 对图片进行压缩
  • 减少 ES6 转为 ES5 的冗余代码
  • 提取公共代码
  • 模板预编译
  • 提取组件的 CSS
  • 优化 SourceMap
  • 构建结果输出分析
  • Vue 项目的编译优化

（3）基础的 Web 技术的优化

  • 开启 gzip 压缩
  • 浏览器缓存
  • CDN 的使用
  • 使用 Chrome Performance 查找性能瓶颈

谈谈你对重构的理解？

网络重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化， 在扩展的同时保持一致的UI

对于传统的网站来说重构通常是：

  • 表格(table)布局改为DIV+CSS
  • 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
  • 对于移动平台的优化
  • 针对于SEO进行优化

什么样的前端代码是好的：高复用低耦合，这样文件小，好维护，而且好扩展

对前端工程师这个职位是怎么样理解的？它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近

  • 实现界面交互
  • 提升用户体验
  • 有了Node.js，前端可以实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从90分进化到 100 分，甚至更好， 与团队成员，UI设计，产品经理的沟通； 做好的页面结构，页面重构和用户体验；

前端工程的价值体现在哪？

  • 为简化用户使用提供技术支持（交互部分）
  • 为多个浏览器兼容性提供支持
  • 为提高用户浏览速度（浏览器性能）提供支持
  • 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
  • 为展示数据提供支持（数据接口）

平时如何管理你的项目

  • 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
  • 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
  • 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
  • 页面进行标注（例如 页面 模块 开始和结束）；
  • CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
  • JS 分文件夹存放 命名以该JS功能为准的英文翻译。
  • 图片采用整合的 images.png png8 格式文件使用 - 尽量整合在一起使用方便将来的管理

移动端（Android IOS）怎么做好用户体验?

  • 清晰的视觉纵线
  • 信息的分组、极致的减法
  • 利用选择代替输入
  • 标签及文字的排布方式
  • 依靠明文确认密码
  • 合理的键盘利用
avatar
文章
阅读
粉丝