- 博客(34)
- 收藏
- 关注
RSS订阅原创 DOM树：JavaScript是如何影响DOM树构建的？
沿着网络数据流路径来介绍 DOM 树是怎么生成的。然后再基于 DOM 树的解析流程介绍两块内容：第一个是在解析过程中遇到 JavaScript 脚本，DOM 解析器是如何处理的？第二个是 DOM 解析器是如何处理跨站点资源的？什么是 DOM 从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。在渲染引擎中，DOM 有三个层面的作用。从页面的视角来看，DOM 是生成页面的基础数据结构。从 JavaScr
2020-12-12 16:57:52
287
1
原创 async/await：使用同步的方式去写异步代码
ES7 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。 从其最底层的技术点一步步往上讲解，从而彻底弄清楚 async 和 await 到底是怎么工作的。 首先介绍生成器（Generator）是如何工作的，接着讲解 Generator 的底层实现机制——协程（Coroutine）；又因为 async/await 使用了 Generator 和 Promise
2020-12-12 16:15:37
562
原创 Promise
在上一篇文章中我们聊到了微任务是如何工作的，并介绍了 MutationObserver 是如何利用微任务来权衡性能和效率的。今天我们就接着来聊聊微任务的另外一个应用 Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 Promise。可以这么说，Promise 已经成为现代前端的“水”和“电”，很是关键，所以深入学习 Promise 势在必行。 本文我们就来重点聊聊 JavaScript 引入 Promise 的
2020-12-12 15:48:50
141
1
原创 与事情循环相关的微任务与宏任务
随着浏览器的应用领域越来越广泛，消息队列中这种粗时间颗粒度的任务已经不能胜任部分领域的需求，所以又出现了一种新的技术——微任务。微任务可以在实时性和效率之间做一个有效的权衡。基于微任务的技术有 MutationObserver、Promise 以及以 Promise 为基础开发出来的很多其他的技术。宏任务 页面中的大部分任务都是在主线程上执行的，这些任务包括了：渲染事件（如解析 DOM、计算布局、绘制）；用户交互事件（如鼠标点击、滚动页面、放大缩小等）；JavaScript 脚本执行事件；
2020-12-12 15:30:20
137
原创 怎么实现XMLHttpRequest
消息队列和主线程循环机制保证了页面有条不紊地运行。 异步回调是指回调函数在主函数之外执行，一般有两种方式： 第一种是把异步函数做成一个任务，添加到信息队列尾部； 第二种是把异步函数添加到微任务队列中，这样就可以在当前任务的末尾处执行微任务了。XMLHttpRequest 运作机制 function GetWebData(URL){ /** * 1:新建XMLHttpRequest请求对象 */ let xhr = new XMLHtt
2020-12-11 22:04:13
2352
原创 如何实现setTimeout
setTimeout就是一个定时器，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器。 要执行一段异步任务，需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别，它们需要在指定的时间间隔内被调用，但消息队列中的任务是按照顺序执行的，所以为了保证回调函数能在指定时间内执行，你不能将定时器的回调函数直接添加到消息队列中。 在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列（定时器线程上的消息队列吧
2020-12-11 21:03:31
706
1
原创 线程通信（比如IO线程完成任务后通知渲染进程）
一个通用模式是使用消息队列。 IO 线程中产生的新任务添加进消息队列尾部； 渲染主线程会循环地从消息队列头部中读取任务，执行任务。 如果其他进程想要发送任务给页面主线程，那么先通过 IPC 把任务发送给渲染进程的 IO 线程，IO 线程再把任务发送给页面主线程。 消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。...
2020-12-11 20:04:54
154
原创 编译器和解释器：V8是如何执行一段JavaScript代码的？
要深入理解 V8 的工作原理，需要搞清楚一些概念和原理。编译器（Compiler）、解释器（Interpreter）、抽象语法树（AST）、字节码（Bytecode）、即时编译器（JIT）等概念，都是需要重点关注的。编译器和解释器按语言的执行流程，可以把语言划分为编译型语言和解释型语言。编译型语言在程序执行之前，需要经过编译器的编译过程，并且编译之后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译了。比如 C/C++、GO 等都是编译型语言。而由解释
2020-12-10 22:22:57
270
原创 JavaScript 的内存机制之垃圾回收机制
支持隐式类型转换的语言称为弱类型语言，不支持隐式类型转换的语言称为强类型语言。把使用之前就需要确认其变量数据类型的称为静态语言。把在运行过程中需要检查数据类型的语言称为动态语言。JavaScript 是一种弱类型的、动态的语言。弱类型，意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型，JavaScript 引擎在运行代码的时候自己会计算出来。动态，意味着你可以使用同一个变量保存不同类型的数据。在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是代码空间
2020-12-10 20:33:32
144
原创 从JavaScript执行上下文讲this
作用域链和 this 是两套不同的系统，它们之间基本没太多联系。 在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但是 JavaScript 的作用域机制并不支持这一点，基于这个需求，JavaScript 又搞出来另外一套 this 机制。 this 是和执行上下文绑定的。执行上下文主要分为三种——全局执行上下文、函数执行上下文和 eval 执行上下文，所以对应的 this 也只有这三种——全局执行上下文中的 this、函数中的 this 和 eval 中的 this。一
2020-11-28 17:11:44
127
原创 作用域链和闭包
其实在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为 outer。当一段代码使用了一个变量时，JavaScript 引擎首先会在“当前的执行上下文”中查找该变量，如果在当前的变量环境中没有查找到，那么 JavaScript 引擎会继续在 outer 所指向的执行上下文中查找。我们把这个查找的链条就称为作用域链。在 JavaScript 执行过程中，其作用域链是由词法作用域决定的 词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以
2020-11-28 16:57:46
62
原创 Javascript执行机制--执行上下文和作用域
变量创建分创建，初始化，赋值三个步骤。 故暂时性死区原理：在块作用域内，let声明的变量被提升，但变量只是创建被提升，初始化并没有被提升，在初始化之前使用变量，就会形成一个暂时性死区。 执行上下文包括 变量环境（含outer）、词法环境和this。函数内部不同声明的变量，在编译阶段会被存放到不同环境里面。Var声明的会放入变量环境中，let和const会放入词法环境中。查找变量时，优先在词法环境中搜索。执行上下文是唯一的，作用域链是不限的。编译并创建执行上下文的情况有以下三种：1、当 J
2020-11-28 16:17:25
97
原创 页面渲染流程（巨无霸详细）
由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。把这样的一个处理流程叫做渲染流水线。 按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。一、构建 DOM 树 浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。 输入内容：HTML 文件 处理过程：HTML 解析器解析 输出内容
2020-11-28 15:39:28
1107
原创 看完学到“输入URL到页面展示“更有逼格的回答
从输入URL到页面展示需要浏览器进程、渲染进程和网络进程之间的配合。 浏览器进程主要负责用户交互、子进程管理和文件储存等功能。 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，
2020-11-28 10:35:19
51
原创 浏览器有关知识总结--HTTP请求超具体流程
在浏览器中输入域名后会有怎样的HTTP请求流程呢?1、 构建请求 浏览器构建请求行信息（GET /index.html HTTP1.1），构建好后，浏览器准备发起网络请求。2、查找缓存 在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件。当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。这样做可以缓解服务器端压力，提升性能（获取资源的耗时更短了）。缓存是实现快速资源加载的重要组成部分。如果缓存
2020-11-28 10:11:27
2744
原创 浏览器有关知识总结--TCP协议（如何保证页面文件能被完整送达浏览器？）
在衡量 Web 页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。影响 FP 指标的一个重要因素是网络加载速度。要想优化 Web 页面的加载速度，你需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识，HTTP和 WebSocket都是基于 TCP/IP 的。 如何保证页面文件能被完整地送达浏览器呢？“数据包如何送达主机”“主机如何将数据包转交给应用”和“数据是如何被完整地送达应用程序”一、IP：把数据包送达目的主机
2020-11-28 09:33:59
259
原创 浏览器有关知识总结--浏览器的多进程架构
点击 Chrome 浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”，打开 Chrome 的任务管理器的窗口发现至少启动了 4 个进程。最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。而打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。渲染进程：核心任务是
2020-11-28 09:10:03
121
原创 新版红宝书第七章迭代器与生成器（个人学习笔记）
自定义迭代器class Counter { // Counter 的实例应该迭代 limit 次 constructor(limit) { this.limit = limit; } [Symbol.iterator]() { let count = 1, limit = this.limit; return { next() { if (this.count <= this.limit) { return { do
2020-10-31 15:59:31
254
原创 新版红宝书第六章集合引用类型（个人学习笔记）
数组在使用 Array 构造函数时，也可以省略 new 操作符。结果是一样的new Array(3) 、 Array(3) // 创建一个包含 3 个元素的数组Array 有两个 ES6 新增的用于创建数组的静态方法：from()和 of()。from()用于将类数组结构转换为数组实例，而 of()用于将一组参数转换为数组实例。Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值， Array.from( [1], x => x**2) // [2][1,
2020-10-31 10:10:53
127
原创 新版红宝书第五章基本引用类型（个人学习笔记）
5.1 Datenew Date() //Fri Oct 30 2020 15:14:29 GMT+0800 (中国标准时间)new Date().getTime() //1604042080981new Date().toDateString() //“Fri Oct 30 2020”new Date().toTimeString() //“15:24:19 GMT+0800 (中国标准时间)”new Date().toUTCString() //“Fri, 30 Oct 2020 07:24:
2020-10-30 21:34:51
168
原创 新版红宝书第三章语言基础（个人学习笔记）
3.1 语法1、ECMAScript 中一切都区分大小写（html不区分大小写）2、标识符命名规则//第一个字符必须是一个字母、下划线（_）或美元符号（$）；//驼峰大小写。第一个单词的首字母小写，后面每个单词的首字母大写，如myCar3、严格模式（“use strict”）3.3变量1、var，let，const//let是块作用域， var是函数作用域。//在 let 声明之前的执行瞬间被称为“暂时性死区”// 使用 let 在全局作用域中声明的变量不会成为 window 对象的属
2020-10-30 09:48:02
156
原创 SEO与html
1、title关键字有利于百度搜索2、meta name=“description” content=“网站描述”摘要内容会出现在搜索引擎的索引结果中3、h1强调性最强4、strong这个标签重要性仅次于h1标签5、img src=“xxx.jpg” alt=“图片说明”alt提示搜索引擎，将图片内容表述出来6、a href="/" title=“链接说明”在title里书写 关键词...
2020-10-30 08:33:41
91
原创 前端面试总结....
JS面试总结…1、let和var的区别：1.块级作用域。 2、不存在变量提升 3、不能有重复的声明 。2.闭包： 闭包是一个函数有权访问另一个函数的作用域。 闭包的特点： 函数嵌套函数 内部的函数可以引用外部函数的参数或者变量 参数和变量不会被垃圾回收机制回收，因为内部函数还在引用闭包的好处： 模块化代码（通过立即执行函数构建具有私有变量和私有函数的对象） for循环中的索引闭包的坏处： 内存泄露（比如DOM节点的事件引用的函数和函数里使用到DOM节点后的互相引用，引起内
2020-07-03 21:30:14
154
原创 js中的严格模式
严格模式严格模式可以在全局声明也可以在函数内声明1、不是用var声明变量，在严格模式下不被通过声明变量不加var、const、let会报错 var globalVal=100; console.log("globalVal",globalVal) function fun(){ "use strict" var localVal=100; // 不加var会报错 console.
2020-06-12 19:59:31
135
原创 正则表达式（上）
正则表达式什么是正则表达式呢？正则表达式是构成搜索模式的字符序列。可以用于匹配特殊字符或有特殊搭配的字符。像是打游戏输入文字时，有些文字不能用，就可以用正则表达式做的限制，可以起到文本校验的功能。正则表达式的创建方法第一种是 var reg = /abc/ ，直接在斜杆中间写规则。第二种是创建RegExp实例，var reg = new RegExp（“abc”）。以上两种方法的reg是相等的。那么正则表达式如何使用呢？首先介绍一个正则表达式的test方法。（注意：是正则表达式调用的方法）va
2020-06-10 11:34:24
219
原创 错误监控
前端错误的分类可分为两大类：即时运行错误：代码错误资源加载错误错误的捕获方式：即时运行错误的捕获方式try…catchwindow.onerror资源加载错误的捕获方式object.onerrorperformance.getEntries()可以通过document.getElementsByTagName得到需要加载的资源,再用performance.getEntries().forEach(item=>{console.log(item.name)})得到加载成
2020-06-07 10:46:19
877
原创 页面性能
页面性能题目:提升页面性能的方法有哪些?1、资源压缩合并,减少HTTP请求2、非核心代码异步加载—>异步加载的方式—>异步加载的区别3、利用浏览器缓存—>缓存的分类—>缓存的原理4、使用CDN5、预解析DNS异步加载1、异步加载的方式1)动态脚本加载2) defer3) async2、异步加载的区别defer是在HTML 解析完之后才会执行，如果是多个，按照加载的顺序依次执行async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关浏览
2020-06-07 10:27:29
255
原创 JS运行机制
JS运行机制特点（单线程和非阻塞）JS单线程：在同一时间JS只能做一件事。为什么是单线程？如果多线程，同时操作一个DOM会出问题。非阻塞：Event Loop（事件循环）任务队列：同步任务队列要优先于异步任务队列处理。异步任务被分为宏任务和微任务。常见的异步任务分类如下：宏任务：定时器系列，DOM事件（UI交互事件）微任务：process.nextTick，Promise.then同一次事件循环中，微任务永远在宏任务之前执行。执行栈：在调用方法的时候会自动生成生成一个相应的执行环境，也被称作
2020-06-05 22:48:09
127
原创 渲染机制类
渲染机制类1.什么是DOCTYPE及作用 文档类型定义（DTD）是一系列的语法规则，用来定义文件类型。浏览器会用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式 DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途就是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出差错。HTML 5<!DOCTYPE html>HTML 4.01 Strict 该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素（比如font）<!DOCTY
2020-06-05 21:38:49
148
原创 类的声明与继承
类的声明与继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类</title></head><body> <script
2020-06-05 16:39:35
360
原创 原型链部分相关知识
原型链部分相关知识创建对象的三种方法：1.字面量创建：var obj1 = {name:‘obj1’} 效果等同于 var obj1 = new Object（{name:‘0bj1’}）2.构造函数创建：var M = function(){this.name=‘obj2’} var obj2 = new M()3.Object.creta方法创建: var P={name:‘obj3’} var obj3 = Object.create( P ) 将P实例放在obj3的__proto__上
2020-06-05 15:21:33
131
原创 盒模型
盒模型CSS盒模型分为标准模型和IE模型标准模型：width = 内容content 的宽度；(默认） 设置方式： box-sizing:content-box; IE模型：width = 内容content + 边框border + 内边距paddig 的宽度； 设置方式： box-sizing:border-box;js如何获取盒模型的宽高 1.dom.style.width/height 只能获取到dom的内联样式
2020-06-05 11:16:19
107
原创 HTTP协议
HTTP协议：主要特点：简单快速（资源可以直接用url来访问）、灵活（头部分有不同的数据类型传输）、无连接（连接一次后就会断掉）、无状态（服务端无法确认访问客户端信息）1、http报文分为请求报文和相应报文请求报文：请求行（请求方法，http协议，页面地址url以及版本）、请求头（key-value值）、空行（提示下一个为请求体）、请求体相应报文：状态行（http协议、版本及状态码）、响应头、空行、响应体（html文档之类的资源）2、http方法get：获取资源post：传输资源put：更新
2020-06-05 10:48:45
212
原创 三栏布局
三栏布局五种三栏布局五种三栏布局左右高度固定，中间自适应浮动时文本还能看到并环绕浮动元素，浮动的目的是在最初时用于图像（某些浏览器还支持表的浮动），为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。浮动时div顺序原理：div1设置了左浮动，不占用文本流的空间。div3设置右浮动，不占用文本流的空间。div2没有设置浮动，因为已经布置了div1和div3，目前div2是第一个占用文本流空间的，所以div2又可以霸占第一行了，常理，假如div2足够宽的话，左部分还是会被浮动的d
2020-06-04 21:26:27
153
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人