- 博客(199)
- 收藏
- 关注
RSS订阅原创 git 常用命令
git add .git commit -m '信息'git push 推送到远程仓库git branch -a 查看全部分支git branch origin/20210423_peiyin_audition 创建 origin/20210423_peiyin_audition分支，在哪个分支创建的就是在哪个分支基础上，即刚开始的代码和前分支一样git checkout origin/20210423_peiyin_audition 切换到 origin/20210423_peiyin_a
2021-04-24 01:04:46
234
原创 03vue源码阅读——源码构建
1.构建脚本2.构建过程3.RuntimeOnly VS Runtime+Compiler1.构建脚本package.json"build": "node scripts/build.js","build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer","build:weex": "npm run build -- weex"2.构建过程vue/scripts/builds.js...//1.获取构建的配置
2021-04-14 22:39:30
422
原创 02vue源码阅读——源码目录设计
总源码目录Vue.js 的源码都在 src 目录下，其目录结构如下。src├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持├── server # 服务端渲染├── sfc # .vue 文件解析├── shared # 共享代码compilercompiler 目录包含 Vue.js 所有编译相关的代码。它
2021-04-09 21:52:26
231
原创 01vue源码阅读——认识Flow
1.认识Flow2.Flow 的工作方式3.类型推断4.类型注释5.Flow 在Vue.js中的应用1.认识FlowFlow 是 facebook 出品的 JavaScript 静态类型检查工具。Flow2.Flow 的工作方式类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。类型注释：事先注释好我们期待的类型，Flow 会基于这些注释来判断。3.类型推断flow-test => index.js/*@flow*/``function spl
2021-04-09 20:32:51
164
原创 14浏览器中的页面循环系统：消息队列和时间循环
1.为什么需要消息队列和事件循环系统2.消息队列和事件循环系统1.为什么需要消息队列和事件循环系统每个渲染进程都有一个主进程，并且主线程非常繁忙，需要处理DOM、计算样式和处理布局等同时还需要处理 JavaScript 任务以及各种输入事件需要一个系统来统筹，就是我们的消息队列和事件循环系统2.消息队列和事件循环系统主线程在把异步任务（如setTimeOut、Promise.then()）不需要马上被执行的任务，放到任务队列，等待空闲时取出到主线程执行。消息队列中的任务分为宏任务和微任
2021-04-06 23:20:21
165
原创 13V8工作原理：编译器和解析器：V8是如何执行一段JavaScript代码的？
1.编译器（Compiler）和解析器（Interpreter）2.V8 是如何执行一段 JavaScript 代码1.编译器（Compiler）和解析器（Interpreter）编译型语言在执行之前，需要经过编译器的编译过程，并且在编译后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译。解释型语言，每次运行时都需要通过解释器对程序进行动态解释和运行。2.V8 是如何执行一段 JavaScript 代码var myName = "极客
2021-04-06 22:35:49
196
原创 12V8工作原理：垃圾回收——垃圾数据是如何自动回收的？
1.不同语言的垃圾回收策略2.调用栈中的数据是如何回收的3.堆中的数据是如何回收的1.不同语言的垃圾回收策略手动回收：C/C++垃圾回收策略，何时分配内存、何时销毁内存都是由代码控制的。自动回收：JavaScript/java等语言垃圾回收策略，产生的垃圾数据是由垃圾回收器来释放的。2.调用栈中的数据是如何回收的function foo(){ var a = "极客时间" var b = a var c = {name:"极客时间"} var d = c
2021-04-06 17:37:52
106
原创 11V8工作原理：栈空间和堆空间——数据是如何存储的？
1.JavaScript 是什么类型的语言？2.内存空间1.JavaScript 是什么类型的语言？弱类型：意味着你不需要JavaScript引擎声明的变量是什么类型，JavaScript引擎在运行代码时候会自己算出来动态：可以使用同一个变量保存不同类型的数据var barbar = 12 bar = "极客时间"bar = truebar = nullbar = {name:"极客时间"}2.内存空间原始类型：Boolean、Null、Undefined、Number、S
2021-04-06 16:37:33
191
原创 10JavaScript执行上下文：JavaScript执行机制——从JavaScript执行上下文将清楚this
1.JavaScript 中的this是什么this1.JavaScript 中的this是什么由图可知this和执行上下文是绑定的全局上下文中的thisconsole.log(this) // window函数执行上下文的thisfunction foo () { console.log(this)}foo() // window默认情况下调用一个函数，其执行上下文也是执行window对象的...
2021-04-06 01:46:00
74
原创 09JavaScript执行机制：作用域和闭包——代码中出现相同的变量，JavaScript引擎是如何选择的？
1.词法作用域2.作用域链3.闭包1.词法作用域词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域是静态作用域，通过它能预测代码在执行过程中如何查找标识符。function bar() { var myName = "极客世界" let test1 = 100 if (1) { let myName = "Chrome浏览器" console.log(test) }}function foo() {
2021-04-06 01:20:00
96
原创 08JavaScript执行机制：块级作用域——var缺陷以及为什么要引入let和const？
1.var缺陷2.三种作用域3.执行上下文角度看块级作用域1.var缺陷var 声明的变量会导致变量提升，变量提升带来一下两个问题：变量容易在不被察觉的情况下被覆盖掉var myname = "极客时间"function showName(){ console.log(myname); if(0){ var myname = "极客邦" } console.log(myname);}showName() // undefined函数showName代码在编译
2021-04-06 00:33:50
155
原创 07JavaScript执行机制：调用栈——为什么JavaScript代码会出现栈溢出？
1.三种执行上下文2.调用栈3.栈溢出1.三种执行上下文全局执行上下文：执行全局代码时会编译代码并创建全局执行上下文，整个页面的生存周期内只有一份函数执行上下文：调用一个函数的时候会编译代码并创建函数执行上下文，函数执行结束之后销魂eval执行上下文2.调用栈栈：先进后出的的数据结构调用栈：利用栈这种结构来管理执行上下文，在执行上下文创建后JavaScript引擎将执行上下文压入栈，执行完出栈3.栈溢出调用栈是有大小的，当入栈的执行上下文超过一定输目，就会发生栈溢出funct
2021-04-05 23:57:08
144
原创 06JavaScript执行机制：变量提升——JavaScript代码是按顺序执行的吗？
1.变量提升2. JavaScript代码的执行流程1.变量提升变量提升：JavaScript代码在执行过程中，JavaScript引擎把变量和函数的声明部分提升到代码开头的行为。变量提升后，会给变量设置默认值undefined2. JavaScript代码的执行流程变量和函数声明在代码中的位置不会改变，而是在编译阶段被JavaScript引擎放入内存中，编译完成后，才会进入执行阶段编译阶段1.编译阶段得到执行上下文和可执行代码2.执行上下文存在一个变量环境对象，变量和函数会被存
2021-04-05 23:42:31
102
原创 05 宏观下的浏览器：渲染阶段——HTML、CSS和JavaScript是如何变成页面的？
1.渲染流水线2.构建DOM树3.样式计算4.布局阶段5.分层1.渲染流水线构建 DOM 树：将HTML内容转换为DOM树结构样式计算：将CSS样式表转换为浏览器可以理解的styleSheets，计算DOM节点的样式布局阶段：创建布局树，并计算元素的布局信息分层：对布局树进行分层，生成分层树绘制：为每个图层生成绘制列表，并将其提交到合成线程分块：合成线程将图层分成图块光栅化：在光栅话线程池中将图块转换为位图合成：合成线程发送绘制图块命令DrawQuad给浏览器进程，浏览器进程根据
2021-04-05 21:42:21
109
原创 04宏观下的浏览器：导航流程——从输入url到页面展示，这中间发生了什么？
1.用户输入2.URL 请求过程1.用户输入地址栏会判断输入的关键字是搜索内容还是请求的URL如果是搜索内容，使用浏览器搜索引擎合成新的搜索关键字的URL符合URL规则，可能有补全操作2.URL 请求过程浏览器进程会根据进程间通信把URL发送至网络进程，接受到后其会发起真正的URL请求流程网络进程查找本地缓存是否缓存了该资源，如果有则返回资源给浏览器进程，如果没有则进入网络请求流程网络请求流程1：查找DNS缓存是否缓存了该地址，缓存了使用，没缓存的话通过DNS域名系统获取请求域名的I
2021-04-05 19:59:39
102
原创 03宏观下的浏览器：HTTP请求流程——为什么很多站点第二次打开速度会很快？
1.浏览器端发起HTTP请求流程2. 服务器端处理 HTTP 请求流程3.为什么很多站点第二次打开速度会很快？1.浏览器端发起HTTP请求流程构建请求查找缓存准备 IP 地址 和端口等待TCP 队列建立 TCP 连接发起HTTP请求1-1 构建请求// 首先构建请求行信息GET /index.html HTTP/1.11-2 查找缓存在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件浏览器缓存是一种在本地保持资源的副本，以供下次请求时直接使用的技术
2021-04-05 15:29:53
143
原创 02宏观下的浏览器——TCP协议：如何保证页面文件能完整地送达浏览器？
三个协议TCP（传输层）：保证了数据完整地传输，连接可分为三个阶段：建立连接、传输数据和断开连接UPD（传输层）：负责把数据包送达具体应用。IP（网络层）：负责把数据包送达目的主机。UDP每个访问网络的程序都需要绑定一个端口号，UDP通过端口号把数据发送给正确的程序。发送端：传输层会在数据包前面附加上UPD头，组成新的UDP数据包，再将新的UDP数据包交到网络层接收端：传输层中数据包的UDP头会被拆开，并根据UDP所提供的端口号，把数据部分交给上层应用层序。TCPTCPIP发
2021-04-05 13:30:35
133
原创 01宏观视角下的浏览器——打开一个页面，为什么会有4个进程
1.进程和线程1.进程和线程1-1 什么是并行处理？A = 1+2B = 20/5C = 7+8单线程（四步）：任务1 计算 A = 1+2任务2 计算 B = 20/5任务3 计算 C = 7+8任务4 显示最后的计算结果多线程（两步）：使用三个线程同时执行前三个任务执行第四个显示任务使用并行处理能大大提升性能...
2021-04-05 11:02:31
357
1
原创 02 理论讲解：数组&链表
1.数组定义2.链表1.数组定义内存里连续的一段存储区域可以通过索引任意存取，索取：时间复杂度是O(1)，插入\删除：时间复杂度O(n)优点：查询快缺点：增删慢，所以有了链表2.链表2-1 数组的缺点数组要添加和删除元素时，需要将数组中的其他元素向前或向后平移，效率低。2-2 链表链表是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的。优点增加节点和删除节点需要只需要改变链表指针，时间复杂度O(1)缺点查询需要沿着指针遍历
2021-04-04 22:09:13
85
原创 01 如何计算算法的复杂度
1.Big O notation2.复杂度代码示例1.Big O notationO(1): 常数复杂度O(log n): 对数复杂度O(n)： 线型时间复杂度O(n^2): 平方O(n^3)：立方O(2^n) ：指数O(n!)：阶乘注意：只看最高复杂度的运算2.复杂度代码示例O(1)int n = 1000;System.out.println(n)O(n)for (int i=1; i<=n; i++) { System.out.println(i)}
2021-04-02 00:10:58
118
原创 20 跨域的解决方法
1.什么是跨域2.跨域解决方案1.什么是跨域即同源策略：源：指的是协议、域名和端口号同源：指协议、域名和端口号都相同同源策略：浏览器的一个安全功能，不同源的脚本在不能读写对方的资源Cookie、LocalStorage和IndexDB 无法读取DOM 和 JS 对象无法获取Ajax 请求发送不出去2.跨域解决方案2-1 JSONP客户端：<button id="btn">点击</button> <script src="https://cdn.
2021-04-01 21:48:29
127
原创 08 从HTTP到HTTP2.0
HTTP 请求方法和对无状态的理解HTTP 请求方法HTTP 状态码HTTP 状态码HTTP发展史HTTP/1.0的两个痛点TCP连接不可复用在HTTP/1.0每一次HTTP通信都需要执行三步走：TCP连接、HTTP通信、断开TCP连接，通信量大时耗费了很多资源对头阻塞问题在HTTP/1.0中，请求和请求间是串行的，如A请求发送出去，必须等到A请求的响应回来才可以发送别的请求。HTTP/1.1对HTTP/1.0的两个痛点的解决实现长连接特点：只要任意一段没有明确提出断开连
2021-04-01 08:59:27
191
原创 07 TCP 与 UDP
1.TCP-三次握手与四次挥手2.TCP与UDP的辨析1.TCP-三次握手与四次挥手1-1 三次握手SYN报文：当SYN=1而ACK=0时，表明这是一个连接请求报文；当SYN=1而ACK=1时对方同意建立连接，所以SYN=1表示这是一个连接请求或者连接接收请求。ACK报文：只有ACK=1时有效，连接建立后所有发送的报文ACK必须为 1，表示确认。客户端：SYN=1, ACK = 0服务器端： SYN = 1, ACK = 1客户端： ACK = 1为什么TCP一定要握手三次客户端和
2021-04-01 00:54:49
115
原创 06 浏览器缓存机制
1.什么是缓存？2.缓存的分类3.浏览器缓存1.什么是缓存？缓存是浏览器的一种机制，可以把请求过的web资源（html、css、js、图片等）拷贝一份副本存储在浏览器中，并根据请求配置选择是否使用该副本。2.缓存的分类缓存的作用：减少网络带宽消耗降低服务器压力减少网络延迟，使页面的打开速度更快，增加用户体验3.浏览器缓存协商缓存强制缓存3-1 强制缓存HTTP1.0：ExpiresHTTP1.1 ：Cache-Control判断过程：请求再次发起 ->
2021-03-31 18:30:28
52
原创 05 CSS实现三栏自适应布局（两边宽度固定，中间自适应）
1.绝对定位法2.使用浮动3.圣杯布局4.flex布局1.绝对定位法<style type="text/css"> html,body{ margin: 0px;width: 100%; } #left,#right { width: 200px; height: 200px; background-color: #ffe6b8; position: absolute; } #left { left:0px; }
2021-03-31 14:12:20
220
原创 05 确保Web安全的HTTPS
1.HTTP 的缺点2.通信使用明文（不加密），内容可能会被窃听3.不验证通信方的身份，因此有可能遭遇伪装4.无法证明报文的完整性，所以有可能已遭篡改5.HTTP+加密+认证+完整性保护=HTTPS1.HTTP 的缺点通信使用明文（不加密），内容可能会被窃听不验证通信方的身份，因此有可能遭遇伪装无法证明报文的完整性，所以有可能已遭篡改2.通信使用明文可能会被窃听由于HTTP本身不具备加密的功能，所以也无法做到对通信整体进行加密。即，HTTP报文使用明文的方式发送。2-1 TCP/I
2021-03-29 23:35:00
114
原创 04 返回结果的http状态码
1××类别：informational（信息性状态码）原因短语：接收的请求正在处理2××类别：Sucess（成功状态码）原因短语：请求正常处理完毕200：ok 从客户端发来的请求在服务器端被正常处理了204：Not Content 成功处理，但返回的响应报文不含实体的主体部分206：Partial Content 客户端进行了范围请求，而服务器执行了这部分的GET请求3××类别：Redirection（重定向状态码）原因短语：需要进行附加操作以完成请求301：永久重定向 请
2021-03-29 20:37:33
112
原创 03 HTTP报文内的HTTP信息
1.请求报文及响应报文的结构2.编码提升传输速率3.发送多种数据的多部分对象集合4.获取部分内容的范围请求5.内容协商返回最合适的内容1.请求报文及响应报文的结构1-1 请求报文报文首部请求行请求首部字段通用首部字段实体首部字段空行（CR+LF）报文主体1-2 响应报文报文首部状态行响应首部字段通用首部字段实体首部字段空行（CR+LF）报文主体2.编码提升传输速率压缩传输的内容编码分割发送的分块传输编码2-1 压缩传输的内容编码
2021-03-29 17:48:06
89
原创 02 简单的HTTP协议
1.请求报文与响应报文2.HTTP 是不保存状态的协议3.告知服务器意图HTTP方法4.持久连接节省通信量1.请求报文与响应报文1-1 请求报文请求行（请求方法、URI、协议版本）可选的请求首部字段内容实体// 请求行POST /form/entry HTTP/1.1// 可选的首部字段Host: hackr.jpConnction: keep-aliveContent-Type: application/x-www-form-urlencoded// 内容实体nam
2021-03-29 16:45:18
130
原创 01网络基础
1.TCP/IP协议族2.TCP/IP分层管理3.与HTTP关系密切的协议：IP、TCP、DNS1.TCP/IP协议族把与互联网相关联起来的协议集合起来总称为TCP/IP。如HTTP、DNS、TCP、UDP、IP等协议都是TCP/IP的子集。2.TCP/IP分层管理应用层传输层网络层数据链路层2-1应用层这一次决定了向用户提供应用服务时的活动。如FTP(文件传输协议)、DNS(域名系统)、HTTP(超文本传输协议)。数据单元：报文2-2 传输层提供处于网络连接中的
2021-03-29 11:16:02
87
原创 19.从浏览器多进程到JS单线程，JS运行机制全面梳理
1.区分进程和线程2.多进程的浏览器3.浏览器内核中线程之间的关系4.浏览器渲染流程5.从Event Loop 谈JS的运行机制6.事件循环进阶：macrotask 与 microtask1.区分进程和线程1-1 进程和线程的定义进程cpu资源分配的最小单位。线程是cpu调度的最小单位。一个程序至少有一个进程，一个进程至少有一个线程。1-2 进程和线程的区别根本区别：进程是cpu资源分配的最小单位，线程是cpu调度的最小单位。地址空间：进程有自己独立的地址空间，同一进程的线程
2021-03-29 00:12:53
160
原创 18 从输入URL到页面加载的过程？
1.从浏览器接收url到开启网络请求线程（可展开浏览器的机制及进程与线程的关系）2.开启网络线程到发出一个完整的http请求（涉及到dns查询，tcp/ip请求，五层因特网协议栈）3.从服务器接收到请求到对应的后台接收到请求（负载均衡、安全拦截、后台内部处理）4.解析页面流程+资源外链的下载)1.从浏览器接收url到开启网络请求线程（可展开浏览器的机制及进程与线程的关系）多进程的浏览器多线程的浏览器渲染进程解析URL网络请求都是单独的线程阶段总结1-1 浏览器是多进程的进程与线程的
2021-03-28 12:45:44
314
2
原创 17 前端性能优化的方式以及图片懒加载的实现
1.前端性能优化2.图片懒加载的实现1.前端性能优化 1-1 加载更快减少资源体积：minify/gzip压缩减少访问次数：合并资源（代码）、SSR服务端渲染、使用缓存加快请求速度：预解析DNS,减少域名次数，并行下载，CSN分发。1-1 渲染更快CSS放在head，js放在body最下面尽早开始执行js，用DomContentLoaded触发图片懒加载频繁的DOM操作合并一起插入到DOM结构防抖与节流。2.图片懒加载的实现知乎js原生方式实现懒加载原理剖析...
2021-03-26 11:04:31
151
原创 04子元素如何在父元素中居中？
1.水平与垂直居中2.水平居中3.垂直居中1.水平与垂直居中flex布局，父元素display: flex;justify-content: center; // 水平居中align-items: center; // 垂直居中子元素相对父元素绝对定位，加上transformposition: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)子元素相对父元素绝对定位，加上margin负值
2021-03-26 10:28:24
162
原创 03 定位的四个属性值有何区别？
两个方面的比较是否脱离文档流（标准流）相对于谁定位比较Position 有四个属性值：relative absolute fixed staticRelative 相对定位 不脱离文档流，相对于自身定位Absolute 绝对定位，脱离文档流 相对于父级定位Fixed 固定定位，脱离文档流，相对于浏览器窗口定位Static 默认值，元素出现在正常的流中...
2021-03-25 23:41:48
540
原创 02BFC与 清除浮动
1.什么是BFC2.BFC的布局规则3.如何触发BFC4.清除浮动的场景？5.清除浮动的方式1.什么是BFC即“块级格式化”上下文，是一个独立地布局环境，其中的元素布局不受外界的影响，并且在一个BFC中，块盒盒行盒都会垂直地沿着父元素地边框排列。2.BFC的布局规则内部的盒子会在垂直方向，一个接一个放置。盒子垂直方向的距离由margin决定，同一个BFC的两个相邻盒子的margin会发生重叠BFC的区域不会和 float 的盒子重叠。计算BFC的高度时，浮动元素也参与计算。<
2021-03-25 23:34:43
86
原创 02HTML5新增特性
1.新增标签2.多媒体视频3.新增input标签4.新增表单属性5.本地存储1.新增标签header — 头部标签nav — 导航标签article — 内容标签section — 块级标签aside — 侧边栏标签footer — 尾部标签2.多媒体视频audiovideo<audio controls> //1. mpeg //2. Mp3 // 3.Wav <sou
2021-03-25 21:33:30
76
原创 01CSS知识点汇总
1.引入css样式表的三种方式2.css基础选择器3.font 字体4.文本外观属性5.其它选择器6.css背景7.css 定位8.元素的显示与隐藏9.鼠标样式10.CSS过渡11.CSS动画1.引入css样式表的三种方式行内式<div style="width: 100px;"> 123 </div>内嵌式<head><style type="text/CSS"> 选择器（选择的标签） { 属性
2021-03-25 13:12:53
73
原创 01HTML知识点汇总
1.文档类型2.页面语言3.head 里面的标签4.HTML 标签的语义化5.块级标签、行级标签、行块级标签6.表单域7.表格8.两种引入文件的方案：链接（link）与替换型元素（src）1.文档类型<!DOCTYPE html> 作用声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。2.页面语言<html lang="en"> 指定html 语言种类en 定义语言为英语zh-CN
2021-03-25 11:47:05
55
原创 16事件循环：浏览器中的 Event-Loop
1.一道面试题2.浏览器中的 Event-Loop 机制1.一道面试题 console.log(1)setTimeout(function() { console.log(2)})new Promise(function (resolve) { console.log(3) resolve() }).then(function () { console.log(4)}).then(function() { console.log(5)})console.log(
2021-03-22 18:16:23
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人