LuckXinXin的博客

浏览器的渲染过程：解析HTML构建 DOM(DOM树)，并行请求 css/image/jsCSS 文件下载完成，开始构建 CSSOM(CSS树)CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)布局(Layout)：计算出每个节点在屏幕中的位置显示(Painting)：通过显卡把页面画到屏幕上DOM树 和 渲染树 的区别：DOM树与HTML标签一一对应，包括head和隐藏元素渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的

在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script的位置不影响首屏显示的开始时间。浏览器解析 HTML 是自上而下的线性过程，script作为 HTML 的一部分同样遵循这个原则因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间...

JavaScript作用域：在Java、C等语言中，作用域为for语句、if语句或{}内的一块区域，称为作用域；而在 JavaScript 中，作用域为function(){}内的区域，称为函数作用域。JavaScript变量声明提升：在JavaScript中，函数声明与变量声明经常被JavaScript引擎隐式地提升到当前作用域的顶部。声明语句中的赋值部分并不会被提升，只有名称被提升函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明如果函数有多个同名参数

遵循严格模式："use strict";将js脚本放在页面底部，加快渲染页面将js脚本将脚本成组打包，减少请求使用非阻塞方式下载js脚本尽量使用局部变量来保存全局变量尽量减少使用闭包使用 window 对象属性方法时，省略 window尽量减少对象成员嵌套缓存 DOM 节点的访问通过避免使用 eval() 和 Function() 构造器给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数尽量使用直接量创建对象和数组最小化重绘(repaint).

代码缩进，建议使用“四个空格”缩进代码段使用花括号{}包裹语句结束使用分号;变量和函数在使用前进行声明以大写字母开头命名构造函数，全大写命名常量规范定义JSON对象，补全双引号用{}和[]声明对象和数组...

数据封装类对象：Object、Array、Boolean、Number、String其他对象：Function、Arguments、Math、Date、RegExp、ErrorES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

根据 navigator.userAgent UA.toLowerCase().indexOf('chrome')根据 window 对象的成员 'ActiveXObject' in window

**JavaScript 由以下三部分组成： **ECMAScript（核心）：JavaScript语言基础DOM（文档对象模型）：规定了访问HTML和XML的接口BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法

jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});优缺点：本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不

calleecaller返回一个函数的引用，这个函数调用了当前的函数。使用这个属性要注意这个属性只有当函数在执行时才有用如果在javascript程序中，函数是由顶层调用的，则返回nullfunctionName.caller: functionName是当前正在执行的函数。function a() { console.log(a.caller)}calleecallee放回正在执行的函数本身的引用，它是arguments的一个属性使用callee时要注意:这

该组件需要提供hook指定渲染位置，默认渲染在body下面。然后改组件可以指定外层样式，如宽度等组件外层还需要一层mask来遮住底层内容，点击mask可以执行传进来的onCancel函数关闭Dialog。另外组件是可控的，需要外层传入visible表示是否可见。然后Dialog可能需要自定义头head和底部footer，默认有头部和底部，底部有一个确认按钮和取消按钮，确认按钮会执行外部传进来的onOk事件，然后取消按钮会执行外部传进来的onCancel事件。当组件的visible为true时候，.

浏览器缓存机制有两种，一种为强缓存，一种为协商缓存对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存协商缓存相关设置Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。Cache-control：max-age：表.

this，函数执行的上下文，可以通过apply，call，bind改变this的指向。对于匿名函数或者直接调用的函数来说，this指向全局上下文（浏览器为window，NodeJS为global），剩下的函数调用，那就是谁调用它，this就指向谁。当然还有es6的箭头函数，箭头函数的指向取决于该箭头函数声明的位置，在哪里声明，this就指向哪里...

首先浏览器主进程接管，开了一个下载线程。然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。将下载完的内容转交给Renderer进程管理。Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。css rule tree和dom t.

当创建一个对象时，JavaScript 会自动为该对象分配适当的内存垃圾回收器定期扫描对象，并计算引用了该对象的其他对象的数量如果被引用数量为 0，或惟一引用是循环的，那么该对象的内存即可回收...

事件流分为两种，捕获事件流和冒泡事件流捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点事件流分为三个阶段，一个是捕获节点，一个是处于目标节点阶段，一个是冒泡阶段...

首先，js是单线程的，主要的任务是处理用户的交互，而用户的交互无非就是响应DOM的增删改，使用事件队列的形式，一次事件循环只处理一个事件响应，使得脚本执行相对连续，所以有了事件队列，用来储存待执行的事件，那么事件队列的事件从哪里被push进来的呢。那就是另外一个线程叫事件触发线程做的事情了，他的作用主要是在定时触发器线程、异步HTTP请求线程满足特定条件下的回调函数push到事件队列中，等待js引擎空闲的时候去执行，当然js引擎执行过程中有优先级之分，首先js引擎在一次事件循环中，会先执行js线程的主任务.

