易函123

什么是虚拟 DOMvirtual DOM 跨平台能力 RN WEEX js 用对象的属性描述节点 映射到真实环境 object tag attrs children vdom 节点与真实 dom 属性意义对应 为什么需要虚拟 DOMDOM 操作引起性能问题 vdom vnode diff js 对象 attach 避免无必要计算 抽象原本的渲染过程 实现跨平台能力

过程 输入 url 浏览器缓存 - 系统缓存 - 路由器缓存 有缓存显示页面内容，没有就往下执行 http 请求前 DNS 解析 ip 地址 tcp 连接 三次握手 浏览器发送 http 请求 请求数据包 服务器收到请求，返回数据到浏览器 http 响应 读取页面内容 渲染 解析代码 生成 DOM 树，解析 css 样式，js 交互，渲染显示页面

数据类型 基本类型 栈内存 引用类型 堆内存 变量 指向实际堆内存中实际对象的引用 浅拷贝 只拷贝一层 引用类型只拷贝内存地址 修改一个对象属性，另外一个对象属性会发生改变 实现方式 Object.asign() Array.prototype.slice() Array.prototype.concat() 扩展运算符 深拷贝 开辟新的栈，两个对象属性完全相同，对应两个不同地址。修改一个对象属性，另外一个对象属性不会发生改变 实现方式 _.cloneDeep() lodash 深拷贝 jQuery.extend() JSON.stringify() 会忽略 undefined symbol 函数 手写循环递归 区别 浅拷贝 只复制属性指向某个对象的指针，不复制对象本身，新旧对象共享同一块内存 修改对象属性会改变原对象 深拷贝 创造一个一模一样的对象，新旧对象不共享内存，修改对象属性不会改变原对象

12345678let url = 'https://baidu.com?a=1&b=12&c=info'let getUrlParams = function (URL) { let url = URL.split('?')[1] let urlsearchparam = new URLSearchParams(url) const params = Object.fromEntries(urlsearchparam.entries()) return params}console.log(getUrlParams(url))

白屏时间 空白->显示第一个画面时间 重要性提升用户体验，减少用户跳出，提升整体页面的留存率 原因 css 放在 head 里，阻塞渲染，加载时间长会出现页面长时间白屏 js 加载和执行会阻塞页面解析和渲染 优化 DNS 解析 DNS 缓存优化 DNS 预加载策略 确定可靠的 DNS 服务器 对浏览器页面的下载 解析 渲染过程 尽可能精简 HTML 代码和结构 尽可能优化 css 文件和结构 合理放置 js 代码 尽量不要使用内敛 js 将渲染首屏 css 内敛到 html 中 快速下载 css 延迟首屏不需要的图片加载 优先加载首屏所需的图片 文件体积 尽量减少 css js 体积，放在 head 标签 js defer 属性：先加载后执行不阻塞代码执行

前言日常 js 面试题积累汇总。持续更新！ 1.JavaScript 的基本数据类型 答案:Number、String、Boolean、Null、Undefined、Symbel（ES6 新增）、BigInt(ES10 新增)Object 是 JavaScript 中所有对象的父对象数据封装类对象：Object、Array、Boolean、Number、和String其他对象：Function、Arguments、Math、Date、RegExp、Errorjs 数据类型 2.JavaScript 的引用类型 答案: Object Function Array Date RegExp 3.Javascript 基本数据类型和引用类型的特点 答案:1.基本数据类型：值不可变；数据存放在栈区。2.引用数据类型：值是可变的；同时保存在栈内存和堆内存。 4.检验 JavaScript 的数据类型的方法有哪些，以及使用它们的缺点 答案: 1.typeof：不能判断 null 和区分 Array/Date/RegExp 2.instanc ...

相同点 对引入对象进行赋值，即对对象内部属性的值的改变 区别 commonJS 模块运行时加载，ES6 模块是输出编译时输出接口 commonJS 模块 require 同步加载模块，ES6 import 是异步的 commonJS 模块 require 对模块的浅拷贝，ES6 import 是对模块的引入，只存只读不改变其值 指针指向不能变类似 const import 接口 read-only 不能改变变量值，

前言在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、scroll mousedown、mousemove、mousewheel(鼠标滚轮) keyup(弹起键盘)、keydown(按下键盘)、keypress(按下字符键盘)…… 想象一下窗口的 resize 事件或者是一个元素的 onmouseover 事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。 这就是为什么要使用防抖。 原理 防抖的原理：在 wait 时间内，持续触发某个事件。第一种情况：如果某个事件触发 wait 秒内又触发了该事件，就应该以新的事件 wait 等待时间为准，wait 秒后再执行此事件；第二种情况：如果某个事件触发 wait 秒后，未再触发该事件，则在 wait 秒后直接执行该事件。 通俗一点：定义 wait=2000，持续点击按钮，前后点击间隔都在 2 秒内，则在最后一次点击按钮后，等待 2 秒再执行 func 方法。如果点击完按钮，2 秒后未再次点击按钮，则 2 秒后直接执行 func 方法。 示例代码代码一(根据原 ...

前言数组去重在面试和工作中都是比较容易见到的问题。 这篇文章主要是来测试多个方法，对下面这个数组的去重结果进行分析讨论。如果有不对的地方，还请大家指出。 1const arr = [ 1, 1, "1", "1", 0, 0, "0", "0", true, false, "true", "false", "a", "A", undefined, undefined, "undefined", null, null, 'null', NaN, NaN, +0, -0, new String("1"), new String("1"), Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], [] ]; 特殊类型1234567891011121314151617181920212 ...

前言js 的典型的场景 监听页面的 scroll 事件 拖拽事件 监听鼠标的 mousemove 事件… 这些事件会频繁触发会影响性能，如果使用节流，降低频次，保留了用户体验，又提升了执行速度，节省资源。 原理 节流的原理：持续触发某事件，每隔一段时间，只执行一次。 通俗点说，3 秒内多次调用函数，但是在 3 秒间隔内只执行一次，第一次执行后 3 秒 无视后面所有的函数调用请求，也不会延长时间间隔。3 秒间隔结束后则开始执行新的函数调用请求，然后在这新的 3 秒内依旧无视后面所有的函数调用请求，以此类推。 简单来说：每隔单位时间（ 3 秒），只执行一次。 实现方式目前比较主流的实现方式有两种：时间戳、定时器。 时间戳实现使用时间戳实现：首先初始化执行事件的时间 previous 为 0，然后将当前的时间戳减去上次执行时间（now - previous），如果大于 wait，则直接执行函数，并且将此时的执行时间 now 赋给 previous（previous = now）。 由于首次 previous = 0，则此时函数第一次触发就会立即执行。 后续则每隔 w ...