11 2019 档案
摘要:1. 算法由来 React调用render()方法后,会生成一个React元素组成的树。 再次调用,生成一个新的树。React比较两者的差异,然后更新UI。 如果单纯使用算法,来查找两个DOM树的差异值,算法复杂度为O(n^3)。 为了提高渲染效率,假定: 1)元素类型不同,是不同的树 2)子元素可
阅读全文
摘要:合并排序算法遵循分治策略; 1. 先将数组细分到只有一个元素 2. 然后依次合并排序数组(核心是合并两个已排序数组) 算法复杂度: 时间复杂度: 临近上界和临近下界全部都是O(nlgn), Ω(nlgn) (可以通过数学推导法得出) 空间复杂度:O(n) 代码: 测试用例:
阅读全文
摘要:1. props属性 典型的React应用,数据通过props按照自上而下(父->子)的顺序传递数据。 2. Context传值 1. 应用场景 对于一些应用中全局性的属性(如UI主题、语言、登陆用户等),通过props传递会很繁琐。 Context的出现可以在组件之间(父->子)共享这些属性。 2
阅读全文
摘要:1. 创建一个package.json文件 发布到npm registry的包必须包含一个packge.json文件。 1. 必需name字段 要求: 1. 只能是一个单词,但是可以包含-或_ 2. 只能是小写字母 2. 必需version字段 version字段必须遵循语义化版本规范。 每变更一次
阅读全文
摘要:1. 绝对路径 一般指的是完整路径。从最顶层文件夹一直到当前文件的路径。 2. 相对路径 相对于当前文件的路径。有几种表示形式。 1. 和当前文件同级目录 2. 相对符号./或者../ 3. 根路径 /XXX 表示直接访问根路径下的某文件。
阅读全文
摘要:1. 按照对象属性排序 1. 属性值是数字: 2. 属性值是字符串
阅读全文
摘要:1. 确定设计稿和数据 设计稿: 数据: 2. 将设计稿UI分组件层级 组件单一功能原则: 即一个组件实现一个功能。 图中,一个颜色是一种组件,按照嵌套关系,可以分为: FilterableProductTable: SearchBar: ProductTable: ProductCategoryR
阅读全文
摘要:1. 使用props属性和组合 1. props.children 在需要自定义内容的地方渲染props.children 2. 将组件作为变量传递到另一个组件 2. 高阶组件 详情 3. Render props 统指属性值是函数的属性,返回值用于指定渲染内容。 属性名称可以随意指定,childr
阅读全文
摘要:1. 使用策略 分治策略 2. 优点 在原址排序,空间复杂度低; 3. 复杂度 时间复杂度: 最优O(nlgn) 最坏O(n^2) 平均O(nlgn) 空间复杂度: 最优O(lgn) 最坏O(n) 平均(lgn) 4. 算法解析 关键:将数组按照某个中心值进行分割;中心值左侧均小于中心值,中心值右侧
阅读全文
摘要:“受控“组件和”非受控“组件通常是指的表单元素。 但是有时如果通过props将数据传入某个组件,该组件受props数据控制,也可称为“受控”组件。 如果只是受state的数据影响,则称为“非受控”组件。 下面介绍的主要是表单类的组件。 1. 受控组件 通过React的state作为数据唯一来源,通过
阅读全文
摘要:题目:在n*n的棋盘上,放n个皇后,互不攻击(不可在同行/列/对角线) 分析:将棋盘抽象成一个一维数组[0,1,2......,n*n-1],x=~~(i/n)取整,y=i%n; decisions是放n个皇后的一维坐标 代码:queen(n)可获得最后结果。
阅读全文
摘要:1. 不使用JSX 优点: 不用配置有关JSX的编译。 依赖语法: html页面示例: 使用React的前提是引入react和react-dom文件;生产环境要使用production版本 like_button.js 2. 快速使用JSX JSX元素本质上调用React.createElement
阅读全文
摘要:1. js代码嵌入网页的方式 1. script标签嵌入脚本 script标签有个属性type,用于指定脚本的类型; 1. "text/javascript": 默认值,指定运行的是js代码 2. "application/javascript": 在较新的浏览器中,指定是JS代码 3. "text
阅读全文
摘要:如图所示,图中蓝线表示DOMContentLoaded事件触发时经过的时间,DOM树构建花费的时间。 图中红线表示onload事件触发时经过的时间,也是所有的资源(图片等)下载处理完成的时间。 图中绿色的条表示等待服务器响应的时间;蓝色的条表示资源下载的时间。 由此可知,第一个蓝色条结束的位置,是H
阅读全文
摘要:优化浏览器渲染,要从关键渲染路径出发,基本上是优化HTML、CSS、JS的依赖关系。 其中HTML构建的DOM消耗是必须的。 1. 从阻塞渲染的CSS出发 CSS默认是阻塞渲染的资源。 根据浏览器渲染的过程可知,浏览器渲染的基础是DOM和CSSOM。在生成CSSOM之前,不会渲染任何内容。 生成CS
阅读全文
摘要:响应式网站指的是随着设备的尺寸变化,网页内容和样式始终可以正常显示。 1. 元视窗代码 设置了元视窗的代码后,页面内容可以随设备适度缩放。 2. CSS媒体类型过滤 css媒体类型过滤是根据当前所在的媒体环境进行过滤。 媒体类型有: 1. link加载外联样式时 2. 加载具体样式内容时 3. CS
阅读全文
摘要:浏览器渲染,即浏览器将html,css,js的字节转为渲染元素,展示到页面的过程。 这个过程叫做关键渲染路径。 1. 关键渲染路径 1. 处理HTML构建DOM(文档对象模型)树 2. 处理CSS构建CSSOM(css对象模型)树 3. 将DOM树和CSSOM树合并成一个渲染树 4. 布局,也称为“
阅读全文
摘要:1. 执行顺序说明 1. node V10(每次切换都清空队列) 1. 清空主执行栈队列 2. 清空微任务队列。 3. 按照timer->poll->check队列执行,只要执行队列切换就清空微任务队列。则主执行栈切换到timer队列,也会先清空微任务队列。 4. 定时器时间到达,清空所有的time
阅读全文
摘要:1. 窗口(iframe)通信 不同源的网页,可以获取窗口的以下属性和方法: 1. document.domain 场景: 给不同源(一级域名+端口+协议相同)的网页设置: 如:image.baidu.com和video.baidu.com就可以通过这个方法。 则可以通过js读取彼此的Cookie,
阅读全文
摘要:CORS(Cross-Origin Resource Sharing): 跨域资源共享。是个W3C标准。 解决Ajax跨域通信的最根本的方法。 根据请求是否会触发浏览器的预检请求(OPTIONS),将CORS请求分为两类。 1. 简单请求 1. 定义 同时满足下面的所有条件: 1. 请求方法是GET
阅读全文
摘要:1. 为什么使用Web Workers API 通过使用该API,web应用程序可以独立于主线程,运行一个单独的线程来处理脚本。 可以在独立的线程中解决耗时较长的任务,避免主线程阻塞。 2. 应用 1. 新建一个worker.js文件,将耗时较长的js代码放入其中;通过postMessage传递数据
阅读全文
摘要:两者都是浏览器端存储数据的接口。除了存储时长,两者完全一致。 不同点: SessionStorage存储的数据只能用于一次会话(session),当会话结束(浏览器关闭),数据清空; 而LocalStorage长期存在。 1. 特点 1. 以键值对存储;且以文本形式(字符串形式)存储。 2. 读取时
阅读全文
摘要:1. 含义 Cookie是服务器存储在浏览器中的一段文本信息,每次浏览器向服务器发送请求时,会携带这些信息。 实质是服务器的返回信息通过Set-Cookie的响应头,将服务器返回的Cookie信息存储到浏览器。 浏览器再发起同源请求时,自动将存储的Cookie通过请求头发送到服务器。 2. 特征 1
阅读全文
摘要:EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口。 这个接口有三个方法:addEventListener, removeEventListener, dispatchEvent。 一. EventTargetAPI 1. EventT
阅读全文
摘要:DOM事件发生后,会在当前节点和父节点之间传播(propagation)。 事件传播按照传播顺序分为三个阶段。对应Event.prototype.eventPhase的三个状态: 一. 事件传播阶段 1. 捕获阶段 事件按照window->document(window.document)->htm
阅读全文
摘要:一.setImmediate 目前只有IE10+和NodeJS支持该API。 立即触发回调函数,使其进入宏任务队列(macro task queue) 语法: 比setTimout(fn, 0)的执行顺序要快,性能也更高。 因为setTimeout(fn,0)实质上会有4ms的延迟。 二. Mess
阅读全文
摘要:1. 作用 MutationObserverAPI可以看作一个监听DOM所有变化(包含节点、属性、文本内容的变动)的接口。 和EventTargetAPI的addEventListener相比: 共同点: 两者的回调函数执行都是异步任务,都要在主执行栈之后执行; 不同点: 1. addEventLi
阅读全文
摘要:1. 当Promise对象作为resolve的参数时 2. 当Promise的resolve方法在另一个Promise对象的then方法中运行时,变异步; 示例: 3. 当使用catch()方法捕获异常时 4. 当有async函数时
阅读全文
摘要:一. 什么是遍历器 1. 遍历器对象(Iterator) 遍历器对象本质上是一个指针对象,该对象有一个next方法,调用next方法返回一个 含有value和done属性的对象{value: val/undefined, done: false/true}。 另外遍历器对象可以简单的通过Genera
阅读全文
摘要:1. 数组元素全部是原始类型 实用Set数据结构进行去重;因为Set数据结构本身要求值唯一。 而且该方法中+0/-0认为是同一个值;NaN等于自身,被去重。 示例: 而任何两个对象都不相同,因为储存地址不同。不能通过Set结构去重。 因为,数组、函数、正则表达式、Date对象等都是特殊形式的对象,所
阅读全文
摘要:一. 异步串行加载 要求图片依次加载(上一张加载完成,再加载下一张) const imgs = [url1, url2, url3,...]; 1. ES5--递归方法 2. ES6--Promise对象 3.ES6--async函数 二. 异步并行加载 要求图片并行加载,全部加载完成后,再插入DO
阅读全文
摘要:一.什么是async函数 1. 概念 async关键字将函数转为异步函数。 await关键字只能用于异步函数中。 async+await 等同于 generator+co await和yield不同在于,yield不返回任何值;await返回后面Promise对象的返回值或者返回后面的原始数据。 a
阅读全文
摘要:https://api.github.com/users/github 返回值中的某些URL也可以作为测试API使用
阅读全文
摘要:一.基础知识 Generator函数是ES6出现的一种异步操作实现方案。 异步即代码分两段,但是不是连续执行,第一段执行完后,去执行其他代码,等条件允许,再执行第二段。 同步即代码连续执行。 1. Generator函数是什么? Generator函数是一种遍历器生成函数;运行后返回一个遍历器对象。
阅读全文
摘要:一.Reflect对象基础 Reflect对象是ES6出现的新的API,用于操作对象内部的方法。 特点: 1. 对于操作有明确的返回结果。如返回布尔值表示操作成功与否 2. 和Proxy的拦截方法一一对应,实现操作的默认行为 3.将in,delete,new等命令,用方法实现 4.该对象的方法将逐渐
阅读全文