现代前端技术解析：前端跨栈技术

最新推荐文章于 2023-07-12 22:00:00 发布

JOY酷酷

最新推荐文章于 2023-07-12 22:00:00 发布

阅读量481

点赞数

分类专栏： Web前端读书笔记

本文链接：https://blog.csdn.net/baidu_27438681/article/details/82729441

版权

28 篇文章 1 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

MEAN 技术组合： MySQL、Express、Angular、Node

SPA应用加载的基本流程：浏览器端先加载一个空页面和 JavaScript 脚本，然后异步请求接口获取数据，渲染页面数据内容后展示给用户
问题：搜索引擎抓取页面解析该页面HTML中关键字、内容时 JavaScript 尚未调用执行，仅仅是一个空页面（body为空），影响搜索引擎收录页面的内容排行。
解决方案：使用 Node 端数据渲染，在页面请求时将页面内容渲染到页面上输出（即，后台直出）

直出层接受前端的路由请求，并在 Node 端的 Controller 层异步请求服务接入层接口，获得 Model 层数据进行组装拼接，然后提取相对应的 Node 端 View 模板渲染出 HTML 输出给用户浏览器，而不是通过前端 JavaScript 请求动态数据后渲染

以前端为主的 Hybrid 实现方式：页面开发完成后，同构工具自动打包将前端资源目录装入 Native 容器中运行
- 优点：实现简单，利用框架即可
- 缺点：不适用于即时通讯或服务端推送的应用场景，无法添加复杂的 Native 功能
Native 和 Web 结合的 Hybrid 实现方式
- 通过 JSBridge 协议在 Web 页面中调用 Native 功能

ServiceWorker 的资源离线与更新（目前兼容性很差，不可行）
localStorage 的资源离线与更新
- 将 JS、CSS 资源文件甚至是接口返回的数据资源缓存到浏览器的 localStorage 中，下次打开页面时不进行资源请求，直接通过 localStorage 读取内容，然后插入到页面中解析执行
- 将最新版本号写在 HTML 页面上或者通过单独的接口请求获取，与本地版本号对比，若相同则直接读取缓存文件
- localStorage 的大小有限制（同域一般为 5M），需要实现 localStorage 静态资源的更新
基于增量文件的更新方式
- 需要生成不同版本到最新版本的增量更新文件，以及最新版本的全量更新文件
- 基于文件代码分块的增量更新机制（chunk 算法）
- 基于编辑距离的增量更新机制（编辑距离，指从一个字符串变换到另一个字符串所需要的最少变化操作步骤）

Web 端的代码资源是通过离线包的方式发布到服务器静态目录上的，同时主站点会保存一个线上的前端页面实现供浏览器直接加载使用
Native 应用启动时会主动拉取线上的 Web 离线包版本，与本地保存的版本进行对比，若需要更新则会去服务器上拉取最新的离线包
当用户访问目标页面时，Native 应用先检查该文件地址映射到的离线包本地目录中的文件，若离线包有内容则直接读取，否则线上拉取，同时通知 Native 应用去拉取最新的离线资源包

关注