- 博客(34)
- 收藏
- 关注
RSS订阅原创 3分钟带你搞懂Vue双向绑定原理及问题剖析
所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。
2023-02-15 23:58:49
10294
2
原创 一文彻底弄懂js类型转换
今天突然看到一道关于JavaScript类型转换的面试题，本以为可以轻松的拿下，然而看了一会，就有点傻眼，做完之后，在浏览器上执行了之后，错了一大堆，让我怀疑自己是否真的“学过”JavaScript。然后我认真看了的相关内容，在此记录并分享给大家，。
2023-02-01 16:57:14
189
原创 JavaScript数据类型转化
在 JavaScript 中，当我们进行比较操作或者加减乘除四则运算操作时，常常会触发 JavaScript 的隐式类型转换机制，并没有做详细的定义，如果存在原生值，它将转换为它的原始值。条件语句期望使用布尔值时，可以提供任意类型的值，JavaScript 会将其转换。除此之外，JavaScript 中提供了专门的函数和方法来做数字与字符的转换。前面说的原始值间的相互转换都是很简单的，相比之下对象转换为原始值较为复杂些。，表示独一无二的值。解析一个字符串参数，并返回一个指定基数的整数 (数学系统的基础)。
2022-11-29 10:10:57
346
原创 解决方案：yarn 出现error An unexpected error occurred错误的解决办法
yarn出现error An unexpected error occurred: "https://github.com/eligrey/FileSaver.js: unable to verify the first certificate"错误的解决办法
2022-11-07 16:11:37
6815
原创 React重点面试题（二）
ReactReact 上注册的事件最终会绑定在document这个 DOM上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)React 自身实现了一套事件冒泡机制，所以这也就是为什么我们无效的原因。React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们JSX中定义的callbackReact 有一套自己的合成事件：组件即将销毁。良好使用keykey应该是唯一的。key不要使用随机值。
2022-11-06 11:18:24
155
原创 React 重点面试题（一）
React，用于构建用户界面的JavaScript库，提供了的解决方案，遵循组件设计模式、声明式编程范式和函数式编程概念，使用 ,遵循的，帮助我们将界面分成了各个小的块，每一块就是一个组件，这些组件之间嵌套、组件，构成整个界面。 是 JavaScript XML 的缩写，不是基于的一种新特性，是一种带树结构的语法Virtual DOM 是一个，最开始是。是一个树节点，将元素、元素的属性以及内容作为对象极其对象的属性。**Virtual DOM 工作时的三大步骤： **本身是不是异步的，之所以会有异步表
2022-11-06 11:16:15
176
原创 【React】函数组件 和 类组件 的区别
用于缓存函数的返回值，第一个参数为要缓存的函数（注意实际被缓存的是函数被执行过后的值），第二个参数为依赖项数组，如果依赖发生了变化，那么就会重新执行这个函数，得到新的返回值；在函数组件中，之前的props参数，已经因为javascript闭包的特性，保存在内存之中，无法从外部进行修改(维护多个人的状态)。：用于缓存函数，第一个参数为要缓存的函数，第二个参数为依赖项数组，如果依赖发生了变化，那么就会生成一个新的函数；此案例中，当父组件的state改变时，子组件进行重新渲染，子组件的props改变；
2022-11-03 22:58:00
5219
原创 HTTPS：让数据传输更安全
浏览器安全主要划分为三大块内容：页面安全、系统安全和网络安全。前面我们用四篇文章介绍了页面安全和系统安全，也聊了浏览器和 Web 开发者是如何应对各种类型的攻击，本文是我们专栏的最后一张，我们就接着聊聊网络安全协议 HTTPS。
2022-10-31 16:57:05
145
原创 sandbox：页面和系统之间的隔离墙
因为只要浏览器进程中的任意一个功能出现异常都有可能影响到整个浏览器，如页面卡死、浏览器崩溃等。不过浏览器的稳定性并不是本文讨论的重点，我们今天主要聊的是。浏览器本身的漏洞是单进程浏览器的一个主要问题，如果浏览器被曝出存在漏洞，那么在这些漏洞没有被及时修复的情况下，黑客就有可能通过恶意的页面向浏览器中注入恶意程序，其中最常见的攻击方式是利用，不过需要。XSS 攻击只是将恶意的 JavaScript 脚本注入到页面中，虽然能窃取一些 Cookie 相关的数据，但是 XSS 无法对操作系统进行攻击。
2022-10-31 16:45:25
297
原创 同源策略：为什么XMLHttpRequest不能跨域请求资源
要了解什么是同源策略，我们得先来看看什么是同源。如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。比如下面这两个 URL，它们具有相同的协议 HTTPS、相同的域名 time.geekbang.org，以及相同的端口 443，所以我们就说这两个 URL 是同源的。category=1category=0浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
2022-10-31 16:32:45
490
原创 CSRF攻击：陌生链接不要随便点
CSRF 英文全称是 Cross-site request forgery，所以又称为“跨站请求伪造”，是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登录状态发起的跨站请求。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。通常当用户打开了黑客的页面后，黑客有三种方式去实施 CSRF 攻击。下面我们以极客时间官网为例子，来分析这三种攻击方式都是怎么实施的。
2022-10-31 16:30:05
234
原创 跨站脚本攻击XSS：为什么cookie中有httpOnly属性
XSS 全称 Cross Site Scripting，为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨域脚本”。但是发展到现在，往 HTML 文件中注入恶意代码的方式越来越多了，所以是否跨域注入脚本已经不是唯一的注入手段了，但是 XSS 这个名字却一直保留至今。
2022-10-31 15:58:10
219
原创 HTTP3：甩掉TCP、TCL包袱，构建高效网络
下面我来总结下本文的主要内容。我们首先分析了 HTTP / 2 中所存在的一些问题，主要包括了 TCP 的队头阻塞、建立 TCP 连接的延时、TCP 协议僵化等问题。这些问题都是 TCP 的内部问题，因此要解决这些问题就要优化 TCP 或者“另起炉灶”创造新的协议。由于优化 TCP 协议存在着诸多挑战，所以官方选择了创建新的 QUIC 协议。
2022-10-31 15:36:18
233
原创 HTTP2：如何提升网络速度
下面我来总结下本文的主要内容。我们首先分析了影响 HTTP / 1.1 效率的三个主要因素：TCP 的慢启动、多条 TCP 连接竞争带宽和队头阻塞。接下来我们分析了 HTTP / 2 是如何采用多路复用机制来解决这些问题的。多路复用是通过在协议栈中添加二进制分帧层来实现的，有了二进制分帧层还能够实现请求的优先级、服务器推送、头部压缩等特性，从而大大提升了文件传输效率。
2022-10-31 15:18:03
604
原创 HTTP1：HTTP性能优化
本文我们重点强调了 HTTP 是浏览器和服务器的通信语言，然后我们从需求演变的角度追溯了 HTTP 的发展史，在诞生之初的 HTTP / 0.9 因为需求简单，所以和服务器之间的通信过程也相对简单。由于万维网的快速崛起，带来了大量的需求，其中最核心的一个就是需要支持多种类型的文件下载，为此 HTTP / 1.0 中引入了请求头和响应头。在支持多种类型文件下载的基础之上，HTTP / 1.0 还提供了 Cache 机制、用户代理、状态码等一些基础信息。
2022-10-31 14:55:17
105
原创 渲染流程（下）：HTML、CSS和JavaScript是如何变成页面的
好了，我们现在已经分析完了整个渲染流程，从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。结合上图，一个完整的渲染流程大致可总结为如下渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。创建布局树，并计算出 DOM 节点的样式。对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
2022-10-16 11:10:11
119
原创 渲染流程（上）：HTML、CSS和JavaScript是如何变成页面的
在上一篇文章中我们介绍了导航相关的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用 JavaScript 优化动画流程，通过优化样式表来防止强制同步布局，等等。
2022-10-16 10:57:27
137
原创 手撕Promise
Promise是ES6新增的引用类型，可以通过new来进行实例化对象。Promise内部包含着异步的操作。这两种方式都会返回一个 Promise 对象。
2022-10-13 23:29:38
279
原创 导航流程：从输入URL到页面展示这中间发生了什么
用户输入URL并回车。浏览器进程检查URL，组装协议，构成完整的URL。浏览器进程通过进程间通信（IPC）把URL请求发送给网络进程。网络进程接收到URL请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程。进行DNS解析，获取服务器IP地址，端口（端口是通过DNS解析获取的吗？这里有个疑问）。利用IP地址和服务器建立TCP连接。构建请求头信息。发送请求头信息。服务器响应后，网络进程接收响应头和响应信息，并解析响应内容。
2022-10-12 19:55:37
177
原创 HTTP请求流程：为什么很多站点第二次打开速度会很快
本篇文章的内容比较多、比较碎，但是非常重要，所以我先来总结下今天的主要内容。为了便于你理解，我画了下面这张详细的“HTTP请求示意图”，用来展现浏览器中的HTTP请求所经历的各个阶段。从图中可以看到，浏览器中的HTTP请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备IP和端口、等待TCP队列、建立TCP连接、发起HTTP请求、服务器处理请求、服务器返回请求和断开连接。
2022-10-12 19:11:28
333
原创 TCP协议：如何保证页面文件能被完整送达浏览器
好了，这一节就到这里，下面我来做一个简单的总结。互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。IP负责把数据包送达目的主机。UDP负责把数据包送达具体应用。而TCP保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。其实了解TCP协议，是为了全方位了解HTTP，包括其实际功能和局限性，之后才会更加深刻地理解为什么要推出HTTP/2，以及为什么要推出QUIC协议，也就是未来的HTTP/3。
2022-10-12 18:33:37
427
原创 Chrome架构：仅仅打开1个页面，为什么有4个进程
计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面这三个表达式的值，并显示出结果。任务1：计算A = 1 + 2。任务2：计算B = 20 / 5。任务3：计算C = 7 * 8。任务4：显示最后计算的结果。正常情况下程序可以使用单线程来处理，也就是分四步按照顺序分别执行者四个任务。如果采用多线程，会怎么样呢？第一步：使用三个线程同时执行前三个任务。第二步：再执行第四个显示任务。通过对比分析，你会发现用单线程执行需要四步，而使用多线程只需要两步。
2022-10-12 18:29:57
730
原创 前端八股文（一）
浏览器第一次向服务器发起该请求后拿到请求结果后，将请求结果和缓存标识存入浏览器缓存，浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。 强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，看TCP报文段中的序号和确认号.相同点：存储在客户端。...
2022-09-01 10:36:18
276
原创 JavaScript中的宏任务与微任务
一文让你理解透彻JavaScript中宏任务与微任务。js是单线程，但js是可以执行同步和异步任务的，同步的任务众人皆知是按照顺序去执行的；而异步任务的执行，是有一个优先级的顺序的，包括了 宏任务（macrotasks）和 微任务(microtasks)规范中，microtask（微任务） 称为 jobs，macrotask（宏任务也叫主任务） 称为 task宏任务是由宿主发起的，而微任务由JavaScript自身发起。...
2022-08-26 10:28:58
379
原创 JavaScript必会的技巧（二）
那么这个cookie就过期了（相当于删除了）方法用于发出异步请求使元素进入全屏模式。方法会滚动元素的父容器，使被调用。自己封装cookies，提高开发效率。使用 Element。
2022-08-19 00:51:59
227
原创 一文让你拿捏 this、call、apply、bind
前端现在越来越卷，找工作拿高薪更是不易，因为想要在这个特别卷的时代，我们要想进大厂，拿高薪，首先最重要的就是，知识点得掌握扎实，做到举一反三。因此。
2022-08-13 16:44:34
164
原创 JavaScript必会技巧---递归树结构
实际开发中，经常会遇到的业务需求中，后端传过来的是数组中包含许多“形式一样”的对象，因此前端需要经过处理，转化为树结构。
2022-08-12 11:30:00
948
原创 CSS定位有哪几种？
css定位的几种方式： 1、static（静态定位）： 默认值。没有定位，当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变......
2022-08-09 11:29:20
379
原创 JavaScript设计模式
js常见的设计模式与开发实践。单例模式、工厂模式、代理模式、迭代器模式、发布-订阅模式（观察者模式）、装饰者模式、适配器模式
2022-08-06 16:20:50
234
空空如也
csdn搜索不了，不知是何原因？
2022-10-04
TA创建的收藏夹 TA关注的收藏夹
TA关注的人