前端面试拼图-实践经验

摘要：最近，看了下慕课2周刷完n道面试题，记录并添加部分可参考的文档，如下...

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

        路由懒加载

        适用于SPA（不适用MPA）

        本质就是路由拆分，有限保证首页加载

        服务端渲染SSR

        传统的前后端分离（SPA）渲染页面的过程复杂

        SSR渲染页面过程简单，所以性能好

        如果是纯H5页面，SSR是性能优化的终极方案

        APP预取

        如果H5在APP WebView中展示，可使用APP预取

        用户访问列表页时，APP预加载页面首屏内容

        用户进入H5页面，直接从APP中获取内容，瞬间展示首屏

        分页

        针对列表页

        默认值展示第一页内容

        上划加载更多

        图片懒加载lazyLoad

        针对详情页

        默认只展示文本内容，然后触发图片懒加载

        注意：提前设置图片尺寸，尽量只重绘不重排

        Hybrid

        提前将HTML JS CSS下载到APP内部

        在APP webview中使用file://协议加载页面文件

        再用Ajax获取内容并展示（也可结合APP预 取）

        总结：服务端SSR是H5的终极优化方案（但成本也高）

        移动端H5要结合APP能力去优化

        严格来说，hybrid不是H5，但这里回答也没有问题

        扩展：SSR

        SSR（Server-Side Rendering，服务器端渲染）是一种将页面内容在服务器端生成并直接返回给客户端的技术。相比于传统的客户端渲染（CSR，Client-Side Rendering），SSR 在首次加载页面时可以直接呈现出完整的 HTML 内容，而不需要等待 JavaScript 文件下载和执行完成后再进行页面渲染，从而提高了首屏加载速度和搜索引擎优化（SEO）效果

        SSR是一门"古老"的技术，刚刚兴起Web1.0时，就是SSR技术：PHP ASP JSP等，Vue和React框架也分别有Nuxt.js(Vue)和Next.js(React)

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

        后端返回10W条数据，本身技术方案设计不合理；

        JS可以处理10w条数据，但是渲染的DO会非常卡顿；

        自定义中间层

        自定义node.js中间层，获取并拆分这10W条数据

        前端对接node.js中间层(后端的问题优先考虑用后端的思维解决，中间件)，而不是服务端

        成本比较高

        虚拟列表

        只渲染可视区域DOM

        其他区域不显示，只用<div>撑起高度

        随着浏览器滚动，创建和销毁DOM

        虚拟列表实现起来非常复杂（且效果不一定好，例如低配手机），可借用第三方lib，例如Vue-virtual-scroll-list、 React-virtualiszed

3. 前端常用的设计模式有哪些？并说明使用场景

        设计原则

        最重要的思想：开放封闭原则

        对扩展开放

        对修改封闭

        工厂模式

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

        如jQuery $函数，React 的createElement函数

class Foo{}
// 工厂模式
function factory(a, b, c) {
  // if else
  return new Foo()
}
const f = factory(1, 2, 3)

        单例模式

        全局唯一的实例(无法生成第二个)

        如Vuex Redux的store ；如全局唯一的dialog modal

未完待续...