const box = document.getElementById('box');function isIcon(target) { return target.className.includes('icon');}box.onClick = function(e) { e.stopPropagation(); const target = e.target; if (isIcon(target)) { target.style.border = '1px solid

jQuery 实现 todo-listvue 实现 todo-listjQuery 和框架的区别数据和视图的分离，解耦（开放封闭原则）以数据驱动视图，只关心数据变化，DOM 操作被封装

两者的本质区别vue - 本质是 MVVM 框架，由 MVC 发展而来React - 本质是前端组件化框架，由后端组件化发展而来但这并不妨碍他们两者都能实现相同的功能看模板和组件化的区别vue- 使用模板（最初由 angular 提出）React- 使用 JSX模板语法上，我更加倾向于 JSX模板分离上，我更加倾向于 vue模板的区别模板应该和 JS 逻辑分离组件化区别React 本身就是组件化，没有组件化就不是 Reactvue 也支持组件化，不过是在 MVV

setState 的异步setState 为何需要异步？可能会一次执行多次 setState你无法规定、限制用户如何使用 setState没必要每次 setState 都重新渲染，考虑性能即便是每次重新渲染，用户也看不到中间的效果只看到最后的结果即可vue 修改属性也是异步效果、原因和 setState 一样setState 的过程每个组件实例，都有renderComponent 方法执行 renderComponent 会重新执行实例的 renderrender 函数

为何需要 vdomvdom 是 React初次推广开来的，结合 JSXJSX 就是模板，最终要渲染成 html初次渲染 + 修改 state 后的 re-render正好符合 vdom 的应用场景React.createElement 和 h何时 patch初次渲染 - ReactDOM.render(<App/>, container)会触发 patch(container, vnode)re-render - setState会触发 patch(vnode, ne

JSX 其实是语法糖开发环境会将 JSX 编译成 JS 代码JSX 的写法大大降低了学习成本和编码工作量同时，JSX 也会增加 debug成本JSX 独立的标准JSX 是 React 引入的，但不是 React 独有的React已经将它作为一个独立标准开放，其他项目也可用React.createElement 是可以自定义修改的说明：本身功能已经完备；和其他标准监控和扩展性没问题...

JSX 语法html 形式引入 JS 变量和表达式循环style 和 className事件JSX 语法根本无法被浏览器所解析那么它如何在浏览器运行？

组件的封装视图数据变化逻辑组件的复用props 传递复用

JS 和客户端通讯的基本形式JS 访问客户端能力，传递参数和回调函数客户端通过回调函数返回内容schema 协议简介和使用之前介绍了 http(s) 和 file 协议schema 协议 —— 前端和客户端通讯的约定schema 使用的封装内置上线将以上封装的代码打包，叫做 invoke.js，内置到客户端客户端每次启动 webview，都默认执行 invoke.js本地加载，免去网络加载的时间，更快本地加载，没有网络请求，黑客看不到 schema 协议，更安全

优点体验更好，跟 NA体验基本一致可快速迭代，无需 app 审核【关键】** 缺点**开发成本高。联调、测试、查 bug 都比较麻烦运维成本高。参考此前讲过的更新上线的流程** 适用的场景**hybrid ： 产品的稳定功能，体验要求高，迭代频繁h5 ： 单词的运营活动（如 xx 红包）或不常用功能...

具体流程图思考（目的，可行途径）要替换每个客户端的静态文件只能客户端来做（客户端是我们开发的）客户端去 server 下载最新的静态文件我们维护 server 的静态文件完整流程分版本，有版本号，如 202104081015将静态文件压缩成 zip包，上传到服务端客户端每次启动，都去服务端检查版本号如果服务端版本号大于客户端版本号，就去下载最新的 zip 包下载完之后解压包，然后将现有文件覆盖要点总结要点1：服务端的版本和zip包维护要点2：更新zip 包之前，先

不是所有场景都适合使用 hybrid使用 NA ：体验要求极致，变化不频繁（无头条的首页）使用 hybrid ：体验要求高，变化频繁（如头条的新闻详情页）使用 h5 ：体验无要求，不常用（如举报、反馈等页面）实现前端做好静态页面（html js css），将文件交给客户端客户端拿到前端静态页面，以文件形式存储在 app 中客户端在一个 webview 中使用 file 协议加载静态页面...

** file和http(s）的区别**file 协议：本地文件，快http(s) 协议：网络加载，慢

其实在一开始接触 html开发，就已经使用了 file 协议只不过你当时没有“协议”“标准”等这些概念

是 app 中的一个组件（ app 可以有 webview ，也可以没有）于加载 h5 页面，即一个小型的浏览器内核

可以快速迭代更新【关键】（无需 app 审核，思考为何？）体验流畅（和 NA 的体验基本类似）减少开发和沟通成本，双端公用一套代码

hybrid 文字解释hybrid 即“混合”，即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节也可能涉及到 server 端PS：不要以为自己的前端就可以不理会客户端的知识

单线程 - 只有一个线程，只能做一件事原因 - 避免 DOM 渲染的冲突浏览器需要渲染 DOMJS 可以修改 DOM 结构JS 执行的时候，浏览器 DOM 渲染会暂停两段 JS 也不能同时执行（都修改 DOM 就冲突了）webworker 支持多线程，但是不能访问 DOM解决方案 - 异步...

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境接下来让我们看一个老生常谈的例子，varb() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b')}变量提升这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误.

防抖在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。可以通过函数防抖动来实现// 使用 underscore 的源码来解释防抖动/** * underscore 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行 * * @param {function} func 回调函数 * @param {number} wait 表示时间窗口的间隔 * @param {boolean} immediate