手写axios

2022-07-12
阅读 5 分钟
1.6k
定义Axios类 {代码...} 定义请求方法 {代码...} 定义拦截器类 {代码...} 定义取消请求类 {代码...} 把定义的方法绑到Axios类上 {代码...} 导出axios {代码...} 导出 {代码...} node代码 {代码...} html页面 {代码...}

浏览器工作原理与实践(八)——浏览器安全

2022-05-07
阅读 3 分钟
1.1k
单进程架构的浏览器是不稳定的,只要任意一个如页面卡死、浏览器崩溃都会影响整个浏览器。浏览器本身的漏洞也是单进程浏览器的一个问题。如果漏洞没有修复,黑客可以通过恶意页面向浏览器注入恶意程序,比如利用缓冲区溢出。不过和XSS注入脚本是不一样的XSS攻击只是将恶意的JS注入到页面中,虽然可以窃取cookie数据,但...

浏览器工作原理与实践(七)——页面安全

2022-05-07
阅读 2 分钟
624
同源策略可以隔离各个站点之间的 DOM 交互、页面数据和网络通信,但也约束了web。所以我们默认页面中可以引用任意第三方资源,然后又引入 CSP 策略来加以限制;默认 XMLHttpRequest 和 Fetch 不能跨站请求资源,然后又通过 CORS 策略来支持其跨域。不过也带来了安全问题,如XSS攻击。

浏览器工作原理与实践(六)——浏览器网络

2022-05-06
阅读 2 分钟
970
HTTP:超文本传输协议,用来在网络传递HTML超文本内容。http基于TCP协议,客户端先根据IP地址,端口号和服务器建立TCP连接,建立过程TCP协议3次握手。建好之后,先发送一个GET请求行信息,获取数据。服务器接收请求,读取对应文件,并将数据以ASCII字符流返回给客户端。文档传完,断开连接。HTTP1.1TCP为了单连接而设计。...

浏览器工作原理与实践(五)——浏览器页面渲染

2022-05-06
阅读 5 分钟
895
HTML解析器不是等文档加载完成才解析的,而是边加载边解析。网络进程根据收到的content-type=text/html判断是html类型文件,为该请求创建一个渲染进程,渲染进程准备好后会在网络进程和渲染进程中建立一个共享数据的管道,网络进程接收到的字节流像水一样的倒进这个管道,渲染进程的html解析器会动态接收字节流将其解析...

浏览器工作原理与实践(四)——浏览器页面循环系统

