Vue文档再研-感悟

1.只有当实例被创建时就已经存在于 data 中的属性才是响应式的。

2.计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

3.JS操作真实DOM的代价！

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

4. 浏览器主要组成与浏览器线程

界面控件 – 包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的部分
浏览器引擎 – 查询与操作渲染引擎的接口
渲染引擎 – 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML、CSS并将结果显示到窗口中
网络 – 用于网络请求, 如HTTP请求。它包括平台无关的接口和各平台独立的实现
UI后端 – 绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现
JS解释器 - 用于解析执行JavaScript代码
数据存储持久层 - 浏览器需要把所有数据存到硬盘上，如cookies。新的HTML5规范规定了一个完整（虽然轻量级）的浏览器中的数据库 web database

1/2.GUI渲染线程与JS引擎线程互斥的，是由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JavaScript线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致。当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行。由于GUI渲染线程与JS执行线程是互斥的关系，当浏览器在执行JS程序的时候，GUI渲染线程会被保存在一个队列中，直到JS程序执行完成，才会接着执行。因此如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

3. 定时触发器线程

浏览器定时计数器并不是由JS引擎计数的, 因为JS引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确, 因此通过单独线程来计时并触发定时是更为合理的方案。

4. 事件触发线程

当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可以是当前执行的代码块如定时任务、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

5. 异步http请求线程

在XMLHttpRequest在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到JS引擎的处理队列中等待处理。

Vue文档再研-感悟相关推荐

此文件中的某些文本格式可能已经更改，因为它已经超出最多允许的字体数。关闭其他文档再试一次可能有用。...
NPOI 创建 Excel 出错"此文件中的某些文本格式可能已经更改,因为它已经超出最多允许的字体数.关闭其他文档再试一次可能有用." NPOI 是从 POI 发展来的,POI 是 ...
将vue文档下载到本地预览
将vue文档下载到本地预览由于vue文档在服务器在国外,因此访问速度较慢,为了方便文档查看,可以将文档下载到本地预览步骤到vue的GitHub仓库下载文档源码下载node.js和git安装到本 ...
VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客
前言: VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目,VuePress界面十分简洁,并且非常容易上手,一个小时就可以将项目架构搭好.现在已经有很多这种类型的文档,如果你有 ...
viewer vue 文档_vue基于viewer实现的图片查看器
vue2-viewer vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能 vue2-viewer 是viewer.js vue的实现,效果以及样 ...
Vue 文档编写指南
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步原文:https://v3.cn.vuejs.org/guide/contributing/writing-gu ...
都在夸Vue文档简洁易懂？官方文档编写指南了解一下
来源:Vue官方文档编写文档是一种换位思考的练习.我们并不是在描述客观现实--源代码已经做到了.我们的工作是帮助塑造用户与 Vue 生态系统之间的关系.这份不断发展的指南提供了一些规则和建议,说明如 ...
vue 文档.PDF无法预览解决方法
在预览的时候,.pdf文件可以正常预览,但是.PDF就无法预览,后来找到了解决方法,将文件格式小写后判断是不是.pdf,如果是就正常预览,方法很简单,代码如下: // 文档预览handleDocVie ...
想看Vue文档，cn放错位置，误入xx网站...
前沿资讯早知道,弯道超车有希望积累超车资本,从关注DD开始昨晚,DD在微信群(点击加入)里看到有小伙伴说,想去Vue官网看中文文档,不当心把cn写错了位置,结果进入了xx网站... 老司机们应该都 ...
vue文档熟读之---深入了解组件
首先: 先贴上文档链接 https://cn.vuejs.org/v2/guide/components-registration.html OK,开始进入正题. 1.组件注册 1.1组件名写法 1. ...

Vue文档再研-感悟

Vue文档再研-感悟相关推荐

最新文章

热门文章