标签：闭包 缓存 浏览器 函数 渲染 题解 TOP 面试 报文
1.Vue 中双向数据绑定的实现原理是怎样的？- 核心方法就是通过Object.defineProperty( )在setter和getter里面进行设置
- 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
- 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
- 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
- 闭包：
- 闭包是一个函数
- 闭包可以访问当前函数以外的变量
- 即使外部函数已经返回，闭包仍能访问外部函数定义的变量
- 闭包可以更新外部变量的值
- 使用场景：
- 作为回调函数绑定到事件
- 函数防抖
- 立即执行函数：
- 声明一个函数，并马上调用这个匿名函数就叫做立即执行函数。 函数在定义以后立即执行
- 作用：
- 不必为函数命名，避免了污染全局变量
- 立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量
- 封装变量
- 渲染过程
- URL解析：判断URL是否合法并完成字符编码
- 查询缓存：检查浏览器缓存，检查之前是否访问过该URL所对应的IP
- DNS解析：如果浏览器、DNS缓存都没有记录，则开始DNS解析，将域名转化为IP进行网络请求
- HTTP连接：通过DNS解析得到的IP地址，进行TCP数据请求（三次握手，四次挥手），发送请求报文
- 服务器处理请求：创建http响应报文，将资源信息放到响应报文的响应体（body）中并返回
- 浏览器响应报文：浏览器根据报文的状态码（200，302，304，404，502，504等）进行相应操作
- 200请求正常：接收正常的返回信息，开始渲染页面
- 302缓存过期：根据响应报文的location，再次发送访问请求
- 304缓存有效：直接使用缓存中页面源文件即可
- 404Not Found：找不到对应服务器
- 502请求方式错误：get，post等方式错误
- 504服务器响应超时：服务器问题
- 浏览器渲染页面：
- 根据html文件构建DOM树
- 根据CSS文件构建CSSOM树
- 根据DOM树和CSSOM树构建渲染树
- 计算每个节点的大小和位置信息，对渲染树进行布局
- 按照布局绘制显示渲染树
- 重排： 当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。例如修改了width、display，margin等等。
- 重绘： 如果修改了元素的背景颜色，并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。例如修改了color，border-radius，background等等。
- diff算法：计算两颗树形结构差异并进行转换，运用动态规划求解最长递归子序列
- 传统：循环递归每一个节点，将左侧树的每一个节点拿出与右侧树每个节点进行对比，算法复杂度是O(n^3)
- Vue：
- 比较只会在同层级进行，不会跨层级比较
- diff过程依靠调用patch函数，通过打补丁方式修改真实dom
- 采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。
- 使用场景：Vue中通过diff算法比较虚拟DOM和真实DOM中节点是否相似来进行DOM更新
标签：闭包,缓存,浏览器,函数,渲染,题解,TOP,面试,报文 来源： https://www.cnblogs.com/VegatableBird555/p/16110547.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。