欢迎来到我的小站

JS 中 this 的五种情况 作为普通函数执行时，this指向window。 当函数作为对象的方法被调用时，this就会指向该对象。 构造器调用，this 指向返回的这个对象。 箭头函数 箭头函数的 this 绑定看的是this 所在函数定义在哪个对象下，就绑定哪个对象。如果有嵌套的情况，则 this 绑定到最近的一层对象上。 基于 Function.prototype 上的 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。apply 接收参数的是数组，call 接受参数列表，bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new `时会被改变，其他情况下都不会改变。若为空默认是指向全局对象 window。 原型 && 原型链原型关系： 每个 class 都有显示原型 prototype 每个实例都有隐式原型 _ proto_ 实例的 proto 指向对应 class 的 prototype ‌ 原型:   在 JS 中，每当定义一个对象（函数 ...

JS JS垃圾回收机制 项目中，如果存在大量不被释放的内存（堆/栈/上下文），页面性能会变得很慢。当某些代码操作不能被合理释放，就会造成内存泄漏。我们尽可能减少使用闭包，因为它会消耗内存。 浏览器垃圾回收机制/内存回收机制: 浏览器的Javascript具有自动垃圾回收机制(GC:Garbage Collecation)，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存 标记清除:在js中，最常用的垃圾回收机制是标记清除：当变量进入执行环境时，被标记为“进入环境”，当变量离开执行环境时，会被标记为“离开环境”。垃圾回收器会销毁那些带标记的值并回收它们所占用的内存空间。谷歌浏览器：“查找引用”，浏览器不定时去查找当前内存的引用，如果没有被占用了，浏览器会回收它；如果被占用，就不能回收。IE浏览器：“引用计数法”，当前内存被占用一次，计数累加1次，移除占用就减1，减到0时，浏览器就回收它。 优化手段：内存优化 ; 手动释放：取消内存的占用即可。（1）堆内存：fn = null 【null：空指针对象】（2）栈内存：把上下文中，被外部占用的堆的占用取消即可。 ...

JS 中的数据类型检测方案 typeof 123456789101112console.log(typeof 1); // numberconsole.log(typeof true); // booleanconsole.log(typeof 'mc'); // stringconsole.log(typeof Symbol) // functionconsole.log(typeof Symbol()); // symbolconsole.log(typeof function(){}); // functionconsole.log(typeof console.log()); // undefinedconsole.log(typeof []); // objectconsole.log(typeof {}); // objectconsole.log ...

页面布局 Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 Flex 是 Flexible Box 的缩写，意为”弹性布局”,用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。 容器的属性： flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse; flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse; flex-flow： .box { flex-flow: || ; } justify-content：对其方式，水平主轴对齐方式 align-items：对齐方式，竖直轴线方向 align-content 项目的属性（元素的属性）： order 属性：定义项目的排列顺序，顺序越小，排列 ...

CSS 盒子模型position 属性的值有哪些及其区别固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。默认定位 Stat ...

HTML5 新特性、语义化概念： HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】 语义化标签： header nav main article section aside footer 语义化的优点: 在没CSS样式的情况下，页面整体也会呈现很好的结构效果 代码结构清晰，易于阅读， 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重 CSS 选择器及优先级选择器 id选择器(#myid) 类选择器(.myclass) 属性选择器(a[rel=”external”]) 伪类选择器(a:hover, li:nth-child) 标签选择器(div, h1,p) 相邻选择器（h1 + p） 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*) 优先级： !important 内联样式（1000） ID选择器（0100） 类选择器/属性选择器/伪类选择器（0010） 元素选择器/伪元素选择器（0001） 关系选择器/通配符 ...

说下进程、线程和协程进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。进程是一种抽象的概念，从来没有统一的标准定义。线程是程序执行中一个单一的顺序控制流程，是程序执行流的最小单元，是处理器调度和分派的基本单位。一个进程可以有一个或多个线程，各个线程之间共享程序的内存空间(也就是所在进程的内存空间)。一个标准的线程由线程ID、当前指令指针(PC)、寄存器和堆栈组成。而进程由内存空间(代码、数据、进程空间、打开的文件)和一个或多个线程组成。协程，英文Coroutines，是一种基于线程之上，但又比线程更加轻量级的存在，这种由程序员自己写程序来管理的轻量级线程叫做『用户空间线程』，具有对内核来说不可见的特性。 进程和线程的区别与联系【区别】：调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位；并发性：不仅进程之间可以并发执行，同一个进程的多个线程之间也可并发执行；拥有资源：进程是拥有资源的一个独立单位，线程不拥有系统资源，但可以访问隶属于进程的资源。系统开销：在创建或撤消进程时，由于系统都要为之分 ...

304过程 浏览器请求资源时首先命中资源的Expires 和 Cache-Control，Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效，可以通过Cache-control: max-age指定最大生命周期，状态仍然返回200，但不会请求数据，在浏览器中能明显看到from cache字样。 强缓存失效，进入协商缓存阶段，首先验证ETagETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。服务器根据客户端上送的If-None-Match值来判断是否命中缓存。 协商缓存Last-Modify/If-Modify-Since阶段，客户端第一次请求资源时，服务服返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间。再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。 重温八股文-浏览器的缓存机制 强制缓存 && 协商缓存 浏览器与服 ...

重温八股文-浏览器重绘与重排重排/回流（Reflow）：当 DOM 的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变 单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分重排和重绘代价是高昂的，它们会破坏用户体验，并且让 UI 展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。 『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。 如何触发重排和重绘？任何改变用来构建渲染树的信息都会导致一次重排或重绘： 添加、删除、更新DOM节点 通过display: none隐藏一个DOM节点-触发重排和重绘 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化 移动或者给页面中的DOM节点添加动画 添加一个样式表，调整 ...

重温八股文-从输入URL到页面加载的全过程 首先在浏览器中输入URL 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求； 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的DNS查询缓存)； 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存； ISP缓存：若上述均失败，继续向ISP搜索。 DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。 建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接 发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器 关闭TCP连接：通过四次挥手释放TCP连接 ...