一、JavaScript 跨后端实现技术
Node 后端开发基础
- Web 服务器基础知识
- 简单的数据库设计能力
- 后端 MVC 设计理念
- 后端异步,Node 服务端异步编程
- 模块化思想
- 中间件技术
- 接口设计规范
- 后端部署技术和基本运维能力
MEAN 技术组合: MySQL、Express、Angular、Node
Node 后端数据渲染
SPA场景下SEO的问题
- SPA应用加载的基本流程:浏览器端先加载一个空页面和 JavaScript 脚本,然后异步请求接口获取数据,渲染页面数据内容后展示给用户
- 问题:搜索引擎抓取页面解析该页面HTML中关键字、内容时 JavaScript 尚未调用执行,仅仅是一个空页面(body为空),影响搜索引擎收录页面的内容排行。
- 解决方案:使用 Node 端数据渲染,在页面请求时将页面内容渲染到页面上输出(即,后台直出)
前后端分离方式页面渲染流程
-
DOM 下载 -> DOM 解析 -> JavaScript 文件请求 -> JavaScript 文件执行 -> 接口请求 -> DOM 渲染
-
导致数据加载显示缓慢的问题
Node 后端数据渲染流程
直出层接受前端的路由请求,并在 Node 端的 Controller 层异步请求服务接入层接口,获得 Model 层数据进行组装拼接,然后提取相对应的 Node 端 View 模板渲染出 HTML 输出给用户浏览器,而不是通过前端 JavaScript 请求动态数据后渲染
前后端同构
- 思想:在前后端分离的开发模式上加入直出层
- 核心:只开发一套项目代码,既可以用来实现前端的JavaScript加载渲染,也可以用于后台的直出渲染
- 原理:
- 数据模板的前端渲染和后台直出
- 将模板描述语法与数据进行拼接生成HTML代码字符串插入到页面特定的元素中来完成数据的渲染
- MVVM的前端实现和后台直出
- 页面加载完成后会开始扫描DOM结构中的Directive指令并进行DOM操作渲染或事件绑定,所以数据的显示仍然需要页面执行Directive后才能完成
- Virtual DOM的前端渲染和后端直出
- 在浏览器生成前端DOM结构,或在直出层直接转换成HTML文本字符串输出。Virtual DOM的逻辑实现仍然需要在浏览器端进行事件绑定来完成,最好让同构框架帮助我们自动完成,根据HTML的结构进行特定的事件绑定处理,保证最后展示给用户的页面完整且带有交互逻辑
- 数据模板的前端渲染和后台直出
二、跨终端设计与实现
Hybrid 实现方式
- 以前端为主的 Hybrid 实现方式:页面开发完成后,同构工具自动打包将前端资源目录装入 Native 容器中运行
- 优点:实现简单,利用框架即可
- 缺点:不适用于即时通讯或服务端推送的应用场景,无法添加复杂的 Native 功能
- Native 和 Web 结合的 Hybrid 实现方式
- 通过 JSBridge 协议在 Web 页面中调用 Native 功能
基于 localStorage 的资源离线和更新技术
- ServiceWorker 的资源离线与更新(目前兼容性很差,不可行)
- localStorage 的资源离线与更新
- 将 JS、CSS 资源文件甚至是接口返回的数据资源缓存到浏览器的 localStorage 中,下次打开页面时不进行资源请求,直接通过 localStorage 读取内容,然后插入到页面中解析执行
- 将最新版本号写在 HTML 页面上或者通过单独的接口请求获取,与本地版本号对比,若相同则直接读取缓存文件
- localStorage 的大小有限制(同域一般为 5M),需要实现 localStorage 静态资源的更新
- 基于增量文件的更新方式
- 需要生成不同版本到最新版本的增量更新文件,以及最新版本的全量更新文件
- 基于文件代码分块的增量更新机制(chunk 算法)
- 基于编辑距离的增量更新机制(编辑距离,指从一个字符串变换到另一个字符串所需要的最少变化操作步骤)
基于 Native 与 Web 的资源离线和更新技术
- Web 端的代码资源是通过离线包的方式发布到服务器静态目录上的,同时主站点会保存一个线上的前端页面实现供浏览器直接加载使用
- Native 应用启动时会主动拉取线上的 Web 离线包版本,与本地保存的版本进行对比,若需要更新则会去服务器上拉取最新的离线包
- 当用户访问目标页面时,Native 应用先检查该文件地址映射到的离线包本地目录中的文件,若离线包有内容则直接读取,否则线上拉取,同时通知 Native 应用去拉取最新的离线资源包
资源覆盖率统计
- 在每次新资源包发布后统计新版本的更新覆盖率
- 每次 PV 统计时带上版本号,最后根据 PV 中的版本号来统计访问不同版本上用户的分布情况
- 如果发现某个版本的使用为 0 或接近 0,该版本就无需在维护