摘要: 双线程模型 渲染线程和逻辑线程 小程序的双线程指的就是渲染线程和逻辑线程,这两个线程分别承担UI的渲染和执行 JavaScript 代码的工作 渲染线程使用 Webview 进行 UI 的渲染呈现。Webview 是一个完整的类浏览器运行环境,本身具备运行 JavaScript 的能力,但是小程序并 阅读全文
posted @ 2022-06-30 16:09 _晓亮 阅读(310) 评论(0) 推荐(1) 编辑
摘要: Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。 一、回顾页面加载过程 要学习这套API的使用,先简单介绍下前端的基础知识 1.1 页面加载 一个页面的 阅读全文
posted @ 2022-06-30 16:09 _晓亮 阅读(1145) 评论(0) 推荐(2) 编辑
摘要: 一、浏览器如何渲染网页 概述:浏览器渲染一共有五步 处理 HTML 并构建 DOM 树。 处理 CSS构建 CSSOM 树。 将 DOM 与 CSSOM 合并成一个渲染树。 根据渲染树来布局,计算每个节点的位置。 调用 GPU 绘制,合成图层,显示在屏幕上 第四步和第五步是最耗时的部分,这两步合起来 阅读全文
posted @ 2022-06-30 16:07 _晓亮 阅读(189) 评论(0) 推荐(1) 编辑
摘要: 一、Promise基础用法 1.1 基本用法 new Promise(function(resolve, reject) { //待处理的异步逻辑 //处理结束后,调用resolve或reject方法 }) 新建一个promise很简单,只需要new一个promise对象即可。所以promise本质 阅读全文
posted @ 2022-06-30 16:05 _晓亮 阅读(118) 评论(0) 推荐(1) 编辑
摘要: setTimeout,它就是一个定时器,用来指定某个函数在多少毫秒之后执行 setTimeout用法 var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]); var timeoutID = setTimeout(function 阅读全文
posted @ 2022-06-30 16:04 _晓亮 阅读(339) 评论(0) 推荐(1) 编辑
摘要: 什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual DOM let element = document.querySelector('app') let s = '' for (v 阅读全文
posted @ 2022-06-30 16:03 _晓亮 阅读(75) 评论(0) 推荐(1) 编辑
摘要: 理解Vue的设计思想 MVVM框架的三要素:数据响应式、模板引擎及其渲染 数据响应式:监听数据变化并在视图中更新 Object.defineProperty() Proxy 模版引擎:提供描述视图的模版语法 插值:{{}} 指令:v-bind,v-on,v-model,v-for,v-if 渲染:如 阅读全文
posted @ 2022-06-30 15:29 _晓亮 阅读(71) 评论(0) 推荐(1) 编辑
摘要: 一、初始vuex 1.1 vuex是什么 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用 父子组件通信时,我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系,或者一个状态需要共享给多个组件时,就会非常麻 阅读全文
posted @ 2022-06-30 15:27 _晓亮 阅读(31) 评论(0) 推荐(1) 编辑
摘要: 数据驱动 数据响应式、双向绑定、数据驱动 数据响应式 数据模型仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,避免了繁琐的 DOM 操作提高开发效率 双向绑定 数据改变,视图改变;视图改变,数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据 阅读全文
posted @ 2022-06-30 15:24 _晓亮 阅读(45) 评论(0) 推荐(1) 编辑
摘要: 一、Vue.js 运行机制全局概览 全局概览 这一节笔者将为大家介绍一下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解。从来没有了解过 Vue.js 实现的同学可能会对一些内容感到疑惑,这是很正常的,这一节的目的主要是为了让大家对整个流程有一个大概的 阅读全文
posted @ 2022-06-30 15:23 _晓亮 阅读(29) 评论(0) 推荐(1) 编辑
摘要: 本文主要分析 Vue 从 Data 更新,到通知 Watcher 异步更新视图的流程,也就是下图中的橙色部分。 我们先来回顾一下图中的几个对象: Data 对象:Vue 中的 data 方法中返回的对象。 Dep 对象:每一个 Data 属性都会创建一个 Dep,用来搜集所有使用到这个 Data 的 阅读全文
posted @ 2022-06-30 15:22 _晓亮 阅读(198) 评论(0) 推荐(1) 编辑
摘要: Vue 初始化 先从最简单的一段 Vue 代码开始: <template> <div> {{ message }} </div> </template> <script> new Vue({ data() { return { message: "hello world", }; }, }); </ 阅读全文
posted @ 2022-06-30 15:20 _晓亮 阅读(244) 评论(0) 推荐(1) 编辑
摘要: 在上一章中我们讲解并实现了渲染器的挂载逻辑,本质上就是将各种类型的 VNode 渲染成真实DOM的过程。渲染器除了将全新的 VNode 挂载成真实DOM之外,它的另外一个职责是负责对新旧 VNode 进行比对,并以合适的方式更新DOM,也就是我们常说的 patch。本章内容除了让你了解基本的比对逻辑 阅读全文
posted @ 2022-06-30 15:19 _晓亮 阅读(35) 评论(0) 推荐(1) 编辑
摘要: idebarDepth: 4 TIP 本章主要讲解渲染器将各种类型的 VNode 挂载为真实 DOM 的原理,阅读本章内容你将对 Fragment 和 Portal 有更加深入的理解,同时渲染器对有状态组件和函数式组件的挂载实际上也透露了有状态组件和函数式组件的实现原理,这都会包含在本章的内容之中。 阅读全文
posted @ 2022-06-30 15:14 _晓亮 阅读(28) 评论(0) 推荐(1) 编辑
摘要: 在本章之前,我们花费了很大的篇幅全面的讲解了一个普通渲染器的实现原理,它可以将 Virtual DOM 渲染为 Web 平台的真实 DOM。本章我们将在上一章的基础上讲解更加高级的渲染器:自定义渲染器(Custom renderer)以及异步渲染。 自定义渲染器的原理 渲染器是围绕 Virtual 阅读全文
posted @ 2022-06-30 15:10 _晓亮 阅读(229) 评论(0) 推荐(0) 编辑