前端技术架构与工程
2024-02-21 11:40:15 0 举报AI智能生成
登录查看完整内容
前端 前端技术栈 前端架构师 前端架构 web前端
作者其他创作
大纲/内容
解耦和复用
组件化旨在解决的主要现实问题
component 是比 module 粒度更细、更小的片段
自然语言
前端领域内模块和组件的语义为：模块和组件均为可分离的、有独立功能的一种封装对象模块强调功能性，并非一定与视图相关。一个完整的应用程序由多个模块组成组件强调组合性，是一个视图片段的逻辑抽象。粒度比模块细，一个模块可包含一个或多个组件
编程语言基元
对象
组件
模块
应用程序
软件编程
组件和模块的定义和边界
是 W3C 推出的一套用于封装具有复用性、互用性前端组件的技术规范，旨在提供一种标准的组件化模式。
创建自定义 HTML 元素或扩展内置元素
结构
表现
行为
前端组件三要素
缺少与全局隔离的命名空间
缺点
自定义元素（Custom Elements）
创建隔离作用域，实现 DOM、样式和逻辑的封装
iframe 封装了一个完整的执行上下文
Shadow DOM 封装了一个较轻量级的局部作用域
与 iframe 的区别
CSS 代码和 HTML 结构混在在组件的内部逻辑中，长字符串令代码过于臃肿，缺乏良好的可读性和可复用性
Shadow DOM
是一个有既定格式的处理器，输入数据输出 HTML 字符串
slot 机制
扩展组件
使用时，要引入 JS 文件并在 HTML 文档中编写 <template> 结构才能使用自定义元素 <my-dialog>。组件源码和业务代码耦和在了一起。
HTML template
将组件源码和业务代码分离，外层业务代码只需要引入一个 JS 文件即可使用对应的组件
对于组件本身，基于结构、表现和行为分离的原则，保持其 CSS、JS 和 HTML 代码的相对独立性
优化
需要使用 node 中的 fs 模块读取文件
编译器
compile.js
能在运行时将<template>元素注入 HTML 文档中
runtime.js
分离后的组件源码需要经过转换后才能正常工作
CSS、JS 和 HTML 模版分别为独立的文件
多文件组件
其中使用到了 jsdom 将文本转化为 document 对象
将 JS、CSS 和 HTML 汇总在一个文件中编写
单文件组件
组件源码的组织结构
更友好的编码方式
是一系列技术的集合
核心围绕 DOM 展开，数据传递依靠 DOM 的属性，Shadow DOM 和 <template> 本质上也是 DOM。自然而然具有 DOM 的一些特性和限制：span style=\
自定义元素的生命周期设计理念
优点
优缺点
Web Components 规范解读
利用浏览器执行帧机制，尽可能批量处理对 DOM API 的调用
具体代码编写细节
借助 Canvas 取代一部分 DOM
虚拟 DOM
架构模式
减少 DOM 操作
由于 JS 的单线程特性，钩子函数的命名绝不能使用正在进行时
DOM 自身的一些钩子函数，如 onload、onerror 等，在对应事件完成之后被触发
注意
命名
生命周期的设计艺术
前端组件的设计模式
为前端组件化制定了相对统一的模式和方向
自定义元素的生命周期理念也为组件的设计提供了优秀的参考
Web Components 规范对前端组件化的引导意义远大于现实意义
总结
3. 组件化/设计子模块
前端技术的演进
交互逻辑复杂度的提升
前后端分离的助力
是面向对象思想中关注点分离原则的一种实践模式
业务特征（核心）
人员配备
组织架构
考虑因素
HTML 渲染（前后端耦和最紧密的环节）
会话管理？？指的是 session 管理？
用户认证和鉴权
跨域处理
关注点
借助 AJAX 可以实现数据接口的松耦合
数据接口
舍弃 SSR 的 SPA 完成了 HTML 渲染的绝对解耦，但需要考虑两者对 SEO 和用户体验的影响
Node.js 中间层兼顾渲染和接口代理，但如果要达到更好的 SEO，则需要保证客户端路由和 Node.js 服务路由之间的一一映射和优雅降级；为提高用户体验还需考虑同构动态组件的客户端恢复。其在架构上的复杂性远大于传统的 SSR Web 应用架构
HTML 渲染
前后端的两个关联
用户和市场
所有软件产品的核心关注点
对于内容偏静态或完全静态的 Web 网站来说，SEO 是非常重要的市场推广途径之一
如何在前后端解耦的同时兼顾 SSR 以保障 SEO，是前后端分离架构设计过程中的核心关注点之一
SEO
前端途径
其他途径
推广产品争取更多用户
保障产品功能的正确性和稳定性（根本）
普遍意义上，在首屏响应速度方面 SSR 比 CSR 表现更好
缩短关键渲染路径（CRP）
提高首屏渲染速度
在客户端建立完善的临时数据和路由管理体系？？的 SPA 能够提供更快速的操作反馈，并且可以支持离线场景，这是采用 SSR 的常规 Web 架构不可比拟的优势
用户在页面上的操作得到快速响应
前端性能优化方向
提高交互流畅度、快速反馈用户操作，即提高用户可见性能
改进产品提高现有用户黏性
实施方向
依据自身业务对 SEO 和 性能 两项指标的偏重程度来决定具体的架构模式
在设计前后端分离架构之前必须确定的基本准则
业务关注点
前后端耦和违背分层的理念，在于将交互逻辑与业务逻辑混合在一起
前后端分离在架构层面的核心优势是让前后端各自拥有高度的独立性和内聚性，类似于黑盒或纯函数，只需保证输入与输出的匹配（通常为接口）而无须关注彼此内部的逻辑
架构关注点
前后端并行开发
单元测试？？
动静资源分离部署
开发的保质高效产出
前后端开发者明确的职责划分
bug 的保质快速解决
效率切入点
提升效率，降低人力和时间成本
工程关注点
关注点分离（前后端分离在业务、架构和工程角度的不同关注点）
实现了前后端的绝对解耦，接口是两个领域唯一的关联。与前后端分离在架构与工程方面所有的关注点几乎完全契合
在浏览器环境下建立前端路由策略将所有子页面进行统筹管理，页面之间的跳转被映射为组件的更换或函数的调用，向服务端发起的网络请求仍然只是接口的调用，将渲染完全从服务端剥离。
动态性优势？？
虽然有途径可以弥补，但是难以达到 SSR 的水准，并且实施成本非常高。所以在现实工作中，SPA 项目大多不考虑 SEO，典型的是 Hybrid 应用和短期的活动页。
弱 SEO
需要先等待 JS 文件加载完成，然后请求接口，最后渲染 HTML。所以需要在性能优化上花费更多精力，包括设计和技术，如骨架屏、JS 模块化按需加载、图片懒加载等。
首屏时间长
使用 URL 的 hash 标识作为路由标记，通过监听 hashchange 事件实现回调逻辑
hash 标识改变后，浏览器并不会将其判定为新的 URL 进而以新 URL 发起网络请求
不需要服务端支持，是前端完全自主的路由极致
History 路由依赖 HTML5 规范新增的 History API 的 History 路由
兼容性更优
Hash 模式
使用 URL 的 path 作为路径标记，借助 History API 及其相关事件实现跳转和回调逻辑
History 路由支持刷新的前提条件是服务端将所有子路由的请求 rewrite （不是 redirect）到根路由，然后前端在浏览器环境下进行子路由恢复
在前后端整体架构上不同于 Hash 路由最显著的一点是需要服务端的配合
代码中借助了 CustomEvent API 实现自定义事件
能被爬虫程序抓取到路径，然而仅路径被抓取还远不足以支撑 SEO，因为页面的本质仍然是 CSR 的 SPA我的理解：既然没有实际的用处，那就不算是优点
History 模式
前端路由的实现方式
SPA 这种极端分离模式的基本架构模型和路由管理方案
SPA
更好的 SEO
Node.js 服务器只输出 html
输出
无代理 Node.js 服务器
输出 html 文件，并且会代理 js 文件？？
后端开发人员不必在跨域问题上花费精力（虽然并不复杂）
可以承担一定的验证功能？？
可以通过汇总多个接口在一定程度上降低交互逻辑的复杂度？？
优势
有代理 Node.js 服务器
接口仍然是前后端唯一的关联，但具体的关联方式可以根据 Node.js 中间层是否具有代理功能分为两种
将渲染从后端解耦
为前后端（这里的后端指 Node.js 中间层）同构 JavaScript 编程提供了可行性（对前端的革命性影响）
Node.js 中间层的目的
令 JS 编写的代码既可以在浏览器端工作，也可以在服务端工作
目的
客户端和服务端使用同一种编程语言
语言同构（最表象含义）
一个组件同时兼容客户端和服务端运行环境
组件同构
客户端和服务端可以实现相同的功能？？
功能同构（最终目标）
三层含义
渲染
主要功能
字符串处理
工作本质
接下来的内容没有看懂，工作中要用到 SSR 时先看 Vue 的 SSR 文档，之后再来理解此书的内容
同构 JavaScript
以 Node.js 作为中间渲染层的同构 JS 编程基本模式
对于常规？？的前端项目而言，如果硬件？？和学习成本在可接受范围内，兼顾 SEO、性能和客户端动态性的同构 JS 是非常理想的前后端分离架构模式
Node.js 中间层
最常见的两种分离模式
前后端分离
可用多维度可量化的客观指标衡量
键入 URL 后尽可能快地将内容展示给用户（首屏渲染速度）
在动态交互场景下用户的感受有一定的主观色彩
提高用户操作的反馈速度和流畅度
性能优化的两个方面
PC
平板
手机
类型
CPU
内存大小
硬件配置
Windows
Android
iOS
操作系统及其版本
设备特征
品牌及版本
浏览器特征
光纤
WiFi
4G
连接方式
运营商
地区
带宽
网络情况
根据 Web 应用特征对客户端场景参数进行细化
为以上参数赋予固定的值从而将应用限定在一致的客户端场景中，然后再逐指标进行对比，这是制定性能评估模型最基础的原则
从用户输入 URL 并按下回车键到浏览器屏幕被网页填满
尽快完成首屏呈现
优化目标
将用户在浏览器地址栏中输入 URL 按下回车键那一刻
计时起点
有可视化的图像被渲染到浏览器视窗中的那一刻
计时终点
注意：DNS 的解析工作由 DNS 服务器完成，浏览器是请求发起方与响应接收方
域名查询
与 Web 服务器建立 TCP 连接
发送 HTTP 请求
接收并渲染响应的 HTML 文档
期间浏览器的工作（可参考 性能脑图 中 浏览器如何工作部分）
白屏时间
用户按下回车键开始
解读1
白屏时间的终点时刻（本书是按照此描述）
解读2
浏览器视窗的第一屏首次完全渲染完毕的时刻
首屏时间
视觉角度提高网站内容的渲染速度
这里的操作反馈指的是通过 JS 实现的交互功能
网站首次可以响应用户操作的那一刻
可交互节点
交互角度缩短从打开网站到可交互之间的时间间隔
优先级最高的内容被首次渲染的时间节点
首次有效绘制
更快将广告展示给用户，能间接提高与广告商之间的议价
广告可视节点
业务性能指标
衡量指标
首屏加载阶段（加载性能）
首屏内容全部加载完成后，网站便进入可交互阶段
尽可能快地响应用户的操作
反馈速度
在涉及数据量庞大、计算密集且强交互的应用中，实现 50 帧以上的动画并不简单
动画帧率
关键渲染路径（必要元素渲染路径）
业务指标
可交互阶段（动态性能）
Web 应用程序的生命周期
与业务无关的技术性能指标
业务性能指标（有时候比技术性能指标要重要很多）
性能指标类型
Web 应用性能评估模型
书签管理器
窗口管理器
...
可视的交互功能模块
历史记录管理
不可见数据管理模块
应用层
HTML、CSS、SVG 等语言的解释器
JS 引擎
布局、绘制等与渲染相关的模块
渲染引擎（优化 Web 应用性能的主要突破点）
多媒体解码器
图形库
相对底层的功能模块集合
内核层
提供一些浏览器所需的系统 API，比如多线程、文件 IO 等
操作系统
浏览器的大致架构
建立 TCP 连接成功之后始终保持连接状态以实现复用
避免了每次 HTTP 请求都关闭 TCP 连接的 4 次握手，以及新请求重新建立 TCP 连接的 3 次握手，减少了 3 RTT 和慢启动 耗时
需要消耗更多的服务器资源，加重了服务器负载，但与带来的收益相比，这些成本投入是值得的
keep-alive（持久连接）
在 HTTP2.0 尚未普及之前，各浏览器为提高处理 HTTP 请求效率的方式非常简单粗暴，目前主流浏览器支持每个域名同时打开 4-8 个 TCP 连接。
以浏览器并行请求为前提，为充分发挥并行请求的优势，目前一种主流的优化方案是将 Web 服务接口根据业务归属到不同的子域名下，静态资源托放的 CDN 服务器也划分出多个子域名，这种方案被称为域名发散。
维持多个持久连接必然需要占用客户端以及服务端更多的资源（CPU 和内存等），如果一个 Web 应用主要面向的是硬件配置相对较差的移动设备（手机），需要格外慎重
域名发散并不意味着可以无节制增加子域名的数量，域名的增加必然产生更多的 DNS 查询和 TCP 慢启动，这些行为带来的延迟在本身就存在高延迟的移动网络环境下被进一步放大。
域名发散
移动端 Web 应用常使用的一种优化方案是合理减少域名数目
减少无线网络下大量 DNS 查询造成的高延迟
这在一定程度上放弃了并行请求的优势，如果资源数量很多，可以使用 HTTP combo 减少请求数量，进而提升应用的加载性能
域名收敛
并行请求
是一种应用层方案
http://static.app.com/a.jshttp://static.app.com/b.js
常规模式
http://static.app.com/?a.js&b.js
HTTP combo 模式
将多个静态文件作为 URL 参数发送给服务器，然后服务器将两个文件合并为一个 JS 文件回传给客户端。支持 combo 的服务器必须能够解析 URL 参数，解析工作可以在 Ngnix 层完成。
实现原理
HTTP combo
减少 RTT（Round-trip delay time，通信往返时间） 总数量
广泛采用各种缓存服务器（存放频繁访问内容的服务器），将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
原理
被广泛应用于搭建静态文件服务
CDN
缩短 RTT 时长
从底层解决问题的革新技术
HTTP 2.0（HTTP 脑图中的“演变”部分）
浏览器兼容性不理想？？
服务器迁移成本太高？？要如何迁移？？
短时间内 HTTP 2.0 难得到普及（这里和 mdn 文档中说的不一样），所以网络优化策略仍主要面向HTTP1.1
持久连接
使用CDN
无法合并的小体积文件使用 HTTP combo
控制域名数目
整体架构
压缩文件体积
合并小体积文件，使用雪碧图和字体图标
按需加载，避免不必要的下载
减少请求文件数量
合理使用缓存
前端
网络优化策略
网络
查看性能脑图中的“浏览器如何工作/4. 渲染”与“js 的 async 与 defer attribute”
宏观结构
指前端代码逻辑而非浏览器本身的运算能力
见脑图中的“内存管理”部分
内存管理
运算
代码层面
今天的复杂图形类 Web 应用（如游戏、地图、WebVR 等）也非常接近浏览器运算能力的瓶颈。对于从事这些行业的前端开发者来说，必须想尽一切办法将浏览器的运算能力发挥到极致。
极限运算性能
加载性能与动态性能的症结所在
从 URL 到图像的完整流程性能脑图中的“浏览器如何工作”部分
浏览器运行 Web 应用的机制
浏览器运行 Web 应用的机制以及 GC 策略对性能优化的启示
探索浏览器运算性能的极限
性能
业务是核心出发点
研究前提
硬件成本
人员成本
时间成本
成本超标
性能不理想或功能不稳定
开发过程混乱无序难以管理
代码不规范，维护成本高
典型的软件危机
软件工程初衷是为了解决软件危机
在架构之外，从更宏观的角度完善开发和维护流程管控
规范有序可控高效辅助
目标
工程
高可用可扩展高性能安全
架构
业务逻辑
交互逻辑
业务
架构与工程
当架构难以满足日益增长的功能需求时，如果任其野蛮生长，系统碎片化会越来越严重、越来越无序，最终达到一个难以继续维护和扩展的阈值，便会得到一种极端的结果：彻底重构。架构师需要通过及时、有效的干预，保持系统的有序。
分解问题，各个击破
分治
合并模块，协同运行
聚合
软件架构的两个基本要素
通过合理解耦各个组件/层级的功能提高系统的高效性和灵活性所有组件/层级在完成各自功能的同时组合为完整的软件系统
基本原则
在充分了解语言特性的前提下 制定适用于业务类型的开发规范和技术栈
是标记类语言，原始语法简单且缺乏可编程性，所以通常会借助一些工具和框架，另源码具有可编程性，以便维护和迭代。前端架构师的工作之一便是选择适用于业务类型、同时可提高开发和维护效率的工具和框架，并制定相应的开发规范。
HTML 与 CSS
会给大型项目和复杂架构带来了一定隐患。所以很多情况下需要通过框架或规范去限制 JavaScript 的灵活性
灵活性
避免回调地狱令源码更利于迭代和维护并同时兼顾性能
异步编程
JavaScript
编程语言
编码规范
源码组织结构
依赖管理
第三方技术选型
内容
一致性
原则
技术规范
怎样才叫做封装的好？？目前觉得可以先看设计模式，然后再找其他的组件化资料
封装性
扩展性
可组合性
可复用性
质量指标
基础组件
业务组件
分类
组件化
将前端开发和后端开发解耦，实现开发、维护、部署甚至发布的相对独立性，提高开发效率和快速响应问题
成本低
可离线？？
不利于传统的 SEO，适用于无 SEO 需求的应用，如 Hybrid 应用
SPA 架构
首屏速度快
SEO 友好
同构编程的可能性？？
实施成本高
Node.js 渲染层
方案
首屏加载时间
操作响应速度
用户角度
服务器分布式架构
负载均衡
数据缓存层
Web 应用整体架构的任何环节（包括软件和硬件）都能影响网站的性能
技术角度
加载性能
快速响应用户操作
执行性能
⚠️ 注意：要在性能和功能之间进行权衡
前端角度
前端架构的几个层级
根据业务特征设计合理的前端技术架构
降低开发本身所消耗的人力成本
跨团队协作消耗的沟通成本非常昂贵
降低跨团队协作消耗的沟通成本
核心是成本控制
重复性体力劳动
个人独立开发
历史代码交接、模块集成消耗的人力和沟通成本
团队协作开发
由各团队技术规范差异和开发进度不同步所消耗的时间、人力和沟通成本
跨团队协作开发
三种开发模式的成本消耗
减少重复性体力劳动建立统一的技术规范辅助跨团队并行开发
前端工程服务体系针对开发阶段的目标
开发
将源代码转换为客户端可执行代码
压缩混淆、自动生成 CSS Sprite、动态模块按需加载
性能优化
给静态资源 URL 加入 Hash 指纹和 CDN 路径？？？等
部署策略
文档生成、动态构建？？？等
开发效率
规范审查、性能评估等
审查评估
构建
得益于 React\\Vue 等前端框架的流行，在 Node.js 环境中将 HTML 文档内容渲染为字符串，从而可以进行 UI 快照测试？？？
GUI（图形用户界面（Graphical User Interface）） 应用普遍难以测试
制定统一代码规范甚至编程范式对 JavaScript 的灵活性进行一定程度的限制，使其更容易测试
前端技术过于灵活
困难与解决
测试
简单讲是把代码“放”到指定的服务器上
部署
前端本身的交互逻辑
一旦出现 bug，用户的第一反应是前端的问题。前端团队接受反馈调试发现是服务端的问题，然后反馈至相关团队。这是一个非常漫长的过程，并且会消耗大量的沟通成本。
如果可以在前端调用接口没有返回预期结果时（通过何种机制来判断接口是否返回了预期结果？？）立即反馈至监控平台并且报告错误信息，开发团队便可以在第一时间定位到问题的症结，缩短修复问题的时间
前端稳定性监控
监控与统计
根据架构特征搭建高效的前端工程服务体系
前端架构师职责
前端架构与工程概述
为了选择适用于业务的架构模式和技术选型
根据语言特征制定技术规范和开发范式，提高个人和团队的开发与维护效率
由于前端语言的单一性，“编程语言仅仅是一种工具”的论调并不适用于前端
为什么要从架构层面思考编程语言
浏览器向网站发起请求服务器接收到请求后先查询数据库中的动态数据，然后将数据通过模板引擎编译为 HTML 字符串返回给浏览器浏览器接收到 HTML 后将其渲染为可视化的 UI
工作流程
支持 SEO
首屏时间短
有更深的技术沉淀和产业生态
交互简单、以静态内容为主并且有 SEO 需求的业务产品
应用场景
借助于服务端编程语言或框架搭配的 HTML 模板引擎将数据编译为 HTML 文档，比如适用于 Java 的 FreeMarker、适用于 PHP的 Smarty 以及适用于 Node.js 的 Pug 等。模板引擎可以被理解为一个功能强大的字符串处理工厂。
Pug 也提供了 pug.render() 系列的函数，它们把编译和渲染两个步骤合二为一。当然，在每次执行 render 的时候，这样一个模板函数都需要被重新编译一遍，这会在一定程度上影响性能。但同时，您也可以在执行 render 的时候配合使用 cache 选项，它将会把编译出来的函数自动存储到内部缓存中。
缓存
快速
非 Node.js 技术栈渲染速度要求高
适用场景
传统模板引擎
节约了一定的开发成本在一定程度上加强前后端试图逻辑的统一性
同构编程（这里的意思是同一组件在客户端和服务端都能被编译成HTML字符串）
技术栈迁移成本高
必须依赖 Node.js 环境
SSR仅仅使用框架中将数据编译为字符串的几个API，其他只适用于浏览器环境的API（如生命周期钩子）便成了冗余
性能差
劣势
Node.js 技术栈渲染速度要求略低
React/Vue SSR
具体实现
SSR
浏览器向网站发起请求服务器接收到请求后立即返回静态的HTML部分，这部分内容通常是与用户无关的静态数据浏览器解析HTML文档，待JavaScript脚本加载完成之后发起异步请求，获取动态数据服务器接收到异步请求后查询数据库并将动态数据返回给浏览器浏览器接收动态数据后使用JavaScript将数据编译为HTML字符串并渲染为可视化的UI
服务器的硬件配置通常优于个人终端设备，同时搭配模板引擎的缓存功能，SSR在速度上的优势要远远大于CSR。随着个人终端设备硬件性能的不断提升，CSR与SSR在速度上的差距逐渐减小；网络传输速度和浏览器性能的提升也缩短了首屏等待时间。
首屏渲染速度慢
弱SEO
更好地支持前后端分离方案的实施
更好地支持离线场景？？
基于组件的前端路由管理在速度和灵活性上优于依赖服务器路由驱动的MVC模式
是交互设计上的优化
所谓预渲染，就是在项目的构建过程中，通过一些渲染机制，比如 puppeteer 或则 jsdom 将页面在构建的过程中就渲染好，然后插入到 html 中，这样在页面启动之前首先看到的就是预渲染的页面了。但是该方案最终也抛弃了，预渲染渲染的页面数据是在构建过程中就已经打包到了 html 中， 当真实访问页面的时候，真实数据可能已经和预渲染的数据有了很大的出入，而且预渲染的页面也是一个不可交互的页面，在页面没有启动之前，用户无法和预渲染的页面进行任何交互，预渲染页面中的数据反而会影响到用户获取真实的信息，当涉及到一些价格、金额、地理位置的地方甚至会导致用户做出一些错误的决定。因此我们最终没有选择预渲染方案。
预渲染与其缺点
通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添？？，对已有元素通过层叠样式进行覆盖？？，这样达到在不改变页面布局下，隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。然后将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了。？？
Headless Chrome Node.js API
Puppeteer
A headless browser is a great tool for automated testing and server environments font color=\"#924517\
Why is that useful?
Headless Chrome
基本方案
如何构建骨架屏
为了骨架屏的可编辑
在开发过程中对骨架屏进行编辑，修改部分样式，中部骨架屏可以进行实时预览，这之间的通信都是通过websocket 来完成的
为什么在开发过程中生成骨架屏
<div id=\"app\"><!-- shell.html --></div>我们在项目构建的过程中，将骨架 插入到上面代码注释的位置，这样在应用启动前，展示的是骨架屏，当应用启动后，将真实数据渲染的页面替换骨架屏页面。
Webpack 在整个打包的过程中提供了众多生命周期事件，比如compilation 、after-emit 等，我们最终将骨架屏插入到 html 中就是在after-emit 钩子函数中进行的
怎样将骨架屏打包到项目中
通过 webpack 将骨架屏打包到项目中
饿了么自动化生成骨架屏方案
骨架屏
实施成本低，不涉及服务端开发
本质上与首页 ssr、动态内容 ajax 的模式大同小异，对于存在大量路由和动态数据的 SPA 项目而言，对 SEO 的提升微乎其微。
构建阶段预渲染SPA的静态内容到 index.html
可以将完整的 HTML 文档提供给爬虫程序
额外的开发工作
硬件设备支持
部署成本昂贵
prerender.io
可以使用第三方云服务
在构建阶段将 SPA 各页面提前解析并存放于预渲染服务器中
Hash 模式使用的是 URL 的片段标识符，本身的语义是主文档的一个片段标记，并非路由标记。Hash 改变后不会向服务器发起请求，所以无法给爬虫程序提供完整的子页面数据。
SPA 的路由管理必须使用 HTML5 History 模式而非 Hash 模式，并且需要服务器支持。对于需要兼容低版本浏览器的SPA项目来说，此方案性价比不高。
服务器判断请求来源，将爬虫请求重定向到预渲染服务器，使用 Headless Chorme 预渲染 index.html
普遍的弥补方案
SEO（Search Engine Optimization）
CSR
资讯类网站首页、内容详情等需要 SEO 的页面使用 SSR；用户中心、管理后台等无须 SEO 的页面可以使用 CSR
根据业务特征（SEO 的重要程度）选择
HTML
书写繁琐（不支持嵌套）样式易冲突（没有作用域概念）缺少变量（不便于一键换主题）...
css 本身的缺陷
更易于编写和维护
嵌套语法
弥补了 CSS 逻辑处理和复用性方面的不足
变量、混合、模块、继承等特性
大而全，导致代码规范难以约束？？ 没有一些类似 jsLint 的工具来检测？？
只有极少数编译器支持开发者扩展自定义插件，核心架构过于封闭，缺少插件生态
难扩展
预处理器，以 LESS 为例
最初被定位为“CSS后处理器”，但后续的演进并未被束缚在后处理器的范畴，逐渐进化成一个全面的“CSS转化工具”
PostCss 的内核并不会对 CSS 做任何转化，而是将原始的 CSS 代码转化为抽象语法树并传递给各个插件，插件根据用户配置对 AST 进行处理后还原为最终的 CSS 代码
PostCss
preprocessor 和 PostCss
CSS Modules
jsx 已经将 js 和 html 框定到一个组件中，但是css 依然处于分离状态，这就导致了每次引用组件却还需要显示引入 css。 css-in-js 是正式彻底组件化的解决方案。
原生 CSS 和 SASS、LESS 的模块实质上仅仅是子文件，并非真正意义上的模块。将 JS 的模块体系带入 CSS 开发领域可以有效弥补 CSS 模块体系的补不足。
CSS-in-JS 在编译时（有些是在运行时）为组件产生唯一的 classname 以及对应的选择器规则，将组件及其内部元素的样式限制在唯一的命名空间内，从而实现样式的隔离
命名空间
依据我目前的了解，这和“命名空间”的优点，CSS Modules 都有
动态性
大概率指的是 webpack 中对 js 的 tree-shaking 功能
一定程度上减少无效代码
非常适用于组件化架构
指的是不好移植其他 CSS 技术方案的项目中？？不好进行CSS代码的复用？？这需要对此方案有更深入的了解，以后需要用到时再研究
一定程度上限制了代码的可移植性
昂贵的学习成本
额外工具引入
编程过程中需要在 HTML、CSS、JS 三种上下文语境之间频繁切换，在某种意义上背离了关注点分离原则。
关注点分离是日常生活和生产中广泛使用的解决复杂问题的一种系统思维方法。大体思路是先将复杂问题做合理的分解，再分别仔细研究问题的不同侧面(关注点)，最后综合各方面的结果，合成整体的解决方案。关注点分离是计算科学和软件工程在长期实践中确立的一项方法论原则。此原则在业界更多的时候以分而治之的面目出现，即将整体看成为部分的组合体并对各部分分别加以处理。模块化是其中最有代表性的具体设计原则之一。
关注点分离
All-in-JS 模式目前仍存在争议
根据不完全统计，各种 CSS in JS 的库至少有47种
css-in-js 库我都没有实际用过，以后需要了再好好调查选择与实践
styled-components
库
CSS-in-JS
思想是将 CSS 引擎的部分功能权限开放给开发者，以便于开发者扩展和自定义 CSS 特性
CSS规范在浏览器核心竞争力中优先级较低
CSS 规范的实现是一个非常漫长且需要持续跟进的过程
减轻浏览器厂商的工作压力
丰富 CSS 生态
一定程度上推动 CSS 规范的演进
将规范的实现交给开发者
厂商真实意图
Houdini 是一个“一劳永逸”的方案
浏览器厂商为什么愿意推出全新的 Houdini 也不实现 CSS 的标准规范
Houdini
CSS
JS 引擎可以“帮忙”处理一些繁琐的工作，如类型转换。开发者可以集中精力在逻辑处理上。
细节的疏忽容易造成一些低级失误
在进行复杂架构设计时既要借助统一的规范、框架和工具对其灵活性加以约束，同时又不能矫枉过正
结论
TS 或者 Flow
解决语言层面的问题
静态类型
数据不可变性
要解决的两个主要问题
底层技术栈
根据学习曲线、生态等因素的综合评定
实现层技术栈
技术栈
技术选型
语言本身的灵活性
eslint 等工具
检测与较正
代码风格
典型案例是 JS 异步编程
可行性
可扩展性
易读性
可维护性
标准
人工审查
检测
方案选择
代码规范
实现方案的多样性
灵活性的主要表现及其约束途径
JS 的灵活性
JS 是一种动态类型语言，开发者在声明变量时无须指明变量的类型，解释器根据变量的赋值判断其类型
是 JS 的超集，一种编译性编程语言
是什么
目前看来ts只是在编写代码的时候有提示作用，编译后的线上代码并不健壮
TS
JS 的一种静态类型检查工具
Flow
function fn(obj){ obj.a=1}let obj={a:0}fn(obj)console.log(obj) //{ a: 1 }
传给 fn 的参数并非外部 obj 指针本身，而是它的一个拷贝指针
JS 函数的传参方式只有值传参
redux 的流行，在状态管理这种特定场景下，不可变性令数据可预测、可追踪
兴起原因
在不可变性操作中，每次“改变”数据的操作等同于先复制原数据再改变其属性或值，表面上看上去性能非常低，尤其是对象类型的数据。应用时通常需要辅以性能优化的逻辑，比如 immutable.js 使用一种叫做 structural sharing 的数据共享方案。
不可变性
JS 核心概念脑图中的 JS 引擎
1. JS 引擎首先调用发起 AJAX 请求的函数本身，请求被发出之后顺序执行任务队列中的下一个任务
2. 浏览器的网络模块得到 HTTP 响应之后通知 JS 引擎，Event Loop 检测调用栈为空闲时将回调函数加入任务队列并执行
回调函数、Promise、Generator、async/await 均是在此基础上的具象封装
JS 异步编程的基本原理（以 ajax 请求为例）
简洁性
错误处理方式
在多个可行的异步编程方案之间进行选择时主要考虑因素
回调地狱
回调函数
解决了回调函数的回调地狱
单纯用 Promise 取代回调函数会产生新的 then hell 问题
Promise
相对底层的异步编程模式
Generator
返回一个 Promise，它将会用异步函数的返回值来 resolved，或者用异步函数内部没有捕捉到的错误来 rejected。
async 函数返回值
在简洁性和错误处理上都优于 Generator
async/await
较上层的异步编程模式
JS
1. 编程语言/确立所选编程语言的开发模式
在前端编程领域内，技术规范尤其是编码风格不仅仅是一种约定，而且在一定程度上决定了应用程序的技术架构
满足现阶段产品的需求
满足可预见的后续版本中可能增加的需求
功能的具体实现模式、API 的简洁性
功能（基本指标）
稳定性（重要指标）
针对应用架构
与其组合为完整系统的扩展插件或框架，如 Redux 之于 React，Vuex 之于 Vue
针对工程体系
其开发和调试工具的丰富性
一个框架/工具的生态系统分为两部分
生态
学习曲线
总体而言，相对于个人项目，知名公司和团队制作的框架/工具的品质更高，稳定性也更有保障
作者
社区的活跃度能够反映项目的受欢迎程度，一个框架/工具被更多人使用和讨论也有助于问题的解决
社区
使用开源软件之前务必仔细研究其许可协议
开源协议
技术选型相对理性的评定标准
源码文件、构建产出文件以及第三方模块文件目录分离
构建产出文件和第三方模块不参与版本管理
前端资源管理最基本的规则/下限规则
src
源码文件单独目录存放
dist
构建产出文件单独目录存放
vendors
第三方框架/工具单独目录存放
config
工程配置文件单独目录存放
test
单元测试文件单独目录存放
assets
媒体资源（图片/视频等）单独目录存放
通用原则
不同类型文件归类到一起，html 文件放一起，css、js 文件分别放一起
随着交互逻辑复杂度的提升、业务和组件数量的增长，在一定程度上限制了架构的可伸缩性，并且会对开发者的工作效率产生负面影响
按类型
业务资源目录命名语义化，并且首字母大写
公共组件统一存放在二级目录 _components 内，且按组件归类源码文件
规范
强化了文件的语义，每个文件的作用一目了然
一定程度上提高了架构的可伸缩性，有益于开发和维护效率的提升
改造的成本非常低，基本不会涉及架构逻辑层面的改动
按组件
源码文件归类因子
目录结构，归类文件
语义性（核心）
两项基本原则
命名规范，强化语义
资源管理
底线
保证团队成员使用统一的编码风格
新成员或项目交接后的开发者更容易理解历史代码并遵循既定的编程风格进行迭代，可减少由于版本更新积累的历史包袱
在版本迭代中保持风格一致
两个方面
统一性
语义化的范畴不仅仅是命名，明确参数的类型和结构（ts在这点上很有帮助）同样属于语义化的一部分
语义化
使用既定的格式对代码的元素进行说明，比如函数参数和返回类型
在语义化之外，通过自然语义描述以帮助开发者更容易理解源码
分为两部分
注释不宜过长，冗长且无营养的注释反而有碍于开发者理解代码
恰到好处的注释
有强主观色彩。只要不违法语法规则，团队成员保持形式统一，就是美观的代码。
可以使用 prettier 来自动化规范统一代码风格
兼顾美观性
良好编码风格的基本原则
尽量使用语义化的 HTML 标签
随着数据量的增长，for...of 相比 reduce 的性能优势越来越明显
原始的 for 或 for...of 循环
forEach、map、reduce 等可读性更好的API
数组循环操作
JS 语言的一些API或语法之间有性能差异
可读性为性能让步通常体现在大数据、计算密集型项目上，典型的是图形类应用，比如数据可视化、地图、游戏、WebVR 等。图形编程类项目的数据规模的计算量往往超出常规前端项目几个量级，计算量接近设备硬件或浏览器的性能瓶颈，提高计算逻辑的性能是唯一的突破口。
高性能与易读性
通过命名模拟既定的编程范式
较普遍的做法是给HTML元素的 classname、id、data 等属性（以 classname 为主）的名称施加某种命名规范，将 CSS 带入对应的编程范式语境之下，遵循编程范式的一些系统性的既定原则来提高 CSS 代码的开发和维护效率。
Object Oriented CSS（面向对象的 CSS ）
将网页的完整 UI 分解为一系列组件，每个组件的颗粒度尽可能细，从而最大程度地被复用
将每个 classname 视为一个功能单一的 CSS 组件，业务组件通过组合多个 CSS 组件实现综合的样式效果
理念
语义指向对应的样式，如 f12（font-size:12px）、m5（margin:5px）这类classname
通常要放在 UI 组件 classname 之前
CSS 组件
语义指向UI组件功能，如 content 这类 classname
UI 组件
UI 组件和 CSS 组件
Strikingly
可组合性高，非常适用于可高度扩展的前端项目，比较典型的是Strikingly之类的建站工具
一个复杂样式的 HTML 元素 classname 太过冗长
绝大多数组件都是业务指向性的，不需要很高的灵活性，所以 OOCSS 最大优势得不到体现，反而将其缺点暴露无遗
不适合常规的前端项目
OOCSS
是 Block、Element、Modifier 的简称，是 OOCSS 方法论的一种实现模式
一个逻辑或功能独立的组件，如 logo 组件
Block
Block 内部的子组件，不能被外部访问
Element
描述一个 Block 或 Element 的表现或者行为
Modifier
三种实体
block-name__<element-name>--<modifier-name>_modifier-value
实体命名均使用小写字母
只使用一个 classname 作为选择器，[0 0 1 0] 规则
命名格式
非常适用于公共组件，可令组件的样式定制具有很高的灵活性，因为 [0 0 1 0] 选择器的权重非常低
BEM
CSS编程范式与面向对象
编码风格
2. 制定技术规范
前端技术架构与工程
0 条评论
回复 删除
下一页
