Web前端

屏幕截图 2020-12-01 155259

浏览器组成

渲染引擎

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

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

  • HTML解析
  • CSS解析

持久化存储机制

  • HTTP缓存
  • localSorage:单个域下存放容量有限
  • sessionStorage:浏览器关闭自动清空
  • Cookie
    • sessionCookie
    • HTTP only
  • WebSQL:特定浏览器的特性
  • IndexDB:NoSQL类型的数据库 大小限制50M
  • Application Cache
    • 渐渐废弃 使用ServiceWorkers替代
  • cacheStorage
    • ServiceWorker规范中的Cache对象
  • Flash缓存

浏览器Web安全

  • X-XSS-Protection
    • 控制浏览器对反射型XSS的防护
  • Strict-Transport-Security
    • 强制所有通信使用HTTPS
  • Content-Security-Policy
    • 控制浏览器只信任来自指定源的内容
  • Access-Control-Allow-Origin

前端与协议

  • HTTP

实时协议

  • WebSocket
  • Poll(轮询):实时性差 影响性能
  • Long-poll(长轮询):比上面好一点
  • 前端DDP(分布式数据协议)
    • meteor:服务端-客户端双向数据更新

Native交互协议

混血应用特性:

  • 可用系统资源少
  • 浏览器内核支持较新的特性
  • 可实现离线应用
  • 机型兼容(屏幕兼容)
  • 支持与Native交互

Web到Native协议调用:

  • 通过URI
    • Web应用通过发起一个URI请求 Native会进行捕获
  • addJavascriptInterface
    • Native会注入一个全局对象给Web调用

Native到Web:

  • Native通过loadURL调用Web暴露的全局对象或者方法

JSBridge协议规范

  • Native注册一个自定义JSBridge Schema头
    • 协议URL由几部分组成:欲被调用的类名、回调方法、欲被调用的方法、json对象(调用方法的参数)

三层结构

结构层

XML -> HTML -> HTML5

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

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

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

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

浏览器脚本

ES5 -> CoffeScript -> ES6 -> TS

表现层

CSS

CSS统一处理:

  • reset:清除所有元素默认样式
  • normalize:为所有元素增加默认样式
  • neat:上面两种方式的组合

CSS预处理:sass less ...

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

  • 变量声明计算
  • 语法表达式 if-else for
  • 函数处理
  • 属性继承
  • 兼容性补全 自动添加浏览器私有前缀

动画实现:

  • js实现:由于频繁重绘 非常消耗性能
  • SVG动画:比js实现功能会更丰富 但一旦复杂起来 仍会影响性能
  • CSS3 transition:只能实现过渡变化
  • CSS3 animation:脱离JS 可以硬件加速 复杂动画也能应付
  • Canvas 动画:本质是通过js控制标签来实现

响应式页面

  • 基于UA跳转
  • 基于媒体查询响应式

结构层响应式

  • 结构层数据响应式
    • 在前端判断不同端加载不同的数据
  • 后端数据响应式
    • 后端渲染时直接判断 差别渲染
  • 结构层媒体查询
    • 根据不同的屏幕渲染不同的图片 节省流量
    • Picture 可以包含多个图片 自动进行选择(Polyfill)
    • 后端模板判断渲染不同图片
    • CDN

表现层响应式

  • 响应式布局:栅格布局
  • 屏幕适配布局:viewport
    • 控制zoom
    • REM适配

行为层响应式

  • 通过js进行判断执行不同脚本
  • 后端判断直接渲染不同脚本

现代前端交互框架

直接DOM操作

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

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

MV*交互

  • 前端MVC

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

屏幕截图 2020-12-04 092957

  • 前端MVP

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

屏幕截图 2020-12-04 093202

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

  • 前端MVVM

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

数据更新检测

  • 手动触发更新
  • 脏检测机制:当ViewModel的某个值发生变化时找到其相关联的所有元素 然后比较更新
  • 前端数据对象劫持:通过Object.defineProperies来监听get和set,当发生变化 则需要运行相对应节点的指令
  • ES6 Proxy:实现效果跟上面一样

Virtual DOM交互

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

屏幕截图 2020-12-04 095325

核心实现

  • 将真实DOM转换为虚拟DOM:

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

  • 对比虚拟DOM

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

前端MNV*

Model Native View *

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

前端开发规范