2022-05-02
阅读 4 分钟
1.1k
浏览器页面是由消息队列和事件循环系统来驱动的。消息队列:单行道->先进先出。消息队列任务又被称为宏任务,每个宏任务队列又都包含了一个微任务队列。执行宏任务的时候,如果DOM有变化,将变化提交到微任务中。当宏任务执行完再执行当前微任务。消息队列和事件循环类似于观察者发布订阅模式,事件循环(单线程运行过...

浏览器工作原理与实践(三)——V8下的JS代码执行

2022-05-02
阅读 2 分钟
1k
JS作为一门高级语言,代码给到浏览器或nodejs时是不能被底层CPU执行的,就需要通过JS虚拟机来实现代码编译和执行。V8最为广泛,采用了即时编译(JIT)的双轮驱动设计,混合了编译执行和解释执行2种方式

浏览器工作原理与实践(二)——浏览器中的JavaScript执行机制

2022-03-30
阅读 3 分钟
858
js执行顺序当一段代码被执行时,js引擎会先对其编译,并创建执行上下文。当执行全局代码时,会编译全局代码并创建全局执行上下文,整个页面生存周期内,全局上下文只有一份。调用到函数时,函数体内代码编译并创建函数执行上下文,函数结束后,下下文会被销毁。栈遵守后进先出的原则,比如一条死胡同,进去的多人,只能...

浏览器工作原理与实践(一)——请求到渲染流程

2022-03-30
阅读 2 分钟
1.1k
本文总结于极客时间李兵老师的课程,有兴趣的同学可以自己去学习下。浏览器包含的进程浏览器进程:界面显示、用户交互、子进程管理、存储等。渲染进程:render树、V8引擎、(每个Tab都是一个进程,沙箱中数据获取可能有问题)GPU进程:3D、css网络进程:网络资源加载插件进程:插件运行、崩溃不会对浏览器和页面产生影响...

javascript数据结构与算法总结

2021-12-02
阅读 9 分钟
853
对于给定的两个集合,返回一个包含两个集合中所有元素的新集合。Object.assign(),2个都要;并集的数学概念,集合A和B的并集,表示为A∪B,定义如下:A∪B = { x | x ∈ A∨x ∈ B }意思是x(元素)存在于A中,或x存在于B中。现在来实现Set类的union方法:

HTTP那些事

2021-05-28
阅读 4 分钟
1.1k
一般使用的网络都是在TCP/IP协议的基础上运作的,而HTTP属于它内部的一个子集。在计算机和网络设备进行互相通信时,双方都必须基于相同的方法。协议中包括:从电缆的规格到IP地址的选定方法,寻找异地用户的方法,双方建立通信的顺序,以及web页面显示要处理的步骤等等。将这些相关联的协议集合起来总称为TCP/IP。

react

2021-04-15
阅读 5 分钟
1.9k
转自React技术揭秘React15React15架构可以分为2层:Reconciler(协调器)————负责找出变化的组件,diffRenderer(渲染器)————负责将变化的组件渲染到页面上Reconciler(协调器)react是通过this.setState,this.forceUpdate,ReactDOM.render等API触发更新的。每当有更新发生时,Reconciler会做如下工作:调用函数组件、或class...

vue、react、angular三大框架对比

2021-04-12
阅读 2 分钟
5.9k
angular是一个大而全的MVC框架,它提供了我们所需要的各种功能,如模块管理,双向绑定等等,它涵盖了开发中的各个层面,并且层与层之前都经过了精心调试

webpack

2021-03-30
阅读 3 分钟
1.1k
模块化:依赖,网络请示webpack是一个前端资源动态加载/打包工具,会分析模块的依赖,并将模块根据指定规则生成静态资源,同一个文件的代码会打包成一个Bundle文件。

手写Promise

2021-02-08
阅读 7 分钟
1.9k
Promise的用法 : {代码...} 可以看到new了一个Promise,里面有一个回调函数,回调函数里有2个参数,分别又是另外2个函数。其实里面很多也都是回调函数的封装调用。 {代码...} 测试一下执行情况: {代码...} 下面就是then了 {代码...} 测试一下 : {代码...} 链式调用: {代码...} 测试一下: {代码...} 但还有个问题 {代...

javascript的面向对象,原型链及继承

2018-01-24
阅读 10 分钟
1.6k
面向对象 js是一门基于对象的语言。js中的一切皆对象; {代码...} new function {代码...} 私有变量和函数在函数内部定义的变量和函数,叫局部(内部)变量和函数,如果不对外提供接口,外部是无法访问到的。 {代码...} 静态变量和函数定义一个函数后加"."来添加的属性和函数,该函数可以访问到,但实例访问不到。 {代码......

关于各种This的指向

2017-11-03
阅读 4 分钟
2.3k
this 的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。当你在代码中使用了 this,这个 this 的值就直接从执行的上下文中获取了,而不会从作用域链中搜寻

oop

2017-09-12
阅读 17 分钟
1.4k
构造函数(constructor),其实就是一个普通函数,但是内部使用了this变量,对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

浏览器的各种位置值获取

2017-08-11
阅读 17 分钟
12k
一张网页的全部面积,就是它的大小,通常是由内容和css样式表决定的。浏览器窗口的大小,是在浏览器中看到的那部分网页面积。又叫做viewport(视口)。如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示,则滚动浏览器窗口,可以显示出网页...