Web前端

屏幕截图 2020-12-01 155259

浏览器组成

渲染引擎

解析HTML构建DOM树 -> 构建渲染树 -> 渲染树布局阶段 -> 绘制渲染树

页面生成后 如果页面元素位置发生变化 就要从布局阶段开始重新渲染

HTML解析

token解析

当进行token解析后,就可以利用栈来构建一颗DOM树

CSS解析

依次拿到上一步构造好的元素,去检查它匹配到了哪些规则,再根据规则的优先级,做覆盖和调整

选择器的出现顺序,必定跟构建 DOM 树的顺序一致。这是一个 CSS 设计的原则,即保证选择器在 DOM 树构建到当前节点时,已经可以准确判断是否匹配,不需要后续节点信息

因为父元素选择器要求根据当前节点的子节点,来判断当前节点是否被选中,而父节点会先于子节点构建,这点跟原则冲突,所以目前并没有父元素选择器这种玩意

持久化存储机制

浏览器Web安全

前端与协议

实时协议

Native交互协议

混血应用特性:

Web到Native协议调用:

Native到Web:

JSBridge协议规范

三层结构

结构层

XML -> HTML -> HTML5

DOCTYPE:指示浏览器使用哪个HTML版本编写的指令进行解析

语义化标签:语义化标签帮助人更容易理解

AMP HTML:提升页面资源载入效率的规范

Shadow DOM:用来支持实现Web Component,如video标签等,其不会被外界的css或者js所影响

浏览器脚本

ES5 -> CoffeScript -> ES6 -> TS

表现层

CSS

CSS统一处理:

CSS预处理:sass less ...

一个良好的预处理器的功能:

动画实现:

响应式页面

结构层响应式

表现层响应式

行为层响应式

现代前端交互框架

直接DOM操作

随着AJAX技术的发展 在DOM操作上面也越来越复杂

这个时期的代表性框架就是jQuery,其主要功能就是封装了浏览器的DOM API

MV*交互

通过将组件的数据及行为划分到 M V C 来进行管理,由系统统一来控制

屏幕截图 2020-12-04 092957

使用P来处理逻辑 M 和 V 只反映视图和数据

屏幕截图 2020-12-04 093202

各个部位职责更清晰 但是P的内容变得很重

自动化的MVP 使用ViewModel 替代 P,这样数据的变化就会自动影响到识图 反之亦然

数据更新检测

Virtual DOM交互

通过新建一个虚拟的DOM数据结构 并将其与真实DOM对比 找出差异部分进行更新

屏幕截图 2020-12-04 095325

核心实现

自己解析HTML而非使用DOM API来生成

使用多叉树遍历算法 DFS或者BFS 遍历过程中需要记录节点改变的内容、差异化改变的类型及位置(在哪里增加、删除等)

前端MNV*

Model Native View *

JS调用原生控件或者事件绑定

前端开发规范

通用规范

HTML规范

CSS规范

ES5规范

ES6规范

防御性编程规范

前端组件规范

UI组件规范

模块化规范

项目组件化规范

组件化规范应该解决的问题:

  1. 组件之间独立 松耦合
  2. 组件可以嵌套使用
  3. 组件通信问题
  4. 组件公用部分设计
  5. 组件构建打包
  6. 异步组件加载
  7. 组件继承与复用
  8. 私有组件的管理

自动化构建

目的:对源项目文件或资源进行文件级处理 将文件或资源处理成最佳输出结构和形式

屏幕截图 2020-12-08 100242

构建工具的设计

前端用户数据分析

用户访问统计

用户行为分析

前端日志上报

获取错误日志方式:

错误信息上传:

错误排查:

前端跨栈技术

后端:node

跨终端

其他

趋势