前端习题-优化报错

题目目录 后端返回 10w 条数据，该如何渲染？Vue 优化如何统一监听 Vue 组件报错？H5 如何进行首屏优化？如果一个 h5 很慢，你该如何排查问题？前端常用的设计模式？什么场景？项目难点

后端返回 10w 条数据，该如何渲染？

1.设计是否合理？沟通需求和场景。
2.nodejs自定义中间层处理数据。
3.借用第三方库实现虚拟列表。
只渲染可视区域 DOM。
其他隐藏区域不渲染，只用一个 撑开高度。
监听容器滚动，随时创建和销毁 DOM。

Vue 优化

1.v-if 和 v-show
v-if彻底销毁组件，v-show使用css隐藏组件。
大部分情况下用v-if。

2.v-for 使用 key
key 可以优化内部的 diff 算法。注意，遍历数组时 key 不要使用 index 。

3.computed 缓存
computed 可以缓存计算结果，data 不变则缓存不失效。
比如缓存消息列表中未读消息的数量。

4.keep-alive
可以缓存子组件，只创建一次。通过 activated 和 deactivated 生命周期监听是否显示状态
频繁切换的组件，如tab。
不要乱用，缓存太多会占用内存。

5.异步组件
针对体积较大的组件。拆包，需要时异步加载，不需要时不加载。
减主包的体积，首页会加载更快。

6.路由懒加载
项目比较大，拆分路由，保证首页先加载。

7.SSR
SSR 让网页访问速度更快，对 SEO 友好。
按需优化，成本较高。

8.压缩资源，拆包，使用 CDN ，http 缓存等。

连环问：Vue 遇到过哪些坑？

内存泄漏
全局变量、全局事件、全局定时器、自定义事件绑定完没有销毁。

Vue2响应式缺陷( Vue3不再有)
无法监听 data 属性的新增和删除，以及数组的部分修改。

新增 data 属性，用 Vue.set。
删除 data 属性，用 Vue.delete。
修改数组某一元素，不能 arr[index] = value ，要使用 arr.splice API 方式。

路由切换时，页面会 scroll 到顶部
例如，在一个新闻列表页下滑到一定位置，点击进入详情页，再返回列表页，此时会 scroll 到顶部，并重新渲染列表页。SPA 的通病，并不仅仅是 Vue 。

解决方案：
在列表页缓存数据和 scrollTop值；返回列表页时，使用缓存数据渲染页面，然后 scrollTo(scrollTop)。
终极方案：MPA + APP WebView

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

1.window.onerror
全局监听当前页面所有的 JS 报错。
是JS级别，识别不了Vue组件信息。
捕捉一些Vue监听不到的错误。
组件内的异步错误 errorCaptured、errorHandler 监听不到，还是需要 window.onerror

2.errorCaptured 生命周期
会监听所有下级组件的错误。返回 false 可以阻止向上传播，因为可能会有多个上级节点都监听错误。

3.errorHandler 配置
监听全局Vue组件的错误，所有组件的报错都会汇总到这里来。
但errorCaptured 返回 false ，则不会传播到这里。
errorHandler 会阻止错误走向 window.onerror

H5 如何进行首屏优化？

1.路由懒加载
适用于SPA。
路由拆分，优先保证首页加载。

2.服务端渲染SSR
传统的 SPA 渲染过程复杂。
而 SSR渲染页面过程简单，性能好。
如果是纯 H5 页面，SSR 就是性能优化的终极方案(但成本也高)。

3.App 预取
如果H5在App WebView 中展示,可使用App预取。
用户访问列表页时,App预加载文章首屏内容。
用户进入H5页,直接从App中获取内容,瞬间展示首屏。

4.分页
针对列表页。
默认只展示第一页。
内容上划加载更多。

5.图片懒加载
针对详情页。
默认只展示文本内容，然后触发图片懒加载。
注意：提前设置图片尺寸，尽量只重绘不重排。

6.Hybrid
提前将 html css js 等下载到 App 内。
在webview 使用 file:// 协议加载页面文件。
再 ajax 获取内容并展示(可以结合 App 预取)。

如果一个 h5 很慢，你该如何排查问题？

1.通过工具分析性能指标
2.识别问题：加载慢？渲染慢？

加载速度慢。则考虑网页文件、数据请求的优化运行卡顿，体验不流畅。则考虑内存泄漏、节流防抖、重绘重排的方面

3.解决方案

加载慢
优化服务端硬件配置，使用 CDN。
路由懒加载，大组件异步加载-减少主包的体积。
优化HTTP缓存策略。渲染慢（可参考“首屏优化”）
优化服务端接口（如Ajax获取数据慢）。
继续分析，优化前端组件内部的逻辑(参考Vue优化)。
服务端渲染SSR。

4.持续跟进、优化、增加性能统计。

相关知识1. 前端性能指标

First Paint (FP)：第一次渲染First Contentful Paint（FCP）：第一次有内容的渲染First Meaningful Paint（FMP）：第一次有意义的渲染
主流的分析工具都已弃用 FMP 而使用 LCP。DomContentLoaded（DCL）：DOM内容全部加载完成Largest Contentful Paint（LCP） ：最大内容的渲染Load（L）：页面内容（包括图片）全部加载完成
即 window.onload 触发时间。

相关知识2. 性能分析工具

Chrome devtools
Performance 可以检测到上述的性能指标，并且有网页快照截图。
NetWork 可以看到各个资源的加载时间。Lighthouse 第三方性能评测工具

前端常用的设计模式？什么场景？

设计原则是设计模式的基础，开放封闭原则是最重要的：对扩展开发，对修改封闭。

1.工厂模式
用一个工厂函数，创建一个实例，封装创建的过程。隐藏new
应用场景：

jQuery $ 函数。 $('div') 创建一个 jQuery 实例React createElement函数。createElement('div', {}, children) 创建一个 vnode

2.单例模式
全局唯一的实例(无法生成第二个)。
应用场景：

Vuex Redux 的 store ，全局唯一的全局唯一的 dialog modal

3.代理模式
使用者不能直接访问对象，而是通过一个代理层来访问。
代理层可以监听get set 做很多事情。
ES6 Proxy 本身就是代理模式，Vue3 基于它来实现响应式。

4.观察者模式
即常说的绑定事件。一个主题，一个观察者，主题变化之后触发观察者执行。

btn.addEventListener('click', () => { ... })

5.发布订阅模式
即常说的自定义事件，一个 event 对象，可以绑定事件event.on()，可以触发事件event.emit()。解绑事件event.off()。

6.装饰器模式
原功能不变，增加一些新功能(AOP面向方面编程)
ES 和 TS 的 Decorator 语法就是装饰器模式。
类装饰器，方法装饰器。

连环问：观察者模式和发布订阅模式的区别？
观察者模式

Subject 和 Observer 直接绑定，中间无媒介如 addEventListener 绑定事件

发布订阅模式

Publisher 和 Observer 相互不认识，中间有媒介(Event Channel)如 eventBus 自定义事件

连环问：MVC 和 MVVM 有什么区别
MVC 原理：

View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈

MVVM 直接对标 Vue 即可：

View 即 Vue templateModel 即 Vue dataVM 即 Vue 其他核心功能，负责 View 和 Model 通讯

项目难点 描述问题：背景，现象，造成的影响问题如何被解决：分析、解决自己的成长：从中学到了什么，以后会怎么避免