- 博客(142)
- 收藏
- 关注
RSS订阅原创 webpack打包速度和体积优化总结
（1）使用 （2）作用：（1）使用:构建完成后会在 8888 端口展示大小（2）作用 （1）使用 webpack4：优化原因： （1）资源并行解析可选方案 （2） 使用 HappyPack 解析资源 1、原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 2、使用 （2）使用 thread-loader 解析资源 1、原理：每次 webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 （3
2022-07-09 16:41:08
2055
原创 webpack--插件
1、插件没有像 loader 那样的独立运行环境（loader-runner）2、只能在 webpack 里面运行三、插件使用四、开发一个最简单的插件1、src/demo-plugin.js 2、加入到 webpack 配置中五、插件中如何获取传递的参数通过插件的构造函数进行获取 六、插件的错误处理（1）参数校验阶段可以直接 throw 的方式抛出 （2）通过 compilation 对象的 warnings 和 errors 接收 七、插件扩展：
2022-07-07 17:29:31
313
原创 webpack打包原理--webapck-cli及Tapable
（1）作用（2） 命令行工具包 yargs （3）webpack-cli 使用 args 分析参数分组 (config/config-args.js)，将命令划分为9类：（4） webpack-cli 执行的结果1、webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options2、最终会根据配置参数实例化 webpack 对象，然后执行构建流程 （1）意义Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着
2022-07-01 17:09:08
187
原创 webapck打包原理--启动过程分析
（1）npm script（2）webpack直接执行二、查找Webpack入口文件（1）在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目目录查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不存在，就抛出错误。（2）实际的入口文件是：node_modules\webpack\bin\webpack.js 四、启动后的结果webpack 最终找到 webpack-cli (webpack-command)
2022-06-25 15:17:11
220
原创 浏览器原理--浏览上下文组：如何计算Chrome中渲染进程的个数？
（1）在默认情况下，如果打开一个标签页，那么浏览器会默认为其创建一个渲染进程。（2）如果从一个标签页中打开了另一个新标签页，当新标签页和当前标签页属于同一站点(相同协议、相同根域名)的话，那么新标签页会复用当前标签页的渲染进程。 （1）通过标签点击该链接会打开新的b标签页，新标签页中的 window.opener 的值就是指向a标签页中的 window，这样就可以在新的b标签页中通过 opener 来操作a标签页了。这样我们可以说，这两个标签页是有连接的。（2）通过 JavaScript 中的 ...
2022-06-08 15:46:30
138
原创 浏览器原理--HTTPS：让数据传输更安全
（1）起初设计 HTTP 协议的目的很单纯，就是为了传输超文本文件，那时候也没有太强的加密传输的数据需求，所以 HTTP 一直保持着明文传输数据的特征。（2）但这样的话，在传输过程中的每一个环节，数据都有可能被窃取或者篡改，这也意味着你和服务器之间还可能有个中间人，你们在通信过程中的一切内容都在中间人的掌握中：（1）从 HTTP 协议栈层面来看，我们可以在 TCP 和 HTTP 之间插入一个安全层，所有经过安全层的数据都会被加密或者解密。（2）安全层有两个主要的职责：对发起 HTTP 请求的数据进行加密操作
2022-06-08 12:00:57
603
原创 浏览器原理--安全沙箱：页面和系统之间的隔离墙
（1）从稳定性视角来看，单进程架构的浏览器是不稳定的，因为只要浏览器进程中的任意一个功能出现异常都有可能影响到整个浏览器，如页面卡死、浏览器崩溃等。（2）浏览器本身的漏洞是单进程浏览器的一个主要问题，如果浏览器被曝出存在漏洞，那么在这些漏洞没有被及时修复的情况下，黑客就有可能通过恶意的页面向浏览器中注入恶意程序，其中最常见的攻击方式是利用缓冲区溢出。（3）这种类型的攻击和 XSS 注入的脚本是不一样的。（1）浏览器内核和渲染进程1、浏览器被划分为浏览器内核和渲染内核两个核心模块，其中浏览器内核是由网络进程、
2022-06-07 18:03:54
441
原创 浏览器原理--跨站脚本攻击（XSS）、CSRF攻击
（1） XSS 全称是 Cross Site Scripting，为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。（2）恶意脚本都能做哪些事情（3）恶意脚本是怎么注入的1、在一个反射型 XSS 攻击过程中，恶意 JavaScript 脚本属于用户发送给网站请求中的一部分，随后网站又把恶意 JavaScript 脚本返回给用户。当恶意 JavaScript
2022-06-07 17:38:54
1275
原创 浏览器原理--同源策略：为什么XMLHttpRequest不能跨域请求资源
（1） 如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。（2）浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。（3）源策略主要表现在 DOM、Web 数据和网络这三个层面。（1） 页面中可以嵌入第三方资源1、暴露了很多诸如 XSS 的安全问题，为了解决 XSS 攻击，浏览器中引入了内容安全策略，称为 CSP。2、CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码。通过这些手段就可以大大减少 XSS
2022-06-07 16:14:04
278
原创 浏览器原理--HTTP/3：甩掉TCP、TLS 的包袱，构建高效网络
（1）正常情况下的 TCP 传输数据过程：从一端发送给另外一端的数据会被拆分为一个个按照顺序排列的数据包，这些数据包通过网络传输到了接收端，接收端再按照顺序将这些数据包组合成原始数据，这样就完成了数据传输。（3）如果在数据传输的过程中，有一个数据因为网络故障或者其他原因而丢包了，那么整个 TCP 的连接就会处于暂停状态，需要等待丢失的数据包被重新传输过来。（丢包状态） 在 TCP 传输过程中，由于单个数据包的丢失而造成的阻塞称为 TCP 上的队头阻塞（4）TCP队头阻塞是怎么影响 HTTP/2 传输？1、H
2022-06-07 10:34:17
186
原创 浏览器原理--HTTP/2：如何提升网络速度？
（1）为网络效率做了大量的优化，最核心的有如下三种方式（2）HTTP/1.1 的资源下载方式（2）存在问题：HTTP/1.1对带宽的利用率却并不理想1、带宽是指每秒最大能发送或者接收的字节数。我们把每秒能发送的最大字节数称为上行带宽，每秒能够接收的最大字节数称为下行带宽。2、之所以说 HTTP/1.1 对带宽的利用率不理想，是因为 HTTP/1.1 很难将带宽用满。比如我们常说的 100M 带宽，实际的下载速度能达到 12.5M/S，而采用 HTTP/1.1 时，也许在加载页面资源时最大只能使用到 2.5M
2022-06-06 17:04:57
518
1
原创 浏览器工作原理--HTTP/1：HTTP性能优化
HTTP 是浏览器中最重要且使用最多的协议，是浏览器和服务器之间的通信语言，也是互联网的基石。（1）HTTP/0.9 是于 1991 年提出的，主要用于学术交流，需求很简单——用来在网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议。（2）HTTP/0.9 的一个完整的请求流程（3）特点 （1）支持多种类型的文件下载是 HTTP/1.0 的一个核心诉求，而且文件格式不仅仅局限于 ASCII 编码，还有很多其他类型编码的文件。（2）为了让客户端和服务器能更深入地交流，HTTP/1.0 引入了请求头
2022-06-06 14:35:40
346
原创 浏览器工作原理--页面性能：如何系统地优化页面？
（1）加载阶段的渲染流水线1、 并非所有的资源都会阻塞页面的首次绘制，比如图片、音频、视频等文件就不会阻塞页面的首次渲染。2、而 JavaScript、首次请求的 HTML 资源文件、CSS 文件是会阻塞首次渲染的，因为在构建 DOM 的过程中需要 HTML 和 JavaScript 文件，在构造渲染树的过程中需要用到 CSS 文件。（2）我们把这些能阻塞网页首次渲染的资源称为关键资源，基于关键资源，我们可以继续细化出来三个影响页面首次渲染的核心因素。 （3）优化方案：总的优化原则就是减少关键资源个数，降低
2022-06-06 11:10:37
145
原创 浏览器工作原理--分层和合成机制：为什么CSS动画比JavaScript高效？
每个显示器都有固定的刷新频率，通常是 60HZ，也就是每秒更新 60 张图片，更新的图片都来自于显卡中一个叫前缓冲区的地方，显示器所做的任务很简单，就是每秒固定读取 60 次前缓冲区中的图像，并将读取的图像显示到显示器上。（1）显卡显卡的职责就是合成新的图像，并将图像保存到后缓冲区中，一旦显卡把合成的图像写到后缓冲区，系统就会让后缓冲区和前缓冲区互换，这样就能保证显示器能读取到最新显卡合成的图像。通常情况下，显卡的更新频率和显示器的刷新频率是一致的。但有时候，在一些复杂的场景中，显卡处理一张图片的速度会变慢
2022-06-06 10:39:06
148
原创 浏览器工作原理：DOM树：JavaScript是如何影响DOM树构建的？
一、DOM在渲染引擎中，DOM 有三个层面的作用从页面的视角来看，DOM 是生成页面的基础数据结构。 从 JavaScript 脚本视角来看，DOM 提供给 JavaScript 脚本操作的接口，通过这套接口，JavaScript 可以对 DOM 结构进行访问，从而改变文档的结构、样式和内容。 从安全视角来看，DOM 是一道安全防护线，一些不安全的内容在 DOM 解析阶段就被拒之门外了。简言之，DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连
2022-05-26 17:16:04
181
原创 浏览器工作原理--浏览器中的页面循环系统
一、概述渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还要处理布局，同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行，这就需要一个系统来统筹调度这些任务，这个统筹调度系统就是我们今天要讲的消息队列和事件循环系统。二、消息队列消息队列是一种数据结构，可以存放要执行的任务。它符合队列“先进先出”的特点，也就是说要添加任务的话，添加到队列的尾部；要取出任务的话，从队列头部去取。三、...
2022-05-23 17:49:36
281
原创 浏览器工作原理--编译器和解释器：V8是如何执行一段Javascript代码的？
一、编译器和解释器（1）语言编译型语言：在程序执行之前，需要经过编译器的编译过程，并且编译之后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译了。比如 C/C++、GO 等都是编译型语言。解释型语言：编写的程序，在每次运行时都需要通过解释器对程序进行动态解释和执行。比如 Python、JavaScript 等都属于解释型语言。（2）编译器和解释器“翻译”代码之所以存在编译器和解释器，是因为机器不能直接理解我们所写的代码，所以在执行
2022-05-21 15:11:04
187
原创 浏览器工作原理--垃圾数据是如何自动回收的
一、栈垃圾回收当函数执行结束，JS引擎通过向下移动ESP指针（记录调用栈当前执行状态的指针），来销毁该函数保存在栈中的执行上下文（变量环境、词法环境、this、outer）。二、堆垃圾回收 代际假说 1、大部分对象存活时间很短2、不被销毁的对象，会活的更久 分类 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。 新生代 （1）算法：Scavenge 算法（2）原理1、把新生代空间对半划分为两个区域，
2022-05-21 11:22:14
263
1
原创 浏览器工作原理--栈空间和堆空间
一、Javascript（1）在使用之前就需要确认其变量数据类型的称为静态语言，运行过程中需要检查数据类型的语言称为动态语言。（2）支持隐式类型转换的语言称为弱类型语言，不支持隐式类型转换的语言称为强类型语言。（3）语言类型（4）JavaScript 是一种弱类型的、动态的语言弱类型，意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型，JavaScript 引擎在运行代码的时候自己会计算出来。 动态，意味着你可以使用同一个变量保存不同类型的数据。（5）J
2022-05-21 10:27:32
309
原创 浏览器工作原理--浏览器中的JavaScript执行机制
一、变量提升JavaScript 的执行机制：先编译，再执行（1）JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译。（2）在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。（3）如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定
2022-05-20 15:01:14
434
原创 浏览器工作原理--渲染流程：HTML，CSS和JavaScript是如何变成页面的？
一、渲染流水线（1）由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线。（2）按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。二、构建DOM树（1）原因：览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。（2）DOM树的构建过程构建 DOM 树的输入内容是.
2022-05-19 11:17:33
564
原创 浏览器工作原理-- 导航流程：从输入URL到页面展示，这中间发生了什么？
一、导航用户发出 URL 请求到页面开始解析的这个过程，就叫做导航。一、大致流程1、首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。2、然后，在网络进程中发起真正的 URL 请求。3、接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。4、浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程；5、渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML
2022-05-16 17:58:42
525
原创 浏览器工作原理--HTTP请求流程
一、HTTP（1） HTTP 协议，正是建立在 TCP 连接基础之上的。（2）HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础。（3）HTTP 也是浏览器使用最广的协议。二、浏览器端发起 HTTP 请求流程在浏览器地址栏输入一个网址后：1、构建请求首先，浏览器构建请求行信息（如下所示），构建好后，浏览器准备发起网络请求。GET /index.html HTTP1.12、查找缓存（1）在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要.
2022-05-16 11:34:41
1931
原创 浏览器工作原理--TCP协议：如何保证页面文件能被完整送达浏览器？
一、FP（First Paint）衡量 Web 页面性能的重要的指标，指从页面加载到首次开始绘制的时长。二、IP ：把数据包送达目的主机（网络层）（1）数据包要在互联网上进行传输，就要符合网际协议（Internet Protocol，简称 IP）标准。（2）计算机的地址就称为 IP 地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息。（3）如果要想把一个数据包从主机 A 发送给主机 B，那么在传输之前，数据包上会被附加上主机 B 的 IP 地址信息，这样在传输过程中才能正确寻
2022-05-14 11:12:46
486
原创 浏览器工作原理--Chorme架构
一、什么是并行处理计算机中的并行处理就是同一时刻处理多个任务，使用并行处理能大大提升性能。二、线程 VS 进程（1）线程是不能单独存在的，它是由进程来启动和管理的。（2）一个进程就是一个程序的运行实例：详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。（3）线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。（4）四大特点：1、进程中的任意一线程执行出错，都会导致整
2022-05-13 15:35:07
1330
1
原创 Webpack--模块热替换（HMR）
一、概述（1）live reload只要检测到代码改动就会自动重新构建，然后触发网页刷新（2）webapack中的模块热替换可以让代码在页面不刷新的前提下得到最新的改动，甚至不需要重新发起请求就能看到更新后的效果。二、开启HMR（1）HMR是需要手动开启的，并且有一些必要条件。（2）确保项目是基于webpack-dev-server或webpack-dev-middle进行开发的，webpack本身的命令行并不支持HMR。const webpack = require('w
2022-05-08 23:12:37
902
原创 Webpack--打包优化
一、HappyPackHappyPack是一个通过多线程来提升webpack打包速度的工具。工作原理（1）在打包过程中有一项非常耗时的工作，就是使用loader将各种资源进行转译处理。最常见的包括使用babel-loader转移ES6+语法和ts-loader转移TS。1、从配置中获取打包入口2、匹配loader规则，并对入口模块进行转译。3、对转译后的模块进行依赖查找。4、对新找到的模块重复2和3步骤，知道没有新的依赖模块。（2）webpack是单线程的。虽然这些转译任.
2022-05-08 22:30:03
969
原创 Webpack--生产环境配置
一、环境配置的封装（1）使用相同的配置文件，在构建开始前将当前所属环境作为一个变量传递进去，在webpack.config.js中通过各种判断条件决定具体使用哪个配置。//package.json{ 'script': { 'dev': "ENV=development webpack-dev-server", 'build': 'ENV=production webpack' }}//webpack.config.jsconst ENV = process.env
2022-05-08 16:33:50
721
原创 Webpack--代码分片
一、代码分片（1）代码分片是webpack作为打包工具所特有的一项技术，通过这项技术我们可以把代码按照特定的形式进行拆分，使用户不必一次全部加载，而是按需加载。（2）代码分片可以有效降低首屏加载资源的大小。二、通过入口划分代码（1）webpack中每个入口（entry）都将生成一个对应的资源文件，通过入口的配置我们可以进行一些简单有效的代码划分。（2）对于web应用来说通常会有一些库和工具是不常变动的，我们可以把它们放在一个单独的入口，由该入口产生的资源不会经常更新，因此可以有效地利用客
2022-05-08 15:07:50
665
原创 Webpack--样式处理
一、extract-text-webpack-plugin（1）作用：提取样式到CSS文件module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ //css的提取 //插件无法提取样式时所采用的loader fallback:
2022-05-07 00:12:14
236
原创 Webpack--loader
一、概述（1）webpack本身只认识javascript，对于其他类型的资源必须预先定义一个或多个loader对其进行转译，输出为webpack能够接收的形式再继续进行。因此loader做的实际上是一个预处理的工作。（2）loader本质上是一个函数。在webpack4之前，函数的输入和输出都必须为字符串；在webpack4之后，loader也同时支持抽象语法树（AST）的传递，通过这种方法来减少重复的代码解析。output = loader(input)1、input可能是工程源文件的
2022-05-05 00:05:28
323
原创 Webpack--资源输入输出
一、资源处理流程（1）指定一个或多个入口（entry），也就是告诉webpack具体从源码目录下的哪个文件开始打包。（2）存在依赖关系的模块会在打包时被封装为一个chunk（代码块，在webpack中可以被理解成被抽象和包装过后的一些模块）（3）根据具体配置不同，一个工程打包时可能会产生一个或多个chunk。（4）webpack会从入口文件开始检索，并将具有依赖关系的模块生成一颗依赖树，最终得到一个chunk。由整个chunk得到的打包产物我们一般称之为bundle。（5）每一个入口都会
2022-05-04 22:09:37
417
原创 Webpack--模块打包
一、CommonJS（1）CommonJS是由Javascript社区于2009年提出的包含模块、文件、IO、控制台在内的一系列标准。（2）在Node.js的实现中采用了CommonJS标准的一部分，并在其基础上进行了一些调整。我们所说的CommonJS模块和Node.js中的实现并不完全一致，现在一般提到CommonJS其实是Node.js中的版本，而非它的原始定义。（3）CommonJS中规定每个文件是一个模块。 导出 （1）导出是一个模块向外暴露自身的唯一方式。在CommonJS
2022-04-27 23:17:03
1521
原创 Webpack--简介
一、Webpack概念Webpack是一个开源的Javascript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个）。这个过程就叫作模块打包。二、模块打包工具（1）模块打包工具的任务就是解决模块间的依赖，使其打包后的结果能运行在浏览器上。它的工作方式主要分为两种（Webpack、Parcel、Rollup）将存在依赖关系的模块按照特定规则合并为单个JS文件，一次全部加载进页面中。 在页面初始时加载一个入口模
2022-04-20 23:44:37
891
原创 async await 原理
一、async await具体使用规则（1）async的函数在执行后都会自动返回一个Promise对象，有无值根据有无return值。（2）await必须在async函数里使用，不能单独使用。（3）await后面需要跟Promise对象，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。（4）async/await作用是用同步方式，执行异步操作。二、generator函数（1）跟普通函数
2022-03-22 16:15:34
3610
原创 vue-devtools安装教程
一、前置环境（已安装好node，npm）二、获取工具项目文件 · dev · mirrors / vuejs / vue-devtools · GitCode⚙️ Browser devtools extension for debugging Vue.js applications. ???? Github 镜像仓库 ???? 源项目地址 https://gitcode.net/mirrors/vuejs/vue-devtools/-/tree/devhttps://github.com/vuej
2022-02-15 14:10:50
3632
原创 输入框过滤输入（基于antd design input 和 ts 和 vue-property-decorator 封装组件）
一、说明此例子基于antd design input 和 ts 和 vue-property-decorator 封装组件。一、定义一个prop用于接收需要过滤的值，它可以是XInputTransformEnum枚举中的值（比较常用的），也可以是一个正则或一个函数，亦或者是所有这些可能值组成的一个数组。@Prop() transform?: XInputTransform | XInputTransform[];二、类型定义export enum XInputTransformE
2021-11-26 16:01:02
509
原创 vue基于face-api.js实现人脸识别
一、face-api.jsFace-api.js 是一个 JavaScript API，是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现。它实现了一系列的卷积神经网络（CNN），它实现了三种卷积神经网络（CNN）架构，用于完成人脸检测、识别和特征点检测任务。二、引入npm i face-api.js三、加载模型数据import { detectSingleFace, nets, matchDimensions, resize...
2021-10-12 11:06:04
5857
10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人