本文主要是介绍前端面试拼图-实践经验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
摘要：最近，看了下慕课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 elsereturn new Foo()
}
const f = factory(1, 2, 3)
单例模式
全局唯一的实例(无法生成第二个)
如Vuex Redux的store ；如全局唯一的dialog modal
未完待续...
这篇关于前端面试拼图-实践经验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
