TwInkle

什么是shadow dom？有什么特点？有什么用？为什么需要 shadow-dom?怎么创建shadow dom？如何修改shadow dom的样式? shadow-dom 的未来

npm run xx的时候发生了什么，npm在运行命令时所起的作用

项目中多版本npm包共存问题

管理多个有优先级的Modal

const insertAtCursor =(myField, myValue) => {// myField：输入框元素, myValue: 要插入的值 if (document.selection) { // IE support myField.focus() const sel = document.selection.createRange() sel.text = myValue sel.select() } e

1、mobile端上拉加载不流畅，出现回弹且滑动不流畅卡顿的情况。问题原因：下拉将请求的数据追加到数组的后面，由于数据加载是异步的，在生成内容的时候Better-scroll会去自动计算一个高度，但是计算的时候可能还未加载完成数据，就会造成自动计算的高度与实际内容的高度不匹配的情况，就会出现无法滚动的问题。解决办法：在要展示的数据追加完成后，执行better-scroll实例的刷新方法refresh()；// this.scroll = new BScroll(this.$refs.wrapper,

HTTP——浏览器和服务器之间的通信语言【HTTP/0.9】目的：用来传输体积很小的HTML文件。特点：只有请求行，没有请求头和请求体；没有返回头信息，只返回了数据；返回的文件内容是以ASCII字符流来传输的；【HTTP/1.0】核心诉求：支持多种类型文件的下载。引入请求头（期望返回的文件类型、采用什么类型压缩、提供什么语言的文件、文件的具体编码）和响应头（压缩类型、返回文件类型）为了减轻服务器的压力，HTTP1.0中提供了cache机制，用来缓存已经下载过的数据。服务器需要统计客户端

垃圾数据：一些被使用之后就不需要的数据。垃圾数据回收分为手动回收（C/C++,何时分配内存、何时销毁内存都是由代码控制的）和自动回收。【栈垃圾回收】当函数执行结束，JS引擎通过向下移动ESP指针（记录调用栈当前执行状态的指针），来销毁该函数保存在栈中的执行上下文（变量环境、词法环境、this、outer）。【堆垃圾回收】一、代际假说第一个是大部分对象在内存中存在的时间很短，简单来说，就是很多对象一经分配内存，很快就变得不可访问；第二个是不死的对象，会活得更久。二、分类V8 中会把堆分为

【JS是什么类型的语言】我们把在使用之前就需要确定其变量数据类型的称为静态语言。相反，我们把在运行过程中需要检查数据类型的语言称为动态语言。JS就是动态语言，因为声明变量之前不需要确定其数据类型。在赋值过程中，会存在数据类型转换的情况，我们把这种转换的操作称为隐式类型转换。而支持隐式类型转换的称为弱类型语言，不支持隐式类型转换的称为强类型语言。在这点上，C和JS都是弱类型语言。因此，JavaScript是一种弱类型的、动态的语言。弱类型，意味着你不需要告诉 JavaScript 引擎这个或那个变量

【new一个对象的过程发生了什么】function CreateObj(){ this.name = "极客时间"}var myObj = new CreateObj()在这段代码中，我们使用 new 创建了对象 myObj，那你知道此时的构造函数 CreateObj 中的 this 到底指向了谁吗？其实，当执行 new CreateObj() 的时候，JavaScript 引擎做了如下四件事：首先创建了一个空对象 tempObj；接着调用 CreateObj.call 方法，并将 t

先看一段代码：function bar() { console.log(myName)}function foo() { var myName = "极客邦" bar()}var myName = "极客时间"foo()当这段代码执行到bar函数内部时，其调用栈的示意图如下所示。所以在执行到bar函数内部的时候，在bar函数的执行上下文中没有找到myName变量，不会说是顺着调用栈往下找myName变量，输出foo函数执行上下文中的myName的值"极客邦’，而是

正是由于 JavaScript 存在变量提升这种特性，从而导致了很多与直觉不符的代码，这也是 JavaScript 的一个重要设计缺陷。“探病因”——分析为什么在 JavaScript 中会存在变量提升，以及变量提升所带来的问题；“开药方”——介绍如何通过块级作用域并配合 let 和 const 关键字来修复这种缺陷在 ES6 之前，JS支持的作用域只有两种：全局作用域和函数作用域。相较而言，其他语言则都普遍支持块级作用域（代码块内部定义的变量在代码块外部是访问不到的，并且等该代码块中的代码执行完成之

JS代码执行之前就进行编译并创建执行上下文，有以下几种情况：当 执行全局 JavaScript代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。当使用 eval 函数的时候，eval 的代码也会被编译，并创建执行上下文。在写JS代码的时候，有可能会遇到栈溢出的错误：出现这种错误是因为调用栈溢出，在执行JS代码的时候会

JS的执行机制：先编译，再执行。JS变量提升：指在JS代码的编译阶段，JS引擎会把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后会给变量设置默认值undefined。编译完成后，再去执行代码。【编译阶段】从上图可以看出，输入一段代码，经过编译后，会生成两部分内容：执行上下文和可执行代码。执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。在执行上下文中存

【路由跳转 query传参】this.$router.push({ path: '/home', query: { id: '111' }})【query传参 ，获取参数】const id = this.$route.query.id【路由跳转 params传参】this.$router.push({ name: 'home', params: { id: '111' }})【params传参 ，获取参数】const id = this.$ro

从图中可以看出，左边输入的是 HTML、CSS、JavaScript 数据，这些数据经过中间渲染模块的处理，最终输出为屏幕上的像素。这中间的渲染模块就是我们要讨论的主题。渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线。每个子阶段都有输入内容、处理过程、输出内容。1、⭐️构建DOM树因为浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。要让DOM节点拥有正确的样式.

从输入url到页面展示的完整流程示意图：从上图可以看出，这个过程可以大致描述为如下：首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。然后，在网络进程中发起真正的 URL请求。接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。浏览器进程接收到网络进程的响应头数据之后，发送“提交导航(CommitNavigation)”消息到渲染进程；渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML数据，接收数据的方式是直接和网络

vue3对vdom进行了重写，使vue3突破了vdom的性能瓶颈，更快！推荐：vue3官方演示vdom的示例网站（https://vue-next-template-explorer.netlify.app）Vue3如何重写vdom⭐️入门当我们创建一个这样的静态 dom 元素的时候：vue3生成的vdom是这样的实际上 _createBlock 函数中才是我们创建的 dom，这是vdom最基础的形式，从这并不会感觉到vue2和vue3有什么不同。⭐️patch flag 优化静态树

TCP协议：如何保证页面文件能被完整送达浏览器？在衡量 Web 页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率，更快的页面响应意味着更多的 PV、更高的参与度，以及更高的转化率。要想优化 Web 页面的加载速度，你需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识，不管你是使用 HTTP，还是使用 WebSocket，它们都是基于 TCP/IP 的。因此，在这篇文章中，会重点介绍在 Web 世界中的

李兵老师的浏览器的工作原理与实践，安排～第一次学习这门课，总结下重点，过段时间回过头来看可能会有不一样的思考，就像看自己以前写的代码一样……chrome架构：仅仅打开了1个页面，为什么会有四个进程？⭐️ 进程VS线程多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程启动和管理的。那什么又是进程呢？一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。从图中可以看