Larmy Blog

事件循环机制首先，JavaScript是一门单线程语言，在一个时间上只能做一件事情 那么我们我们可能有很多个事情（任务）需要去完成，这时候，JavaScript就把我们要完成的任务放在了任务队列，并且分为了同步任务和异步任务 任务队列所有任务都可以分为同步任务和异步任务。同步任务就是我们要立即执行的任务，一般会直接进入主线程执行。异步任务，就是可以异步执行的任务，比如网络资源请求，setTimeout这些，会通过任务队列( Event Queue )的机制来进行协调 同步任务进入主线程，异步任务进入任务队列。当主线程内的所有任务执行完毕后，会去任务队列里读取相应的任务推入主线程执行，这就是我们常说的Event Loop（事件循环） 每次事件循环关键步骤如下图所示： 首先判断JS是同步还是异步,同步就进入主线程,异步就进入event table 异步任务在event table中注册函数,当满足触发条件后,被推入event queue 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中 宏任务主要包含：s ...

为了能够使浏览器和服务器通信，浏览器和服务器之间通过三次握手，来建立TCP连接。通过四次挥手，来结束TCP连接。 三次握手 过程 客户端主动向服务端发起请求（准备开始进行第一次握手） 客户端向服务器发起TCP连接请求报文，请求报文中将同步位SYN置为1，随机生成一个序列号seq（第一次握手） 服务器收到请求后发回一个确认报文，确认报文中同步位SYN和确认位ACK置为1，随机生成一个序列号seq和返回确认编号ack（第二次握手） 客户端收到服务器的确认报文后，返回给服务器一个确认报文，将确认位ACK置为1，seq为第一次握手随机生成的x+1，ack为服务器确认报文的序列号+1y+1（第三次握手） 双方开始通信 大白话 客户端想要发送数据，告诉服务器他想要建立TCP连接（第一次握手），服务器收到请求后，和客户端说你可以发送数据（第二次握手），客户端得到服务器的确认后和服务器说那我要开始发送数据了（第三次握手），然后双方愉快的开始通信 为什么需要三次握手 第一种说法 确保服务器和客户端都知道对方的序列号还让他们双方都互相知道对方知道，第一次握手是服务器知道客户端的序列号，第二次握手是客户 ...

ajax 的 readyState 有哪几个状态，含义分别是什么？ 0未初始化状态 创建了一个XMLHttpRequest对象 1准备发送状态 已经使用了XMLHttpRequest.open()方法，已经准备好一个请求发送到服务器端 2已经发送状态 已经通过send()方法发送请求，但是还没有得到响应 3正在接受状态 已经接受到服务器端返回的http响应，但还有部分消息体没有接收到 4完成响应状态 已经完成了HTTP响应的接收

URL到整个页面加载完毕显示在屏幕上的整个流程 输入地址 浏览器查找域名的IP地址 浏览器向web服务器发送一个http请求 服务器的永久重定向响应 浏览器跟踪重定向地址 服务器处理请求 服务器返回一个Http响应 浏览器显示HTML 浏览器发送请求获取嵌入在HTML中的资源（图片、音频、视频、css、js等） 1.输入地址当我们输入网站地址的时候，浏览器就开始智能匹配的url，他会从我们的历史记录，书签等地方去查询我们可能会输入的url，然后显示出来 2.浏览器查找域名的IP地址 请求一旦发起，浏览器首先解析这个域名，一般先查看本地的hosts文件，如果有和查找域名相对应，就直接返回hosts文件里的ip地址 如果没有在hosts文件里面找到对应的ip地址，浏览器就发请求本地的DNS服务器（本地的DNS服务器一般是网络接入服务器供应商提供，比如中国电信和中国移动） DNS请求到达本地DNS服务器后，本地DNS服务器先递归查询自己的缓存，如果缓存里有该记录，则直接返回结果。如果没有，需要向DNS根服务器查询 根DNS服务器并没有记录具体的域名和IP地址对应关系，而是告诉本地DNS服务 ...

前端性能优化前端性能优化分为页面级优化，代码级优化 页面级优化 减少HTTP请求 合理使用缓存 资源合并压缩，例如将CSS和JS进行压缩 合并CSS图片生成精灵图 适当使用缓加载，不一定能减少HTTP请求，但是可以减少在同一时刻的http请求，减少占用带宽资源 将外部脚本置底部 浏览器加载js时会将整个页面挂起，当js加载完成后才回去加载后续的资源，如果加载的js过大，就会导致用户等待时间过长 将CSS放到HEAD中 代码级别优化JS 减少DOM操作 会涉及到重排和重绘 减少+=字符串拼接，可以使用join()方法合并 CSS 减少使用CSS选择符，因为要遍历其祖先节点 IMG 图片压缩

XMLHttpRequest、JSONP的适用场景 XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。ajax就是基于XMLHttpRequest来发送数据的，支持get和post请求 ，一般用于非跨域场景，如果需要跨域，需要配置cors头。而JSONP常用于跨域场景，仅支持get请求，同时服务器也要支持jsonp请求 XMLHttpRequest异常判断通过http状态码和readyStatus来判断，JSONP的异常判断通过onerror事件和timer来判断

JavaScript是单线程语言，前面的任务没做完，后面的任务只能等着。web worker可以为JavaScript创建多线程环境，好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。 Web Worker 有以下几个使用注意点。 （1）同源限制 分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。 （2）DOM 限制 Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。 （3）通信联系 Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。 （4）脚本限制 Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。 （5）文件限制 Worker 线程无法读取本地文件，即不能打开本机的文件系统（file:&#x ...

HTTPRequest和JSONP之间的区别 HTTPRequest是浏览器内部封装好的

BFC 定义 BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。 如何创建BFC 1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、 ...

在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题： 第一个：串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输） 第二个：连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。 HTTP/2的多路复用就是为了解决上述的两个性能问题。在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。多路复用，就是在一个 TCP 连接中可以存在多条流 ...