从零开始学前端

《现代前端技术解析》笔记

前端结构实现模式：

     * 静态黄页
     * 服务器组装动态网页数据
     * 后端为主的mvc      
     * 前后端分离
     * 纯前端mv*为主 中间层输出
     * 前端virtual dom , mnv* 前后台同构

后端为主的mvc

后端人员根据前台写的html页”套“ 模板渲染数据

前端为主的mv*

  1. mvc

    • m: model（模型） 处理应用程序数据逻辑的部分
    • v: view(视图) 处理应用程序中数据展示的部分
    • c: controller(控制器) 处理应用程序中用户交互部分

    mvc 执行过程：

     1.  view发送指令到 controller ,
 2.  controller 中收到指令后完成相关业务逻辑 更新model ,
 3.  model 将更新的逻辑发送给view 完成展示

    mvc 互动模式1

     > 同mvc 执行过程

    mvc 互动模式2
    >
    1. controller 接受指令,完成相关业务逻辑，发送到model
    2. model 将更新的逻辑发送给view
    3. view 完成视图更新

​

  1. mvp（Model-View-Presenter）

    为了避免mvc 中视图和控制器过于紧密的联系，妨碍他们的独立重用 以及 视图对模型的效率访问低（可能会有对未变化的数据的访问状况）

    • model: 负责存储，检索，操作数据
    • view 负责绘制ui元素 与用户交互
    • view interface 需要view形成的接口 view 通过 view interface 与present 交互
    • present 是view和model交互的纽带 处理与用户交互的逻辑

    mvp 执行过程

    1.view 发送指令到presenter
    2.presenter 收到指令后完成业务逻辑 更改model
    3.presenter 返回业务逻辑处理结果给 view

    mvp 执行过程中 view和presenter 双向通信
    presenter和model 双向通信
    切断了 view和model之间的通信

    ​

  2. mvvm (Model-ViewModel-View-Controller)
    mvvm 是在前端页面上对mvc模式的扩展,类似于 mvp 我们关注model的变化 mvvm 自动把model的变化推送到视图上 用户看到的页面内容就会随着model 的变化而变化 大致有热更新的意思

    正常的mvc 中的controller 主要用于处理各种逻辑和数据转化 所以 就有人把controller的数据和逻辑部分从中抽离出来 用一个专门的模块去管理 这就是 viewmodel 他是view 和 model中的真正的桥梁 而且这样使controller中的代码变少

浏览器应用基础

  • 用户从输入访问地址到浏览器展示网页内容的过程：

    • 浏览器收到用户输入的url 后，会开启一个线程来处理这个请求，对用户输入的URL 进行分析判断，如果是http协议就按照http的方式来处理

    • 调用浏览器引擎的对应方法，分析并加载url 地址

    • 通过dns 解析目标网址对应的ip地址，查询完成后 向目标ip发出请求。

    • 进行http 协议会话，浏览器客户端向服务器发送报文

    • 服务器处理请求

    • 服务器处理请求后返回响应报文 检查浏览器是否访问过该页面，缓存上有对应资源，会与服务器最后修改记录做对比，一直则返回304，否则返回200 和响应内容

    • 浏览器开始下载html 文档，（状态码为200时） 或者从本地读取文件内容 （状态码为304时）

    • 浏览器根据下载的html 文档解析HTML文件 并生成DOM 文档树 根据需要加载对应的css,js 文件

    • 页面开始渲染dom

  • 浏览器构成

    • 用户界面

    • 网络

    • javascript引擎

    • 渲染引擎

      渲染引擎的功能是解析dom文档和css 规则，并将内容排版到浏览器中显示有样式的界面 也被称为排版引擎（浏览器内核）

    • UI后端

    • javascript 解释器

    • 持久化数据存储 即缓存

      浏览器引擎可以在用户界面和渲染引擎之间传递指令或者在客户端本地缓存中读写数据，是浏览器各个部分之间相互通信的核心

  • 浏览器渲染引擎工作流程

    • 解析HTML 构建DOM 树

    将html 元素标签解析成由多个DOM元素对象节点组成的且具有父子关系的DOM树结构

    • 构建渲染数

      根据DOM结构的每个节点顺序提取计算对应的css规则，并重新计算dom的样式数据

      生成带有样式的dom 节点树

    • 渲染树布局阶段

      根据每个元素正在页面中的大小和位置 将节点固定到页面的对应位置上 主要是元素外部显示样式

    • 绘制渲染树

      将每个元素节点的背景，颜色，大小等样式信息绘制到每个节点上 主要是元素内部显示样式

    页面重排：

    页面生成后，页面位置，大小发生变化，需要从布局阶段开始重新渲染

    页面重绘

    页面生成后，元素只是显示样式发生变化，布局不变

    页面重排一定会引发页面重绘，页面重绘不一定引发页面重排

posted @ 2020-12-11 14:55  asd喵喵喵  阅读(68)  评论(0)    收藏  举报