浅析前端技术项目问题

浅析前端技术项目问题

H5页面怎么实现首屏优化

路由懒加载

• 适用于SPA
• 路由拆分，保证有限加载首页
• 使用inport或request

服务端渲染SSR

• SSr成本较高，是性能优化的终极方案
• Nuxt.js Next.js

App预取

• 如果H5在webview中展示，可以直接用App预取。
• 用户访问列表时，预加载文章首屏内容
• 用户进入H5，直接获取预加载的内容，瞬间展示首屏
• 如微信公众号文章的列表，在浏览列表的时候就已经预加载首屏了。

图片懒加载LazyLoad

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

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

设计不合理

• 后端返回 10w 条数据，本身技术方案设计就不合理
• 主动和面试官沟通此事（这也许是面试官所期待的

浏览器能否处理10w条数据？

• JS没问题
• 渲染到DOM会非常卡顿

自定义中间层

• 自定义 nodejs中间层，获取并拆分这10w条数据
• 前端对接nodejs中间层，而不是服务端
• 成本比较高

虚拟列表

• 只渲染可视区域DOM
• 其他隐藏区域不显示，只用DIV撑起高度
• 随着浏览器滚动，创建和销毁DOM
• 实现可以借助第三方lib vue-virtual-scroll-list

前端常用的设计模式？说明使用场景

设计原则

• 最重要的思想：开闭原则
• 对扩展开放
• 对修改封闭

工厂模式

• 用一个工厂函数，来创建实例，隐藏new

单例模式

• 全局唯一的实例
• 如Vuex Redux的store

代理模式

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

观察者模式

• addEventListener

监听者模式

装饰器模式

• 原功能不变，增加新功能（AOP面向切面）

观察者模式和发布订阅的区别

观察者模式

• Subject 和 Observer 直接绑定，没有中间媒介
• 如 addEventlistener 绑定事件

发布订阅

• Publisher 和 Observer 互不相识，需要中间媒介
• Event channel 如 EventBus 自定义事件

Vue的性能优化

• v-if和v-show
• v-for key使用id，不使用index
• 使用computed缓存大量使用的数据
• keep-alive缓存频繁切换组件
• 异步加载体积比较大的组件
• SSR服务端渲染

前端的性能指标

• FP first print 页面开始渲染
• FCP first content print 页面第一次有内容的渲染
• FMP first meanful print 页面第一次有意义的渲染（有用户体验）不是一个具体的标准
• DCL DomContentLoaded DOM事件，页面的DOM渲染
• LCP

lighthouse

• 流行的第三方性能分析工具
• 给出性能指标，内存快照，优化建议

如果是网页加载慢

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

如果是网页渲染慢

• 优化服务端接口
• 优化前端组件内部逻辑