qq_44014425的博客

从输入URL到看到页面“CRP关键节点的性能优化【HTTP网络层面】浏览器一共进行七个步骤：URL解析缓存检查DNS解析TCP的三次握手HTTP传输TCP的四次挥手渲染页面URL解析传输协议：HTTP / HTTPS(SSL) / FTP(文件上传）…域名：顶级、一级、二级…端口号：0~65535 区分同一台服务器上的不同服务 [默认端口号：HTTP: 80 HTTPS: 443 FTP: 21] 默认端口号是浏览器处理的问号参数：可以把一些信息传递给服务器“get系列”；

// 自定义可以用于数组和对象上门的each方法const each = function each(obj, callback) { if (obj == null || typeof obj !== "object") throw new TypeError("obj must be an array/like-array/object"); if (typeof callback !== "function") callback = function () { }; if (Arra

实现一个轮播图

CRP：关键渲染路径(critical rendering path)围绕渲染的机制和步骤，去详细的进行每一步优化，以此来提高页面的渲染速度和运行性能从服务器基于HTTP网络请求回来的数据是一串16进制的文件流浏览器把它解析为字符串（HTML字符串）按照W3C规则识别为成为一个个的HTML节点[词法解析]生成xxx树（CSS叫CSSOM树，HTML叫DOM树）在浏览器中输入一个网址：首先请求回来的是一个HTML文档，浏览器开始自上而下解析和识别代码（渲染）接下来渲染页面，此过

什么是AJAX?ajax全名：async javascript and xmlajax核心作用：实现了数据请求 + 客户端渲染的局部刷新AJAX核心：基于XMLHttpRequest创建HTTP请求操作步骤：创建xhr实例：let xhr = new XMLHttpRequest;打开一个URL地址（发送请求前的一些配置信息）—— open方法和它常见的一些参数method主要两个请求方式：GET和POST(get/delete/head/options/post/put/patc

标题

async和await其实是Promise和Ganerator函数的语法糖用async关键字修饰一个函数，会使这个函数内部可以使用await关键字await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用如果await后面跟着的不是一个Promise对象，会自动将其变为Promise对象执行遇到await关键字，会立即执行跟在await后面的代码，然后将await下方的代码变成一个微任务，加入到webAPI中进行监听，等待状态改变后加入到Event

Generator生成器函数

Iterator迭代器接口迭代器（Iterator）是一种机制（接口）：为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作（for…of）循环，依次处理该数据结构的所有成员。底层机制：迭代器接口是定义在Symbol.iterator属性上的一个方法迭代器接口拥有一个next方法用于依次遍历数据结构的成员每一次便利返回的结果是一个对象{ value: xxx, done: false }done：记录是否完成遍历。未完成，值为false；完成

PromisePromise也叫期约，是一种设计模式：承诺模式Promise在JS中是一个对象，用于表示一个异步操作的最终完成 (或失败)及其结果值。创建一个Promise对象：let p = new Promise([executor]);executor：可执行函数new Promise时必须传入这个函数，在Promise内部会立即把 [executor] 函数执行函数中一般用来管理一个异步编程代码（不管控异步编程也是可以的）Promise本身是同步执行的，立即将 [execu

进程： 一个程序（浏览器打开一个页面就是开辟一个进程）线程： 程序中具体做事情的一个进程中会包含一个或多个线程浏览器是多线程的包括：GUI渲染线程：用于渲染页面JS引擎线程：用于渲染和解析JS事件触发线程：监听DOM事件触发定时器触发线程：监听定时器是否到时间异步HTTP请求线程：从服务器端获取资源/数据的WebWorker……利用多线程是可以实现“异步编程”的：同时做多件事情“同步编程”：单线程，一次只能处理一件事情，这件事情完成，才能继续处理后面的事情JS是单线程的JS

以下函数封装参照jQuery源码首先，将一些原生函数用自己的变量定义let getProto = Object.getPrototypeOf, // 获取Object.getPrototypeOf方法 class2type = {}, //创建一个空对象 toString = class2type.toString, //获取Object.prototype.toString方法 hasOwn = class2type.hasOwnPrototype,//获取Object.hasOwnProto

typeof [value]：检测的结果是一个字符串，字符串中包含了对应的数据类型缺点：typeof null => “object”typeof不能细分对象（除函数）优点：typeof检测速度快，性能好底层原理：所有数据类型值，在计算机底层都是按照“64位，2进制”来存储的，所有对象数据类型值，前三位都是“0”，而存储null的二进制代码全是0typeof就是按照二进制值来进行检测的（性能好），例如：它认为前三位是0的就是对象，在这基础上再看对象是否实现了call方法，如..

This的五种使用情况事件绑定– 给当前元素的某个事件行为绑定方法，当事件行为触发，方法执行，此时方法中的this是当前操作的元素本身普通方法执行– 方法执行前看前面是否有“点”，如果有，那么“点”前面是谁，this就指向谁，如果没有，this就指向window/undefined自执行函数中的this一般指向window/undefined回调函数：一般都是window/undefined，除非在执行回调函数（方法内部）做了特殊处理括号表达式中：取出来括号表达式中最后一项执行，this指

鸭式辩型长得像鸭子，并且能够呱呱叫的就是鸭子类数组「还有类Promise…」结构很像数组，但是不是Array的实例，所以无法直接调用Array.prototype上的方法，而我们期望他可以使用这些方法的，这样就需要函数借用函数借用//这是一个类数组对象let obj = { 2: 3, //1 3: 4, //2 length: 2, //4 push: Array.prototype.push //将数组的方法借用给对象};obj.push(1);//

new操作符的作用创建一个构造函数的实例对象把构造函数当作普通函数执行，让方法中的this指向创造实例对象观察方法执行的返回结果：如果没有写返回值，或者返回的是原始类型的值，都以返回的实例对象为主；如果返回的是一个对象/函数，则以自己的返回为主自己实现new操作符function _new(Ctor, ...params) { //格式校验：能被NEW的，首先是个函数，其次需要有prototype属性，而且还不能是Symbol/BigInt构造函数... let obj, result

检测对象的私有属性Object.prototype对象中实现的hasOwnPrototype方法用法：f.hasOwnPrototype(‘x’)检测x是否为f的私有属性检测对象的属性in操作符用法：‘x’ in f检测x是否为f的属性检测对象的共有属性（自己实现）思路：检测当前属性是否出现在当前对象的原型链上对象属性的私有和公有是相对而言的，对子类是公有的属性可能对父类是私有属性Object.prototype.hasPubPrototype = function has

基于内置类原型扩展方法

ES5创建构造函数function Model(x, y) { //构造函数体，给Model的实例添加私有属性方法 this.x = x; this.y = y;}//在构造函数的原型链上给实例添加公有方法Model.prototype.z = 10;Model.prototype.getX = function() { console.log(this.x);}//给Model类添加私有属性Model.n = 200;Model.setNumber = function(

Prototype属性大部分“函数数据类型”的值都具备“prototype（原型/显式原型）”属性，属性值本身是一个对象「浏览器会默认为其开辟一个堆内存，用来存储实例可调用的公共的属性和方法」函数数据类型普通函数（实名或者匿名函数）箭头函数构造函数/类「内置类/自定义类」生成器函数 Generator…不具备prototype属性的函数箭头函数基于ES6给对象某个成员赋值函数值的快捷操作（函数的增强写法）在浏览器默认开辟的这个堆内存中「原型对象」有一个默认的属性“c

一、JS中的内置类JS中常见的内置类每一种数据类型都有自己所属的内置类Number、String、Boolean、Symbol、BigIntObject、Function、Array、Date、RegExp、Error(ReferenceError/TypeError/RangeError/SyntaxError)…每一个元素对象也有自己所属的内置类其余的内置类XMLHttpRequest、Promsie、Proxy…自定义类「类->构造函数」ES5中：创建一个函数，执行函数的时

防抖函数函数防抖{debounce}:在用户频繁触发某个行为的时候，我们只识别一次触发频繁触发条件是我们自己可以设定的，例如：我们设置的是500MS，这样只要用户在这段时间内操作两次及以上，就属于频发触发；但是如果是500MS之前触发一次，之后触发一次，这不算频繁触发…我们可以控制是在开始触发还是结束触发//公共类const clearTimer = function clearTimer(timer) { if (timer) { clearTimeout(timer

惰性载入函数因为浏览之间行为的差异，多数JavaScript代码包含了大量的if语句，将执行引导到正确的代码中。如果if语句不必每次执行，那么代码可以运行地更快一些。解决方案就称之为惰性载入函数。以在不同的浏览器中获取元素的样式为例：// 每一次执行getCss方法，都需要验证当前浏览器是否兼容getComputedStylefunction getCss(element, attr) { if (typeof getComputedStyle !== 'undefined') {

函数柯里化思想预先存储(预处理)，利用闭包的“保存机制”，我们把一些值事先存储起来，供其下级上下文中后期使用例：（百度的一道面试题）实现函数，让其具有如下功能let res = fn(1,2)(3);console.log(res); //=>6 1+2+3答：const fn = (...params) => { return (...args) => { params = params.concat(args); return

单例设计模式：这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。其实就是创建一个对象。每一个对象都是Object的单独实例，基于每一个实例对象来管理自己的属性和方法，实现分组的效果作用：利用对象「单独堆内存」来进行分组管理，避免全局变量污染let AModule = (function () { let n = 10

匿名函数的应用场景箭头函数（无法设置名字）const fn = () => {};函数表达式const fn = function () {};document.onclick = function () {};function fn() { return function () {};}回调函数setTimeout(function () {}, 1000);fn(function () {});自执行函数(function(){})();

ES6函数默认值产生两个私有上下文（阿里面试题）只要函数中有ES6形参赋值默认值（无论是否生效）函数体中出现基于let/const/var声明变量的操作（没有function），无论声明的是啥变量只要这两个条件同时成立，则函数执行会产生两个上下文函数私有上下文——形参赋值完即结束会把函数体当作一个块级上下文，并且上级上下文就是函数私有上下文（上面那个形参赋值）并且如果块级中的某个变量和函数私有上下文中的形参是一个名字，则默认会把函数私有上下文中形参的值，同步给块中这个上下文一份var

关于JS中THIS的基本情况分析THIS：函数执行的主体（谁执行的函数）事件绑定函数执行（普通函数执行、成员访问、匿名函数、回调函数……）构造函数箭头函数（生成器函数）基于call/apply/bind强制修改this指向一、全局和块级上下文中的this全局上下文中的this：window块级上下文中没有自己的this，所用的this都是继承上级上下文中的this（箭头函数也是）二、事件绑定DOM0级事件绑定：xxx.onxxx = function(){}DOM2：xxx

JS中声明变量的方法var & function——ES5let & const & class & import——ES6let与constlet和const声明的都是变量，都是要存储到当前上下文的VO/GO变量对象中的变量：名字，用来存储值得常量：值let声明得变量，后续根据需求，可以改变“变量”和“值”之间得指针指向， const不允许改变“变量”的指针指向const声明的变量必须要有初始值let与varvar存在变量提升，而let不存

浏览器垃圾回收机制前端性能优化方案：内存优化浏览器垃圾回收机制「GC」标记清除（chrome）引用计数（IE）全局上下文：打开页面，执行全局代码就会形成；只有当页面关闭的时候才会释放；私有上下文：一般函数(代码块)中的代码执行完，浏览器会自动把私有上下文出栈释放；但是如果，当前上下文中，某个和它关联的内容（一般指的是一个堆内存）被当前上下文以外的事物占用了，那么这个私有上下文不能出栈释放；这样私有上下文中的“私有变量/值”也被保存起来了!手动解除引用：变量 = nu

JS代码执行的预处理机制：变量提升在“当前上下文中”，代码执行之前，浏览器首先会把所有带var/function关键字的变量进行提前声明或者定义：带var的只是提前声明，带function的，此阶段声明+定义（赋值）都完成了。let/const/import/class声明的变量不存在变量提升重复声明的问题推荐使用函数表达式，确保函数执行只能放在“创建函数”的下面，保证逻辑严谨性条件判断：在当前上下文中，变量提升阶段，不论条件是否成立，都要进行变量提升var：还是只声明function：判

JS中的堆(Heap)栈(Stack)内存一、都是在计算机内存中开辟的空间栈内存Stack：ECStack(Execution Context Stack)存储原始值类型值代码执行的环境堆内存：Heap存储对象类型值二、EC(Execution Context)执行上下文：区分代码执行的环境常见上下文分类：全局上下文EC(G)函数私有上下文EC(?)块级私有上下文EC(Block)函数执行过程：产生私有上下文 -> 进栈执行 -> 出栈释放（可能释

把其他数据类型转换为String转换规则：直接拿双引号、单引号将数据包起来Object.prototype.toString()出现情况：String([val]) 或者 [val].toString()“+”除数学运算，还可能代表的字符串拼接有两边，一边是字符串有两边，一边是对象只出现在左边当我们把对象隐式转换为数字或者字符串的时候「使用的方法:Number/String」，会有一套自己的处理逻辑：检测Symbol.toPrimitive，如果有这个方法，浏览器会把

Number([val])的转换规则作用：将一个非数值类型的变量转换为数值类型。一般用于浏览器的隐式转换中数学运算：例：console.log(10 - “5”) //5isNaN检测：例：let a = 10; isNaN(a); //true”==“比较规则：字符串转换为数字： 空字符串转换为0，如果出现任何非有效数字字符，结果都是NaN把布尔值转换为数字：true -> 1, false -> 0null -> 0, undefined -> NaN