幻尘の屋

BFC小结之前并没有系统地了解过什么是BFC以及它有什么作用，学习之后才发现以前遇到的很多问题都是可以使用BFC解决的 什么是BFC W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为”visiable”的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文） 我们常说的文档流其实分为定位流、浮动流和普通流三种，而普通流其实就是指BFC中的FC FC是formating context的缩写，也就是格式化上下文，决定了其子元素如何布局以及与其他元素之间的关系 常见的FC有BFC（块级格式化上下文）、IFC（行级格式化上下文）、GFC（网格布局格式化上下文）和FFC（自适应格式化上下文） BFC是通过一些特定的属性设置而使元素脱离普通流的束缚形成完全独立的区域，且内部元素与外部元素不会产生相互影响 BFC的触发条件BFC的触发条件有下列几种： 根元素，即HTML元素 浮动元素： f ...

我所理解的JavaScript的深浅拷贝这并不是我第一次接触这个话题，但是这是我第一次深入地对javaScript的深浅拷贝机制进行学习 数据类型我们都知道javaScript拥有很多数据类型我们将他们分为两种： 基本数据类型 引用数据类型 基本数据类型包括：String、Number、Boolean、undefined、null、symbol(es6) 引用数据类型包括：Object(对象)、Array(数组)、Function(函数) 对于基本数据类型来说，变量直接按值存放在栈内存的简单数据段中，可以直接进行访问，因此并不存在深浅拷贝的区别， 引用类型存放在堆内存中，变量保存的是一个指针，当我们需要访问引用类型的值的时候，首先从栈中获得该对象的地址指针，然后从堆中取得需要的数据 浅拷贝什么是浅拷贝？ 答： 浅拷贝就是只复制了引用，而没有复制真正的值，浅拷贝会使两者指向同一块内存空间 使用=进行浅拷贝是我们做常用的操作 123456789101112131415161718const originArray = [1,2,3,4];const originObj = { ...

防抖与节流第一次接触防抖与节流的概念是在一次面试中，但是当时并没有觉得防抖与节流很重要，知道后来学习vue做项目的时候才明白，防抖与节流能够有效地节省浏览器资源，因此更加深入地学习了防抖与节流的知识 函数防抖 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 在一个页面中我们会发现点击一次↓键会触发很多次scroll事件，如果我们在scroll事件中添加对是否显示回到顶部按钮条件的判定，那么这时会消耗大量的浏览器资源，做很多无用功，此时我们就需要防抖函数的出场了 我们提出这样一种设想： 当我们触发第一次scroll事件时启动一个延时函数，如果延时时间内再次触发了scroll事件，那么此时我们重新开始计时，直到延时时间内没有再次触发该事件然后再执行事件对应的函数 1234567function debounce(fn, deplay = 1000) { let timer = null; return () => { if(timer) clearTim ...

javaScript的执行机制（Event-Loop）对于一个前端工程师来说，理解js的执行机制是一件至关重要的事情 123456var a = 10;var b = 20;console.log(a);console.log(b);//输出： 10 20 当我们接触到这样的代码，我们心情舒畅，因为一眼就可以看出我们应该先执行那个步骤，再执行哪个步骤，随后我们根据需求添加了定时器 1234567var a = 10;var b = 20;setTimeout(() => { console.log(a);}, 1000);console.log(b);// 20 10 我们遇到了小小的麻烦，执行过程需要考虑定时器的使用，这还算可以接受，但是随着需求增加我们使用定时器，async，promise等等异步操作的次数也会越来越多，我们会觉得执行更加复杂，甚至心态爆炸，因此我们必须理解js的执行机制，才能有效解决这个难以处理的问题 javaScript的事件循环我们总会听到js是一门单线程语言，虽然随着语言的发展，技术大牛们也在探索多线程的发展，但是至今为止所有的类 ...

浏览器的重绘与回流这是我在之前面试中遇到的一个问题，今天回想起来正好做一个总结 浏览器在将页面展示给我们之前都做了什么（渲染机制）这其实也是我遇到的一道面试题，与重绘和回流息息相关 用户输入网址 浏览器通过DNS获取网站的IP地址 浏览器尝试与服务器建立连接 服务器发送永久重定向 浏览器跟踪重定向地址 服务器处理请求 服务器发送HTML响应 浏览器接收响应，开始解析 解析html文件，处理并创建DOM树 解析css样式表， 构建CSSOM树 将DOM与CSSOM进行结合，构建渲染树(Render Tree) 根据渲染树来布局(layout)，计算每一个节点的位置 调用GPU进行绘制(Paint)，合成图层 重绘(repaint)与回流(reflow) 当html解析遇到script时会暂停构建DOM，执行js脚本，执行完毕后才会继续构建DOM树，因此将js文件放在html文件底部进行加载才会节省加载时间，加快绘制速度 浏览器使用流式布局 (Flow Based Layout)，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次 ...

JavaScript – this的使用 通过阅读MDN和各类博客复习了一下javascript中this的使用方法，之后也会继续补充相关内容 什么是this在传统的面向对象语言中this关键字指代了当前对象本身，或者是当前对象的一个实例，通过使用this可以对其中方法与属性进行调用 在javascript中this的指向是临时决定的，而不是在创建时决定的，大多数情况下函数的调用方式决定了this的指向 全局环境中的this无论是否处于严格模式下，在全局环境中this都唯一指向全局对象window（浏览器下） 12345console.log(this === window); //true var a = 3;console.log(a); //3console.log(this.a) //3 函数环境中的this直接调用 在非严格模式下直接调用函数，则函数中的this指向全局 在严格模式下调用函数，则此函数中的this会被赋值为undefined 非严格模式 12345function foo() { return this;}console.log ...

Vue学习笔记 – Vue的响应式原理 这是Vue官网中提供的响应式原理示意图，总结起来我们最常见到的响应式原理的答案就是： 使用Object.defineProperty将所有属性使用setter和getter进行劫持，在读取数据和写入数据时进行拦截处理 这是我自己总结的响应式流程：然而这只是响应式原理中的一小部分，下面时是我用自己的话总结的响应式原理： Vue的响应式原理是通过使用订阅者-发布者模式，配合Object.defineProperty将所有data中的属性进行写入与 获取的劫持，将每一个属性对应一个Dep对象，解析并存储某一属性所对应的vm实例，当属性值发生改变时，Watcher会通知该属性所关联的所有vm实例进行数据更新，者就是响应式的基本原理 一、什么是Object.definePropertyObject.defineProperty(obj, prop, descriptor)是js对象操作的常用api之一，他对应的三个参数分别是： 需要被定义属性的对象， 要定义或修改的属性，数据描述符或存取描述符 configurable当且仅当该属性的config ...

HTTP协议什么是HTTP协议 HTTP协议，全称超文本传输协议，属于网络结构OSI参考模型的“最上层”应用层，由请求与响应构成，是无状态的协议。 HTTP占用默认端口号为80，可承载在TLS和SSL之上，通过加密、认证的方式实现数据传输，即HTTPS协议，默认端口443 HTTP1.0，HTTP1.1，HTTP2.0的特性与区别 HTTP1.1使用长连接，有效减少三次握手的开销 HTTP1.1允许只发送header信息不携带body，此时如果服务器认为客户端拥有权限，就会向客户端发送100，客户端接收100hou再向服务器发送 body信息 HTTP1.0没有host域HTTTP1.1才开始支持 HTTP1.x的致命缺陷： 协议规定客户端对同一域的并发连接只能由一个，而一个 页面至少需要加载40个资源 线头阻塞（Head of line blocking）同一个连接中的请求，需要一个一个的收发，效率太低 基于文本协议，请求与响应头信息非常大，无法进行压缩 只能单向请求，即服务端只能返回客户端的指定请求 HTTP2.0的特点：使用了多路复用、HOPACK头压缩、流+二进制 ...

面试开始比较戏剧性，我在调整设备时发现聊天室显示对方已经进入房间，我就点了接受面试邀请，面试官小哥哥也还没准备好，商量了一下，面试就这样开始了 面试官问我我先手写两个代码可以吗，当然同意了！ 数据结构 二叉树的中序遍历1234567891011121314151617181920212223242526272829303132333435363738394041424344class Node{ constructor(value){ this.value = value, this.left = this.right = null }}class BiTree{ constructor(){ this.root = null }}//递归写法let Order = (root) =>{ if(!root) return []; let arr = []; let traversal = (root) =& ...

修改简历之后本以为无望，结果9号突然收到了腾讯的面试邀请函，经过询问了解到，腾讯的简历机制是一个部门对你进行面试时会锁定你的简历，然后如果面试没通过就会放开简历，投入简历库，等其他部门来捞 废话少说，直接进入正题，下面列举我记下的面试时被问到的问题及之后查到的正确答案 计算机网络简述一下OSI参考模型物理层，数据链路层，网络层，传输层，会话层，表示层，应用层 http与https各自时属于哪一层的协议http是应用层协议，https是http+ssl协议所以属于网络层协议 了解状态码吗,403、502各自代表什么2xx是请求成功，3xx是重定向，4xx是客户端错误，5xx是服务器错误403是服务器接收请求但是拒绝处理，502是网关错误 JS相关什么情况下会引发内存泄漏当时回答了闭包，下面是后来查到的： 意外的局部变量 被遗忘的计时器或回调函数 闭包 脱离DOM的引用 什么是跨域问题，跨域问题源于什么策略，怎么解决跨域问题跨域问题是当协议，域名，端口其中任意一个不相同时引起的无法访问 跨域是由于浏览器的同源策略而产生的 解决方法： JSONP(动态创建script标签 ...