LuckXinXin的博客

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

浏览器的渲染过程：解析HTML构建 DOM(DOM树)，并行请求 css/image/jsCSS 文件下载完成，开始构建 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、ErrorES6新增对象：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的区别

calleecaller返回一个函数的引用，这个函数调用了当前的函数。使用这个属性要注意这个属性只有当函数在执行时才有用如果在javascript程序中，函数是由顶层调用的，则返回nullfunctionName.caller: functionName是当前正在执行的函数。function a() { console.log(a.caller)}calleecallee放回正在执行的函数本身的引用，它是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 即vmprice 即 this.price 即 vm.price，即 data

原创 vue 中如何实现响应式

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

原创 说一下对 MVVM 的理解

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

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

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

原创 前端面试之MVVM浅析

原创 React vs vue

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

原创 说一下 React setState 的过程

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

原创 JSX 和 vdom 的关系

为何需要 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 其实是语法糖开发环境会将 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 页面，即一个小型的浏览器内核