2周刷完100道前端优质面试——工作经验篇

工作经验篇

1.H5页面如何进行首屏优化

• 移动端H5要结合App能力去优化
• 路由懒加载
• 适用于SPA(不适用MPA)
• 路由拆分，优先保证首页加载
• 服务端渲染SSR
• 传统前后分离（SPA）渲染页面过程复杂
• SSR渲染页面过程简单，所以性能好
• 如果是纯H5页面，SSR是性能优化的终极方案(但成本也高)
• Nuxt.js(vue) Next.js(React)
• App预取
• 如果H5在APP WebView中展示，可使用APP预取
• 比如用户访问列表页时，App预加载文章首屏内容
• 用户进入H5页，直接从App中获取内容，瞬间展示首屏
• 分页
• 针对列表页
• 默认只展示第一页内容
• 上划加载更多
• 图片懒加载lazyLoad
• 针对详情页
• 默认只展示文本内容，然后触发图片懒加载
• 注意：提前设置图片尺寸，尽量只重绘不重排
• Hybrid
• 提前将HTML JS CSS 下载到APP内部
• 在APP webview 中使用file://协议加载页面文件
• 再在Ajax获取内容并展示（也结合App预取）

性能优化要配合分析、统计、评分等，做了事情要有结果
性能优化要配合体验，如骨架屏、loading动画等

2.后端一次性返回10w条数据，你该如何渲染

• 设计不合理
• 后端返回10w本身技术方案设计就不合理；
• 可以先主动说明，查明面试官意向，非要这么做，提供解决方案；
• 1.自定义中间件
• 自定义nodejs中间层，获取并拆分这10w条数据
• 前端对接nodejs中间层，而不是服务端
• 成本较高
• 2.虚拟列表
• 只渲染可视区域DOM
• 其他隐藏区域不显示，只用div撑起高度
• 随着浏览器滚动，创建和销毁DOM
• 虚拟列表实现起来非常复杂，可借用第三方lib
• Vue-virtual-scroll-list
• React-virtualiszed

主动沟通，表达观点；
后端问题首要用后端思维去解决——中间层；
虚拟列表无奈选择，实现复杂而效果不一定好（低配手机）

3.前端的常用的设计模式和使用场景？

设计原则：开放封闭原则，对扩展开发，对修改封闭；

工厂模式：用一个工厂函数创建实例，隐藏new；jQuery &函数

单例模式：全局唯一的实例（无法生成第二个）；如vuex redux的store,全局唯一的dialog modal

JS是单线程，创建单例很简单；Java是支持多线程的，创建单例要考虑锁死线程，否则多个线程同时创建，单例就重复了（多线程共享进程内存）

代理模式:使用者不能直接访问对象，而是访问一个代理层，在代理层可以监听get set 做很多事情，如ES6 Proxy 实现Vue3的响应式；

观察者模式：window.addEventListener(‘click’,()=>{…})

发布订阅：event.on(‘event-key’,()=>{…}) 绑定事件要记得解绑，防止内存泄漏

装饰器模式：nest.js

观察者模式 VS 发布订阅
Subject 和 Observer直接绑定，没有中间媒介；
PUblisher 和 Observer互不认识，需要中间媒介 Event channel,如 EventBus自定义事件

3.实际工作中，做过的vue优化？

V-if 和 v-show

v-if 销毁组件，v-show 使用css隐藏组件

大部分使用v-if更好，不要过度优化

v-for使用key

使用computed缓存

keep-alive缓存组件

异步组件 体积比较大的组件

路由懒加载

服务端渲染 SSR 可使用Nuxt.js 按需加载

4.使用vue遇到哪些坑？

1.内存泄漏——越来越慢

• 全局变量，全局事件，全局定时器，自定义事件

2.Vue2响应式的缺陷(vue3不再有)

• data新增属性Vue.set

• data删除属性用Vue.delete

• 无法直接修改数据 arr[index]=value

3.路由切换时scroll到顶部

• 列表页缓存数据和scrollTop的值

• 当再次返回列表页时，渲染组件，执行scrollTo(xxx)

• 终极方案：MPA+App WebView

形成日常记录的好习惯，为了你自己！！！

5.如何统一监听Vue组件报错？

1.window.onerror

• 全局监听所有JS错误

• 但它是JS级别的，识别不了Vue组件信息

• 捕捉一些Vue监听不到的错误,比如异步的报错

2.errorCaptured 生命周期 （App.vue）

• 监听所有下级组件的错误

• 返回false会阻止向上传播

• 监听要重要的、有风险的组件错误

3.errorHandler配置 (main.js)

• Vue 全局错误监听，所有组件错误都会汇总到这里

• 但是errorCaptured 返回false，就不会传播到这里

• 和window.onerror 互斥

• 异步错误 无法捕获需要用window.onerror

Promise 未处理的catch需要 onunhandledrejection

6.如果一个H5很慢，如何排查性能问题

• 前端性能指标
• First Paint(FP)
• Fist Contentful Paint(FCP)
• Fist Meaningful Paint(FMP) ——已弃之，改用LCP
• DomContentLoaded(DCL)
• Largest Contentfull Paint(LCP)
• Load(L)

Chrome devTools

• Performance 可查看上述性能指标，并有网页快照
• Nework可以查看各个资源加载时间

Lighthouse 测试报告

• npm install lighthouse

如果是网页加载慢

• 优化服务端硬件配置，使用CDN
• 路由懒加载，大组件异步加载——减少主包的体积
• 优化HTTP缓存策略

如果是网页渲染慢

• 优化服务端接口（如Ajax获取数据慢）
• 继续分析，优化前端组件内部的逻辑（参考Vue React 优化）
• 服务端渲染SSR

持续跟进

• 性能优化是一个循序渐进的过程，不像bug一次性解决
• 持续跟进统计结果，再逐步分析性能瓶颈，持续优化
• 可使用第三方统计服务，如阿里云ARMS、百度统计

要有监控，持续跟进的思维，解决了问题，还得保持住！！！

7.工作中遇到过哪些项目难点，如何解决的？

遇见问题要注意积累

• 每个人都会遇到难题，总有几个问题让你抓耳挠腮
• 日常要注意积累，解决了问题就自己写文章复盘一下
• 如果之前没有积累，就回顾一下半年之内你遇到的一个难题（肯定会有的）
• 想一下当时的解决方案，以及解决之后的效果
• 写一篇文章记录一下

话术模板
描述问题：背景+现象+造成的影响
问题如何被解决：分析+解决
自己的成长：学到了什么+以后如何避免