通用规范

  • 三层结构分离:js css html 分离
  • 缩进保持一致
  • 内容编码:为html指定utf8编码
  • 注意大小写的使用场景
    • html属性名一律使用小写以-分割
    • 属性值可以使用驼峰命名
  • 代码单行长度限制
  • 注释可以参考java
    • 代码自描述
  • 删除行尾空格及符号

HTML规范

  • 文档类型定义统一使用HTML5的!DOCTYPE 避免使用HTML4的DTD定义
  • head必须定义title keyword description等基本SEO字段 移动端注意定义viewport
  • 引入style标签或者script标签可以省略type属性
  • 标签属性值统一使用双引号
  • 诸如readonly disabled等属性的属性值可以省略
  • 元素标签必须正确嵌套 尽量使用语义化标签
  • 非自闭和标签需要添加关闭标识 自闭和标签无需添加(img br)
  • 避免img的alt属性为空
  • label标签经历增加for属性与输入域进行关联
  • 按模块添加注释 start end
  • 标签元素格式:块级元素另起一行 行内元素根据情况内联或者换行

CSS规范

  • 尽量使用外部样式文件,避免使用内联样式
  • 命名:避免过于笼统,根据功能和内容进行命名,可以根据需要统一添加某种前缀
  • 简写
    • 值为0可以省略单位
    • 0.x的单位可以省略0
    • 颜色尽量缩写到3位
  • 属性书写顺序:优先写布局元素,然后再写元素的内容属性
  • 避免CSS奇淫技巧
  • 若要兼容多种浏览器私有样式 则私有样式写前 标准样式写后
  • 避免类名或ID与类选择器组合使用 会造成冗余
  • 使用简短的CSS实现 合并写法
  • 元素之间存在继承关系时 提取公共部分 避免重复定义
  • 使用预处理来提高编码效率

ES5规范

  • 语句添加分号结束可以使语句之间关系更清晰
  • 在合适的地方添加空格
  • 代码块后留空一行,使内容块更有层次
  • 字符串最外层统一使用单引号
  • 变量命名参考JAVA
  • 对象属性名不需要引号
  • 对象属性过多可以使用缩进的方式书写
  • 代码块必须加花括号
  • 不适用undefined直接进行判断 可以使用typeof
  • 避免使用 != ==
  • 禁止在条件语句或者循环语句里声明函数
  • for-in循环访问属性前要判断 避免访问不存在的属性报错
  • 避免在Array Date基础类库对象原型添加方法 否则会污染JS内置对象

ES6规范

  • 正确使用变量声明let const
  • 字符串拼接尽量使用模板字符串
  • 解构赋值尽量只使用一层
  • 数据拷贝使用...来高效简洁实现
  • 数组循环遍历优先使用for...of
  • 尽量使用ES6的class实现oop
  • 模块化多变量导出尽量使用对象结构 不要讲import和export写在同一行
  • 导出类时,保持模块名称和文件名相同
  • 生成器yield使用时需要注意对异常的处理
  • 使用Promise代替回调
  • 尽量避免使用迭代器 性能太差
  • 推荐使用async await

防御性编程规范

  • 对于外部传入的数据 需要做校验 避免为空导致的模板报错
  • 注意错误处理

前端组件规范

UI组件规范

  • 统一的页面布局方案
  • 基础UI结构和样式实现
  • 组件化UI结构和样式实现
  • 响应式布局
  • UI可扩展性

模块化规范

  • AMD 浏览器端的模块化异步加载规范
  • CMD 用到模块才会执行
  • CommonJS Node端使用的模块化规范
  • import/export ES6定义的规范

项目组件化规范

  • Web Component 组件化
  • MVVM框架组件化 每个组件以单文件的形式引入模块 通过构建或者动态解析的方式注入到页面
  • 虚拟DOM组件化 reactjs为代表的jsx
  • 基于目录管理的通用组件化

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

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

自动化构建

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

屏幕截图 2020-12-08 100242

构建工具的设计

  • 模块分析引入:通过分析依赖调用生成AST,生成依赖字典
  • 模块化规范支持:目前较多的构建工具都是将ES6转换为ES5 构建工具应尽可能支持较多标准
  • CSS编译 图片合并
  • 资源压缩优化
  • 路径分析替换
  • 环境区分
  • 异步文件打包
  • 文件目录白名单

前端性能优化

  • 实时性指标
    • 可控时延
    • 不可控时延

