LuckXinXin的博客

原创 描述浏览器的渲染过程，DOM树和渲染树的区别

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

原创 script 的位置是否会影响首屏显示时间

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

原创 解释JavaScript中的作用域与变量声明提升

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

原创 如何编写高性能的JavaScript

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

原创 说几条写JavaScript的基本规范

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

原创 介绍JS有哪些内置对象

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

原创 检测浏览器版本版本有哪些方式？

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

原创 JavaScript的组成

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

原创 ajax、axios、fetch区别

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

原创 caller和callee的区别

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

原创 现在要你完成一个Dialog组件，说说你设计的思路？它应该有什么功能？

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

原创 说一下浏览器的缓存机制

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

原创 描述一下this

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

原创 说说从输入URL到看到页面发生的全过程，越详细越好

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

原创 JavaScript 对象生命周期的理解

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

原创 说说事件流

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

原创 说说event loop

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

原创 实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)

var instance = null; class Storage { static getInstance() { if (!instance) { instance = new Storage(); } return instance; } setItem = (key, value) => localStorage.setItem(key, value), getItem = key => localStorage.getItem(ke

原创 请简单实现双向数据绑定mvvm

<input id="input"/> const data = {}; const input = document.getElementById('input'); Object.defineProperty(data, 'text', { set(value) { input.value = value; this.value = value; } }); input.onChange = function(e) { data.text = e.target

原创 实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置

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

原创 vue 的整个实现流程

第一步：解析模板成 render 函数 第二步：响应式开始监听 第三步：首次渲染，显示页面，且绑定依赖 第四步：data 属性变化，触发 rerender 第一步：解析模板成 render 函数 模板中的所有信息都被 render函数包含 模板中用到的 data 中的属性，都变成了 JS 变量 模板中的v-model v-for v-on 都变成了 JS 逻辑 render 函数返回 vnode 第二步：响应式开始监听 Object.defineProperty 将 data 的属性代理.

原创 vue 中如何解析模板

模板是什么 本质：字符串 有逻辑，如 v-if v-for 等 与 html 格式很像，但有很大区别 最终还要转换为 html 来显示 模板最终必须转换成 JS 代码，因为 有逻辑（v-if v-for），必须用 JS才能实现 转换为 html 渲染页面，必须用 JS 才能实现 因此，模板最重要转换成一个 JS 函数（render 函数） render 函数 模板中所有信息都包含在了 render 函数中 this 即vm price 即 this.price 即 vm.price，即 data

原创 vue 中如何实现响应式

什么是响应式 修改 data 属性之后，vue 立刻监听到 data 属性被代理到 vm 上 Object.defineProperty 模拟实现

原创 说一下对 MVVM 的理解

MVC M - Model 数据 V - View 视图、界面 C - Controller 控制器、逻辑处理 MVVM Model - 模型、数据 View - 视图、模板（视图和模型是分离的） ViewModel - 连接 Model 和 View 关于 ViewModel MVVM 不算是一种创新 但其中的 ViewModel 确实一种创新 真正结合前端场景应用的创建 MVVM 框架的三大要素 响应式：vue如何监听到 data 的每个属性变化？ 模板引擎：vue 的模板如何被

原创 说一下使用 jquery 和使用框架的区别

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

原创 前端面试之MVVM浅析

原创 React vs vue

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

原创 说一下 React setState 的过程

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

原创 JSX 和 vdom 的关系

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

原创 JSX 解析

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

原创 JSX 本质是什么

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

原创 说一下对组件化的理解

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

原创 前端面试之组件化

原创 前端和客户端通讯

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

原创 hybrid 和 h5 的区别

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

原创 hybrid 更新上线流程

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

原创 hybrid具体实现

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

原创 http(s) 协议

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

原创 file 协议

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

原创 webview

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