《现在前端技术解析》了解一下
现在前端技术解析
- 开发的效率问题,使用 jquery 等
- 组件化、模块化,分而治之
- 异步加载
- 加载速度
- 合理利用缓存
浏览器和服务器的交互
- 用户输入网址
- 浏览器开启现场处理请求
- 根据 http 协议进行处理
- 浏览器引擎分析加在 url
- dns 解析获取网站对应的 ip 地址
- get 请求发送浏览器的 cookie 等请求头信息到网站目的 ip
- 进行 http 会话,向 web 服务器发送报文
- web 服务器处理请求
- 进入部署好的后端应用
- 找到对应的请求处理逻辑
- 返回响应报文
- 浏览器开始下载 html 文档 (304 缓存有效)
- 根据下载接受到的 html 文件解析结构建立 dom 文档书
- 根据 html 标记请求下载指定的 mime 类型文件,js、css 等
- 页面开始解析渲染 dom
浏览器组成
- 用户界面
- 网络
- js 引擎
- 渲染引擎
- 解析 html 构建 dom 树,组成具有父子节点关系的 dom 树
- 构建渲染树,根据 css 重新计算 dom 结构的样式数据
- 渲染树布局阶段,将节点固定到页面的对应位置上,处理布局属性
- 绘制渲染树,渲染节点的背景、颜色、文本样式等
元素位置发生变化时,后两个阶段需要重新开始,就是–页面重排–
只改变样式,不改变布局,就是页面–重绘–
应避免重排
渲染引擎解析和输出是逐行的,尽量不在 html 显示内容中插入 js 脚本,否则会足阻塞页面结构的渲染
- ui 后端
- js 解释器
- 持久化数据存储
浏览器的内核
一个测是浏览器性能的网站
Chrome (v8) 基于字节码
Firefox (Ion)
Safari (jsc)
css 权重方式计算的
!important 》 内联样式 》 id 选择器 》 类选择器 》元素选择器
浏览器数据持久化
http 文件缓存基于 http 协议的浏览器端文件缓存机制文件重复请求时根据响应协议头判断是从本地还是服务器读取
cache-control
etag 304 200
last-modified
frames 就可以查看缓存的列表内容
可以在 meta 中 expires 或者 cache-control 来 设置缓存,同时 设置则 cache 生效
localStorage
h5 的一种本地缓存方案主要用于浏览器端保存较大的数据,ajax 等单个域名下不同的浏览器是有大小限制的可以用 iframe 的方式使用多个域名突破单个页面下的最大限制
sessionStorage
浏览器关闭时自动清空
cookie
为了辨别用户身份由键、值、域、过期时间、大小组成一般保存用户网站认证信息
websql
浏览器端用于存储较大量数据的缓存机制
- openDatabase()打开存在的数据库,不存就创建
- transaction()事务的提交和回滚
- executeSql()执行真实的 sql 语句
indexDB
客户端存储大量结构化数据并且能在这些数据上使用索引进行高性能检索的 api
Application Cache
允许浏览器通过 manifest 配置文件在本地有选择的存储 js、css、等静态资源文件
- 离线浏览
- 快速加载
- 服务区负载小
cacheStorage
保存每个 ServiceWorker 声明的 Cache 对象
- caches.has() //检查 是否包含 cache 对象,返回 promise 对象
- caches.open() //打开 cache 对象,返回 promise 对象
- cache.delete()
- cache.keys()
- cache.match()
ServiceWorker 和 WebWorker 都是在浏览器后台作为一个独立的线程运行的 js 脚本可以为浏览器提供并行计算和数据处理能力
通过 message/postMessage 方法在页面之间进行通信,不能与前端界面进行交互
生命周期
- 注册 ServiceWorker 的脚本文件
- 运行 caches 的缓存控制方法
flash 缓存
高效的开发工具
chrome://version
chrome://inspect/ //查看链接设备调试信息
chrome://dowloads //浏览器下载管理
调试工具找到问题
前端与协议
- 周一
- 上午 确认 UI、业务流程、实现方案、
- 下午 –开发–
- 周二
- –开发–
- 周三
- 上午优化、打包
- 下午优化其他并行的项目
- 周四
- –开发–
周五
- 上午 –开发–
- 下午 优化、打包
http 请求头结构
请求类型
- 请求 url
- 协议版本
- 扩展内容
- 请求头部
- accept
- cookie
- cache-cotrol
- host
- 空行
- 正文
http 响应头结构
- 状态码
- 状态描述
- 协议版本
- 扩展内容
- 响应头部域内容
- Date
- Content-Type
- Cache-Control
- Expires
- 空行
- 正文
http1.1 长链接是通过请求头中 keep-alive 头域信息来控制的
协议扩展切换在请求头部域消息中包含 Upgrade 头让客户端通过头部标识令服务器知道它支持其他备用通信协议服务器根据客户端请求的其他协议进行切换
websocket 通过 http 方式来建立然后通知服务器切换
头部添加
Connection:Upgrade
Upgrade:websocket
http2
SPDY 协议传输支持多路复用和服务器推送技术压缩了 http 头部减小了请求大小强制使用 ssl 传输协议
完全采用二进制格式来传输传输的基本单位为帧 Frame(具有固定格式和长度的二进制数据包) - 类型 Type - 长度 Length - 标记 Flages - 流标识 Stream - Frame Payload 帧有效载荷,一帧能携带的内容数据长度
多个帧形成了传输网络流
http2 是通过流式传输的
tcp 复用传输发生在传输层
keep-alive 链接复用是在应用层
支持传输流的优先级和流量控制机制
安全机制
XSS Cross Site Script 跨站脚本攻击
- 带有页面可解析内容的数据未经处理直接插入到页面上解析导致
- 分类,根据脚本的引入位置区分
- 存储型 xss
- 由前端提交未经过处理直接存储到数据库然后从数据库中读取出来后又直接插入到页面中所导致
- 反射型 xss
- 在网页 URL 中注入了可解析内容的数据导致的
- 直接获取 url 中不合法的并插入页面中则可能出现页面上的 xss 攻击
- MXSS 也叫 DOM XSS
- 在渲染 dom 属性时将攻击脚本插入 dom 属性中被解析导致的
CSRF Cross-site Request Forgery 跨站请求伪造
- 非源站点按照原站点的数据请求格式提交非法数据给源站点服务器的一种攻击方法
- 获取源站点的访问信息后
- 伪造一个站点页面,访问源站点服务区
sql 注入攻击
请求劫持与 HTTPS
- 指网站资源请求在请求过程中因为认为的攻击导致没有加载到预期的资源内容
- 分类
- DNS 劫持
- 攻击者劫持了 DNS 服务器
- 获得域名的解析记录控制权
- HTTP 劫持
- 用户浏览器与访问的目的服务器之间所建立的网络数据传输通道中从网关或防火墙层上监视特定数据信息
- 满足一定的条件时
- 在正常的数据包中插入或修改成为攻击者设计的网络数据包
https 协议通信过程
https 协议是通过加入 SSL secure sockets layer 加密默认使用 443 端口进行传输通过加密算法得到密钥对
- 私钥是非公开,用于数据解密
- 公钥用于会话加密、验证数字签名或者加密
https 通信建立
- 客户端发起 https 请求
- 服务端生成公钥并返回,如果是第一次请求，进行验证
- 客户端发起验证请求
- 将特定的验证串使用公钥加密后形成密文发送给 服务器
- 客户端将 自己生成的公钥发送给服务器
- 服务端进行解密和验证，在将验证串进行加密
- 客户端解密，验证是否为自己开始发送的验证串
- 如果真确，则链接是安全的
X-XSS-Protection
主要是用来防止浏览器中的反射性 XSS 问题的发生
Strict-Transport-Security
是一种用来配置浏览器和服务器之间安全通信机制
主要用来防止中间者攻击
强制所有通信都使用https
Content-Security-Policy
是一种由开发者定义的安全策略性声明
通过csp所约束的规则
浏览器只可以加载指定可信的域名来源的内容
Access-Control-Allow-Origin
决定那些网站可以访问当前服务器资源的位置
通过定义一个通配符或域名来决定是单一网站还是所有网站可以访问服务器的资源
常常作为跨域共享设置的一种实现方式
前端实时协议
webSocket通信
一种典型的实时通信协议
双向数据实时通信
DDP协议
分布式数据协议
客户端与服务端的实时通信协议
使用json的数据格式在客户端和浏览器之间进行数据传输通信
RESTful数据协议规范
representational state transfer 表述性状态转化
定义了以中网络应用软件之间的架构关系，并提出了一套与之对应的网络之间交互调用的规则
每个资源都有一个与之对应的uri地址
资源本身都是方法调用的目标
是一种软件架构之间交互调用数据的协议风格规范
它建议以一种通用的方式来定义和管理数据交互接口
结合http的固有方式来表征资源的状态变化描述
而不是通过动词加名词的方式来设计
Native 交互协议
Hybrid app ：是在native app应用的基础上结合webapp应用所形成的
1. native 应用会提前向移动端系统注册scheme协议
2. webview会将uri的志愿交给native app
3. native 将请求转发给系统并解析
4. 执行native代码拉起系统的调用
5. 这样就完成了html中js对native的调用了
JS Bridge
前端三层结构与应用
- 结构层html
- 表现层css
- 行为层js
html结构层
DOCTYPE
html
web语义化标签
在html结构恰当位置使用语义标签
使页面具有良好的结构
- 杜绝html结构全部使用div元素来嵌套
- 使用语义化能使页面结构更加清晰
AMP HTML
流动网页提速 Accelerated Mobile Pages
提升页面资源载入效率的html提议规范
- 使用严格受限的高效html标签以及使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验
HTML Web Component
css 统一
- reset
- normalize
- neat
现代前端交互框架
前端MVC模式
将dom交互的内容分为数据模型、视图和事件控制函数
- model用开存放请求的数据结果和数据对象
- view用于页面dom的更新与修改
controller用于根据前端路由条件来调用不同的model给view渲染不同的数据内容
前端MVP模式
用户在进行dom修改操作诗将拖过view上的行为触发
然后将修改通知给presenter里完成后面的model修改和其他view的更新
preseer和view的擦欧总绑定通常是双向的
前端MV VM模式
是一个自动化的mvp框架
使用viewmodel代替了presenter
数据model的调用和模版内容的渲染不需要我们主动操作
是由viewmodel来自动触发完成
任何用户的操作也都是通过viewmodel的改变来驱动的
数据变更检测
手动触发绑定原理
- 通过在数据对象上定义get、set方法，调用时手动使用函数修改数据
- 会主动触发get、set方法中view层的重新渲染功能
- 通过监听dom的change、select、keyup等事件
脏检测机制原理
- 在viewmodel对象的某个属性值发生变化时找到与这个属性值相关的所有元素
- 然后再比较数据变化
- 如果就变化则directive指令重新扫描渲染
前端数据对象劫持
- 使用Object.defineProperty和Object.defineProperies对viewmodel数据对象进行属性的监听
- 当有数据读取和赋值操作时则扫描元素节点
- 运行directive指令
ECMAScript 6 Proxy
- 可以用于在已有的对象基础上重新定义一个对象
- 重新定义对象原型上的方法
virtual Dom 交互模式
自动双向数据绑定，将页面逻辑实现的核心转移到数据层的修改操作上，而不是在页面中直接操作dom
实现原理
创建原始页面或组件的Virtual DOm结构
用户操作后需要进行dom更新时
与之前的结构进行对比
把差异化的virtual dom根据特定的规则渲染到页面上
MNV* 模式
调用原生控件或时间绑定来生成应用程序的交互模式称为前端的MNV*开发模式
Model-NativeView*
通用规范
- html、css、js 三层分离
- 统一锁进 4 tab
- 指定网页编码
- html标签、属性、样式使用小写
- 代码单行长度 不超过120 或 80
- 注释
文档类型
html
head内容
- viewport控制页面不缩放
- 使用双引号包裹属性值
- 正确使用嵌套和语义化标签
- 按模块添加注释
块极元素一般另起一行，行内元素根据情况换行
css 规范
命名约定，一般单词中画线组成
- 属性书写顺序，先写元素的布局属性，在写元素的内容
前端组件规范
- ui设计一致性
- 开发实现的一致性
Web Component 组件化
Polymer 框架的设计主要分成三个层次
- 基础层 platform.js 基本实现库
- 基础层一般都是本地浏览器的api
- 核心层 polymer.js
- 可以理解为实现基础层的封装库
- 元素层
- 建立在核心层之上的ui组件或非ui组件
virtual dom 的组件化方案
改善mvvm的dom性能
自动化构建原理
- 读取入口文件
- 分析模块引用
- 按照引用加载模块
- 模块文件编译处理
- 模块文件合并
- 文件优化处理
写入生成目录
优化
Performance Timing Api 描述了页面资源从加载到解析各个阶段的执行关键点记录
Profile
- 分析页面脚本执行过程中最耗资源的操作
- 记录页面脚本执行过程中js对象消耗内存与堆栈的使用情况
- 检测页面脚本执行过程中cpu占用情况
资源加载时序图
页面埋点
桌面浏览器前端优化策略
- 网络加载类
- 减少http资源请求次数
- 减小http请求大小
- 避免使用style 或script 标签直接引入
- 避免出现空的href和src
- 指定Cache-Control或者Ecpires
- 合理设置Etag和Last-Modified
- 减少页面重定向
- 使用静态资源分域方来增加下载并行数
- 使用静态资源cdn来存储文件
- 异步js资源
避免使用css import引用加载css
页面渲染类
- 把css资源引用放到html文件顶部
- js放到html文件底部
- 减少dom元素数量和深度
- 避免使用table、iframe等慢元素
- 避免使用css表达式或滤镜
移动端优化
- 网络加载类
- 首屏数据请求提前加载
- 首屏加载和按需加载
- 模块化资源并行下载
资源预加载
缓存类
- 合理利用缓存
静态资源离线
图片
- 图片压缩处理
- 合理使用base64
- 使用高压缩比图片
图片懒加载
脚本类
- id选择器快
- 合理缓存dom对象
- 尽量使用事件代理，避免直接事件绑定
前端用户数据分析
用户访问统计
- PV page view 一天时间内页面被所有用户访问的总次数
- UV 一天时间内访问内页的不同用户个数
- VV 网站被用户访问次数的参考数据
用户转化率 = 通过该页面注册的用户数/页面PV
导流转化率 = 通过源页面导入的页面访问PV/源页面PV