性能测试

  • Performance Timing API
    • 浏览器内核自带的JS API
  • Profile
    • 浏览器自带
  • 页面埋点计时
  • 资源加载时序图

桌面端优化策略

网络:

  • 减少HTTP请求次数及请求大小
  • 使用外部文件引入css或者js可以利用浏览器缓存
  • 避免空href和src 他们也会发起请求
  • 合理利用HTTP缓存
  • 减少重定向
  • 增加静态域增加下载并行数
  • 合理利用CDN
  • 使用可缓存的AJAX
  • 减少cookie大小
  • 缓存favicon.ico
  • 异步加载js资源
  • 避免CSS或者js资源阻塞渲染

页面渲染:

  • CSS放头部:优先下载完成渲染
  • JS放底部:避免JS对页面渲染造成阻塞
  • 避免在HTML直接缩放图片
  • 减少DOM数量及深度
  • 避免table iframe等慢元素
  • 避免运行耗时过长的JS
  • 避免CSS表达式或者滤镜

移动端优化策略

网络:

  • 提前首屏数据请求 避免JS文件加载后才加载数据
  • 首屏按需加载 展示延时不超过3秒
  • 模块化资源并行下载
  • 内联首屏必须的css及js
  • dns预解析
  • 资源预加载
  • 合理利用MTU 1500B

缓存:

  • 合理利用浏览器缓存
  • 静态资源离线方案
  • AMP HTML

图片:

  • 对所有移动端的图片都需要压缩处理
  • 使用较小的图片 合理利用BASE64内嵌图片
  • 使用更高压缩比的格式 如webp
  • 图片懒加载
  • 利用CDN加载不同大小的图片
  • 图标精良使用iconfont
  • 限制图片最大大小

脚本:

  • 使用ID选择器 其最快
  • 缓存DOM对象
  • 使用事件代理 避免直接事件绑定
  • 使用touchstart代替click
  • 避免touchmove scroll 连续事件代理 需要合理进行节流
  • 避免eval with 推荐ES6模板字符串
  • 推荐使用ES6规范

渲染:

  • 使用viewport固定屏幕渲染
  • 避免各种重排重绘
  • 使用CSS3动画 开启GPU加速
  • 使用canvas实现动画更高效
  • 使用SVG代替图片
  • 少用float 耗性能
  • 避免过多的font-size声明

架构协议:

  • 使用SPDY与HTTP2等新协议
  • 后端数据渲染
  • 使用NativeView代替传统DOM

前端用户数据分析

用户访问统计

  • PV
  • UV
    • IP配合其他手段
  • VV:对用户访问网站多次跳转统计为一次VV
  • IP

用户行为分析

  • 页面点击量
    • 页面某个区域点击量
  • 用户点击流
    • 在用户一次VV记录用户的点击行为
  • 用户访问路径
  • 用户点击热力图
  • 用户转化率:访问用户与注册用户之比
  • 导流转化率:原页面与导流页面之比
  • 访问时长

前端日志上报

  • 性能日志上报
  • 错误日志上报

获取错误日志方式:

  • try catch:无法捕获语法错误 无法捕捉不同作用域
  • window.onerror:功能比try catch全 ,但无法处理跨域情况

错误信息上传:

  • 如果访问量大 注意按一定条件上传

错误排查:

  • 对错误归类 注意版本问题

前端跨栈技术

后端:node

  • web框架:koa,express
  • 后端数据渲染
  • 前后端同构
    • 基于模板:不同的请求渲染不同的模板
    • 基于MVVM:在服务端对MVVM模板语法直接渲染
    • 基于虚拟DOM

跨终端

  • 前端为主:直接将前端页面打包进安装包 主要执行这些页面
  • Native和Web结合:分别实现自己最擅长的
    • 自己设计交互协议
  • Web资源离线和更新
    • serviceWorker
    • localStorage
    • 基于增量文件
    • 基于文件代码块
  • Native与Web资源离线和更新
    • 根据时机向服务端主动拉取 否则使用本地缓存
  • 资源覆盖率统计
    • 日志上报

其他

  • 前端代码编译为Native
  • 桌面应用

趋势

  • 标准技术趋向于稳定
  • 工具仍会持续不断发展
  • 浏览器平台新特性未来应用的可能
  • 前端开发生态
    • 效率
    • 维护成本
    • 性能
    • 扩展性
  • 前端新领域
    • 物联网
    • AI
    • VR

results matching " "

No results matching " "

results matching " "

No results matching " "