04 2020 档案
摘要：首先我们要知道，CSS选择器的解析是从右往左的，例如 div p a .box 首先查找的是页面中class为box的元素，再分别查找为a的元素、为p的元素。。。 关键选择器： 因此最重要的就是最右边的选择器，称为关键选择器 css选择器的效率排序： 内联样式 > ID选择器 > 类选择器 > 标签
阅读全文
摘要：在页面加载过程中，当客户端请求服务端获取页面代码后是如何解析的呢？ 分为以下五个步骤： 第一步 ：构建DOM树，其中包括语法解析、词法解析，最后构成节点相连的树 第二步：构建CSSOM树，对每个节点添加样式 第三步：合并DOM树和CSSOM树形成渲染树 其中需要过滤不可见的节点、样式隐藏的节点 第四
阅读全文
摘要：Base64实际上就是一种转码方式，将二进制数据转换为用64个字符表示的数据 主要用来对URL中特殊字符进行转码、对图片的src进行转码、对语言文字进行转码。 Base64的原理？ 世界上单个字符最长字节是3个字节，也就是24位，Base64将24位分为每段有6位的4段，再为每段前面添加两个0。再将
阅读全文
摘要：就是对第三方应用的授权机制，使其获取用户的数据 数据所有者收到第三方请求授权后，告诉系统通过第三方应用的请求，系统就会自动生成一个令牌（token），用来替代密码，供第三方应用使用。 令牌的特点 是短期有效的。因为获取了令牌就相当于获取了密码，所以需要保证安全性，用户也不能进行更改。 令牌可以被数据
阅读全文
摘要：AMD对于依赖的模块，是提前执行的，而CMD是延迟执行的，不过在requirejs2.0，AMD也支持延迟执行 AMD依赖前置，CMD依赖就近。 AMD在定义模块时就将依赖模块先写好，而CMD允许在要使用的时候再写入依赖模块，并且依赖于最近的模块 AMD的api是一对多的，比如require有全局r
阅读全文
摘要：AMD是浏览器端实现模块化的规范，实现了异步加载。通过require.js实现 定义无依赖的模块 define(function(){ ... return {模块} }) 定义有依赖的模块 define(['module1'..], function(m1..){ // 通过第一个参数将依赖的模块
阅读全文
摘要：父组件向子组件传值 在父组件的子组件标签上，绑定属性，将传递参数作为属性值 <Father><Son :money = 'money' /> </Father> 在子组件的props属性中，声明从父组件传来的值 props:['money'] 如果想要对传来的参数进行验证，有两种方式 验证参数类型:
阅读全文
摘要：什么是生命周期函数？ 从对象的创建到销毁的过程中，都会经过一系列执行性函数。可以在这些函数中对每个时间点添加事件。 Vue的生命周期函数有八个： beforeCreate 此时实例已初始化，但是其中只包含生命周期函数和默认事件。此时数据和方法还未初始化，el也未确定。 created 此时实例创建完
阅读全文
摘要：为什么出现哈希表？ 在之前的数据结构如数组、链表中，如果通过键值查找数据是很消耗内存的事，因为必须通过线性查找，对每一项进行遍历。而如果只是通过索引查找就会简单的多。因此哈希表就将键值与索引建立了联系。让我们通过某个键值，得到其索引，再通过索引很方便地查找某项数据。 怎么建立联系呢？ 当当当~哈希函
阅读全文
摘要：首先浏览器在自己的缓存中查找是否存在该域名的缓存，如果存在，返回相应IP地址 如果浏览器缓存中不存在，则去本机的hosts文件中查找是否有缓存 如果hosts文件中不存在，则在操作系统本地DNS服务器中查找 如果本地DNS服务器中不存在，向根DNS服务器发送解析请求，根DNS服务器对.com做出解析
阅读全文
摘要：电子邮件 解决了电话电报的两个缺点： 发送方和接收方必须同时在场 不是很紧迫的电话电报会打扰到对方 电子邮件过程： 发件人将邮件发送到自己使用的邮件服务器 发送人的邮件服务器根据目的地址将邮件发送到收件人的邮件服务器中 收件人在方便地时候访问自己的邮件服务器中自己的邮箱，查看收到的邮件 电子邮件的构
阅读全文
摘要：什么是函数柯里化？ 就是将一个多参数函数，转换为单一参数（原参数的第一个）的函数，并在其返回函数中传入余下参数、返回结果。 柯里化有哪些好处？ 参数复用 在以下柯里化函数中，只需要第一次传入正则表达式，后面只要是检测同一正则表达式就只需调用返回的函数 function check(reg){ ret
阅读全文
摘要：CSRF攻击的原理？ 当用户使用用户名和密码访问网站A，通过验证之后，网站A产生cookie信息返回给浏览器，之后在浏览器未关闭的情况下，用户就可以不需再次登录访问网站A了。 恶意网站就是钻了这个空子，诱导用户访问网站B 网站B收到请求后，返回一些恶意代码，要求访问网站A 浏览器由于存储了用户的co
阅读全文
摘要：什么是非对称加密？ 非对称加密是指给数据加密和解密用的不是相同的密钥。密钥分为公钥和私钥。公钥是公开的，私钥只有一方拥有。可以通过公钥加密--私钥解密，也可以通过私钥加密--公钥解密 以一个例子来理解 阿深和小星想要进行通信，他们各自都有一套属于自己的公钥和密钥，并且由于公钥是公开的，所以也有对方的
阅读全文
摘要：META在网页上是不可见的，它提供了网页的元数据，但是在机器上是可读的。因此常用来进行SEO优化 下面首先介绍常见的META标签 META有两个属性：http-equiv和name属性 http-equiv 相当于http的作用，定义一些http参数 <meta http-equiv='' cont
阅读全文
摘要：什么是shadow DOM？ 将一组隐藏的、独立的DOM结构附加到某个元素上。比如在video元素的shadow DOM上，就隐藏了许多对视频控制的按钮和控制器等。 shadow host：一个常规的DOM节点，shadow DOM 会被附加到这个节点上 shadow tree：shadow DOM
阅读全文
摘要：当浏览器请求返回一个文档后，需要对其进行多个步骤的处理，才能正确渲染到页面上 HTML解析 解码：首先将二进制数据根据文件指定编码方式转换为字符串，也就是html代码 词法解析：将字符串分割成为一个个标签 语法解析：根据html代码规则，将标签进行解析，理解每个标签的含义 构建dom树：将之前生成的
阅读全文
摘要：浏览器基础结构主要包含七个部分： 用户界面：用户所看到的内容和与之交互的功能组件，比如按钮、表单等等 浏览器引擎：负责控制和管理下一级的渲染引擎 渲染引擎：解析用户请求的内容并返回 网络：负责处理网关相关事宜，比如http服务 UI后端：负责绘制一些提示框等UI组件，底层使用的是操作系统的用户接口
阅读全文
摘要：什么是粘包和拆包? 当发送包同时发送两个数据包时，接收包只收到了一个数据包，其中包含了两个数据包的信息，这种现象为粘包。这种情况下，接收方无法分清两个数据包的界限，很难处理 当发送包同时发送两个数据包时，接收方也收到了两个数据包。但是这两个数据包，一个是不完整的，一个是多出来一块，这种现象为拆包。
阅读全文
摘要：客户端建立连接和关闭连接的状态流程 CLOSED --> SYN_SEND --> ESTABLISHED --> FIN_WAIT_1 --> FIN_WAIT_2 --> TIME_WAIT --> CLOSED 服务端建立连接和关闭连接的状态流程 CLOSED --> LISTEN --> S
阅读全文
摘要：慢开始与拥塞避免算法（TCP Tahoe版本） 在分析慢开始和拥塞避免进行拥塞控制之前，需要先了解几个变量 慢开始门限值、拥塞窗口、发送窗口。发送窗口的值等于拥塞窗口的值，当拥塞窗口值小于慢开始门限值时，采用慢开始算法；当拥塞窗口值等于慢开始门限值时，可以采用慢开始算法或者拥塞避免算法；当拥塞窗口值
阅读全文
摘要：当建立了TCP连接后，接收方会根据自己的窗口大小对发送方进行流量控制。以实现对发送方发送速率的控制，使接收方可以接收到。 下面假设A方为发送方，B方为接收方。A方有1-900子节的数据，每100位放到一个子节段 首先B方向A方发送一个rwnd包，其中包含其窗口大小300 此后A方可以在收到确认之前，
阅读全文
摘要：以第一个数值进行分类 1xx 返回信息，服务端收到请求，需要客户端继续执行操作 100 客户端应继续其请求 101 切换协议，服务端根据客户端的请求切换协议，只能切换到更高级的协议 2xx 成功，请求被成功接收并处理 200 请求成功，一般用于get或post请求 201 已创建，成功请求并创建了新
阅读全文
摘要：实际上就是一系列的协议，根据功能人为的分成了七层，也可以分为五层、四层。 先后关系 物理层 -- 数据链路层 -- 网络层 -- 传输层 -- 会话层 -- 表示层 -- 应用层 物理层 计算机之间的通信，必须有底层物理层面的连通。中间传输的是电信号，也就是二进制传输。为启动、关闭和维护物理链路定义
阅读全文
摘要：在浏览器的事件中，包含宏任务和微任务。宏任务有：setImmediate,setTimeOut,setInterval,I/O,requestAnimationFrame,UI rendering，微任务有：promise,process.nextTick,Object.observe,Mutati
阅读全文
摘要：在js中存在一个history接口，其允许我们对浏览器访问历史进行操作 属性 history.length 只读属性，返回历史记录中元素的数目 方法 histoty.go() 跳转到相对于当前访问历史的位置，为正数时，参数为历史记录中排在当前记录之后的某条记录；为负数时，参数为历史记录中排在当前记录
阅读全文
摘要：直接通过form提交，直接method 通过ajax提交，将表单数据当做请求数据发送 当提交的表单中包含文件时，需要将form的encType设置为multipart/form-data
阅读全文
摘要：DOM2事件流 事件捕获阶段 处于目标阶段 事件冒泡阶段 事件捕获 当触发某个元素的事件时，会从顶层对象document发出一个事件流，随着dom树向目标元素节点流去，直到找到目标节点才停止。在捕获阶段，该事件的处理函数不会执行。 处于目标阶段 当到达目标元素时，触发相应事件，执行相应处理函数。 事
阅读全文
摘要：对于基本类型的数据，深拷贝与浅拷贝都相同，都是开辟一块新的空间，将数组赋值存入。旧值的改变不会影响新值，然鹅对于引用类型的数据就不相同了。 浅拷贝 对于引用类型的数据实行浅拷贝，当旧值发生改变时，新值也会改变，这是因为浅拷贝仅仅只是在栈中新开辟一块空间，将旧值存在栈中的指针复制给新值，新旧值指向的是
阅读全文
摘要：在通过new关键字创建对象时，分别做了一下几个步骤 创建一个空对象 改变构造函数中的this指向，使其指向空对象 执行构造函数中的代码（为空对象赋予属性和方法） 返回这个对象 而具体上，可以通过代码模拟实现 function Base() { } var obj = new Base(); // 创
阅读全文
摘要：prototype 每一个函数对象，都有一个prototype属性，这个属性指向函数对象的原型 funtion Person(name){ this.name = name } Person.prototype.age = 20; var per1 = new Person('ashen'); va
阅读全文
摘要：this指向问题 在普通函数中，this指向根据其使用场景不同改变。而箭头函数中的this始终指向其父级作用域 箭头函数不能作为构造函数 var Person = p => { this.name = p; } 此时的this并不是指向实例对象，而是指向父级作用域，指向window，所以不能作为构造
阅读全文
摘要：extends class Point { } class ColorPoint extends Point { } 通过extends关键字，实现子类对父类的继承 但是在继承父类时，必须使用super关键字，调用父类的构造方法，首先生成一个父类的this对象，得到与父类相同的属性或方法，再对其进行
阅读全文
摘要：class Point{ constructor(x, y){ this.x = x; this.y = y; } tostring(){ return '(' + this.x + ', ' + this.y + ')'; } } 在以上代码中，constructor就是构造方法，this关键字就
阅读全文
摘要：什么是async函数？ Generator的语法糖，让异步操作变得更加方便 const asyncFunc = async funtion(){ const f1 = await readFile('./a.txt') const f2 = await readFile('./b.txt') con
阅读全文
摘要：什么是生成器？ ES6的新语法，并不直接执行逻辑，而是生成一个对象--迭代器，通过调用这个对象的next()方法，来一步步向后走。执行完一个yield关键字就会停止，等待下一次next()调用。 funtion* myLogin(){ yield 2; yield 5; return 10; }va
阅读全文
摘要：什么是迭代器？ 统一的遍历数据的方式。 首先获取到迭代器的指针，初始时这个指针指向的是第一条数据之前。通过调用指针的next()方法，使指针指向下一条数据。每一个next()都会返回一个对象，其中包含两个属性，value表示想要获取的值，done是个布尔值，false表示当前指针指向有值，true表
阅读全文
摘要：promise通常用来解决回调地狱的问题，但也有几个不可忽视的缺点 promise一旦新建就会立即执行，无法中途取消 当处于pending状态时，无法得知当前处于哪一个状态，是刚刚开始还是刚刚结束 如果不设置回调函数，promise内部的错误就无法反映到外部 promise封装ajax时，由于pro
阅读全文
摘要：什么是高阶函数？ 接收一个函数作为参数的函数 常见的高阶函数 reduce() 接收一个函数作为累加器，从左到右数组中的值依次缩减，最后累加成一个数 语法： reduce(funtion(total, currentNum, currentIndex, arr){}, initial) total:
阅读全文
摘要：每种方式的不同在于this的指向 作为函数直接调用 funtion func(a, b){ console.log(a + b); } func(1, 2) 以上的函数是属于全局对象的函数，在html中此函数是属于html全局对象的，在window中此函数是属于window全局对象的。 因此，在浏览
阅读全文
摘要：什么是闭包？ var local = 10; funtion foo(){ console.log(local) } 其实上面的代码，就表示一个闭包。也就是：函数，以及函数内部能访问到的变量的集合 但通常情况下使用闭包时，是使用函数嵌套函数实现的，如下 funtion foo(){ var loca
阅读全文
摘要：IE浏览器 Trident内核 chrome浏览器 之前的webkit内核，现在是blink Opera浏览器 最开始是自己的Presto，后来是webkit，又跟随chrome变为blink firefox浏览器 Gecko safari浏览器 webkit内核
阅读全文
摘要：为元素（通常是图片）设置可视效果，可以理解为设置了一层滤镜 其中包括多种设置，如灰度，对比度，亮度，透明度等 注意：不支持IE浏览器
阅读全文
摘要：什么是Grid布局？ 将网页分为一个个网格，对网格进行不同的操作，实现不同的效果 容器 采用网格布局的区域 项目 网格内部采用网格定位的元素，称为项目。项目只能是容器的顶层子元素 行和列 容器中的水平区域称为行row，垂直区域称为列column 单元格 行和列的交叉区域，称为单元格cell 网格线
阅读全文
摘要：什么是flex？ 页面元素弹性布局，当设置父元素display:flex后，内部的float、clear、vertical-align都会失效 可以为块级元素设置：display:flex；也可以为行内元素设置：display:inline-flex flex布局中的项目称为flex-item fl
阅读全文
摘要：伪类 用于给某些选择器添加特定的效果 css中的伪类有 :link 未访问的链接 :hover 鼠标移到链接上 :active 选定的链接 :visited 已访问的链接 :focus 获得焦点的元素 :first-child 第一个子元素 :lang 选定lang属性为指定值的元素 :lang(o
阅读全文
摘要：通过<meta>配置vieport，实现响应式布局 也是移动端的通用适配方案 网页宽度与PC端一致 网页缩放比例与PC端一致 不允许用户自行缩放 viewport 由浏览器承载 套在网页的外层，但是是隐藏的 当把网页放在移动端进行显示时，viewport会把网页进行等比例缩放，适应移动端的设备大小
阅读全文
摘要：语义化标签是什么？ 语义化标签是HTML5的新特性，让标签有自己的含义。 优点 使代码结构清晰，有利于团队开发。 便于各种设备解析，如屏幕阅读器等，以语义的方式渲染页面 利用搜索引擎优化 常见的语义化标签 <title>：页面主体内容。 <hn>：h1~h6，分级标题，<h1> 与 <title>
阅读全文
摘要：BFC和IFC 都是针对Box设计的formating content css渲染时以box为基本单位，box的类型由元素的类型和display的值决定。box分为block-level box和inline-lever box formating content：不同渲染区域遵循的规则 BFC--
阅读全文
摘要：在更改样式时，尽量更改class样式名，而不是直接更改css样式属性 避免使用table布局 尽可能少使用行内样式 尽量在DOM树末端改变样式，改变子节点 在实现动画时，使用position的absolute和fixed
阅读全文
摘要：TCP可以保证数据按序发送，按序到达，提供超时重传，保证可靠性；而UDP不保证按序到达，甚至不保证到达，只是努力交付 TCP是有连接的，传输数据之前必须进行三次握手进行连接，传输完毕也要通过四次挥手断开连接；而UDP是直接传输 TCP协议是一对一的；而UDP可以是一对一、一对多、多对多 TCP协议所
阅读全文
摘要：基本数据类型的数据，当改变时，是指针指向的改变；而引用数据类型的数据改变时，是值的改变 基本数据类型存储在内存的栈中；引用数据类型存储在内存的栈和堆中 基本数据类型进行比较时，是比较值；而引用数据类型比较时，是 比较指针的指向 基本数据类型不可以添加属性和方法，引用数据类型可以 将一个基本数据类型的
阅读全文
摘要：== 在比较两个数据是否相等时，如果数据类型不同，会先进行隐式类型转换再比较 在比较两个数据时，必须数据类型和数值完全相同才返回true Object.is 返回两个数据是否相等的布尔值 比较数据时，是比较指针的指向，而不只是比较值是否相等 var str1 = "ashen"; var str2
阅读全文
摘要：在ES5中，通过defineProperty()进行监听 假设对user对象的name属性进行监听，当设置name属性值时，会执行相应的函数 Object.defineProperty(user, 'name', { set : funtion(value){ name = value; conso
阅读全文
摘要：js中的字符串、数组、对象，当创建时都被分配了内存，在不需要的时候应该释放其内存，以便后面创建新的变量 标记清除法 将所有内存中的变量都添加标记，然后将环境变量、环境变量中引用到的变量删除标记，最后释放有标记的变量的内存 进入环境的变量都不能释放内存 引用计数法 如果在内存中声明了某个变量，并将某个
阅读全文
摘要：在使用web网页时，如果高频率的触发某一事件，比如拉滚动条，有可能造成页面抖动问题 防抖：在一定时间内，规定允许事件触发的次数 通过设置定时器，触发事件。在定时器首部，会首先清除之前的定时器，以达到规定时间内只能触发一次。如果此时上一次定时器还没有达到指定时间，又创建了新的定时器，之前的定时器就会被
阅读全文
摘要：Ajax的浏览器缓存问题 当通过Ajax请求页面后，只要用户不主动刷新页面，数据就不会更新 当请求的URL与历史URL相同时，会直接使用缓存中的数据 这样就无法在不刷新的情况下读取最新的数据 解决方式： 在创建发送请求前加上，anyAjaxObj.setRequestHeader('If-Modif
阅读全文
摘要：什么是sql注入？ 用户通过输入参数拼接形成sql查询语句，使用户可以控制sql查询语句 防御方法： 绑定变量，使用预解析语句 检查变量数据类型和格式 过滤特殊符号 什么是xss漏洞？ 通过向web页面插入一段恶意脚本代码，用户访问web页面时，会执行这段脚本代码，某些恶意信息可能会被存储到数据库中
阅读全文
摘要：HTML5 WebSocket 允许服务端主动向客户端发送数据 浏览器和服务器只需完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输 节省服务器资源和带宽，实现更实时的通讯 创建websocket 第一个参数为目标路径 第二个参数为可选参数，可以是字符串或数组，用来表示子协议，这样
阅读全文
摘要：首先选取一个基准值，再分别将数组中的数据与基准值进行比较，如果大于基准值，放入右边的空数组中，如果小于则放入左边的空数组中； 再对左边数组和右边数组重复以上的操作 function quicksort(arr) { if (arr.length<=1) { return arr; } // 取出中间
阅读全文
摘要：session 为了解决在多个请求的页面之间的关联，让多个页面都能读取到某个信息，存在于服务端 运行机制： 首先如果通过session.start()开启session后，此时会自动生成session_id，用来标识此次是哪个用户在访问 同时会自动向cookie中写入一个名为PHPSESSID的变量
阅读全文
摘要：浏览器缓存 缓存位置 Service Worker 运行在浏览器背后的独立线程 涉及到请求拦截，所以必须使用HTTPS传输协议 不同点：可以让我们自由控制缓存哪些文件，如何匹配缓存，如何读取缓存，并且缓存是持续性的 工作流程： 注册Service Worker 监听install事件，缓存需要的文件
阅读全文
摘要：HTTP1.x、HTTP2、HTTPS HTTP1.0 短暂的连接：浏览器和服务端只保留短暂的连接，浏览器的每次请求都需要与服务器建立一个TCPL连接，三次握手成本高，服务器完成请求处理后立即断开TCP连接，服务器不跟踪每个客户也不记录过去的请求 解决方案： 添加头信息 非标准的Connection
阅读全文
摘要：TCP的三次握手（建立连接）和四次挥手（关闭连接） 什么是窗口？ 当建立连接后，两端都会创建一个缓冲区来存储接收的数据，并将缓冲区的尺寸发送给另一端，其中包含了自己的缓冲区的剩余尺寸。窗口就是剩余缓冲区空间的数量。 tcp标志位 SYN(synchronous)建立连接 ACK(acknowledg
阅读全文
