前端工程师面试知识库：其他

2018-09-1610:48:20WEB前端开发Comments1,990 views字数 3239阅读模式

其他

URL到界面显示发生了什么

DNS解析先本地缓存找，在一层层找将常见的地址解析成唯一对应的ip地址基本顺序为：本地域名服务器->根域名服务器->com顶级域名服务器依次类推下去,找到后记录并缓存下来如www.google.com为
. -> .com -> google.com. -> www.google.com.
TCP连接三次握手，只要没收到确认消息就要重新发
1. 主机向服务器发送一个建立连接的请求（您好，我想认识您）；
2. 服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
3. 主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。
发送HTTP请求浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。https默认请求端口443， http默认80。常见的http请求如下

POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley
第一部分：请求行，第一行说明是post请求，以及http1.1版本。
第二部分：请求头部，第二行至第六行。
第三部分：空行，第七行的空行。
第四部分：请求数据，第八行。
4. 服务器处理请求并返回HTTP报文
后端处理返回http报文如下
复制代码

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8

<html>
      <head></head>
      <body>
            <!--body goes here-->
      </body>
</html>
第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）
第二行和第三行为消息报头，
Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8
第三部分：空行，消息报头后面的空行是必须的
第四部分：响应正文，服务器返回给客户端的文本信息。
空行后面的html部分为响应正文。
复制代码

浏览器解析渲染页面

通过HTML解析器解析HTML文档，构建一个DOM Tree，同时通过CSS解析器解析HTML中存在的CSS，构建Style Rules，两者结合形成一个Attachment。
通过Attachment构造出一个呈现树（Render Tree）
Render Tree构建完毕，进入到布局阶段（layout/reflow），将会为每个阶段分配一个应出现在屏幕上的确切坐标。
最后将全部的节点遍历绘制出来后，一个页面就展现出来了。遇到script会停下来执行，所以通常把script放在底部

连接结束

组件封装

目的：为了重用，提高开发效率和代码质量注意：低耦合，单一职责，可复用性，可维护性常用操作：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

分析布局
初步开发
化繁为简
组件抽象

JS异步加载

动态生成script标签
添加h5的async defer属性，前者乱序不适合依赖性加载
async 是“下载完就执行”， defer 是“渲染完再执行”

css与js动画差异

css性能好
css代码逻辑相对简单
js动画控制好
js兼容性好
js可实现的动画多
js可以添加事件

负载均衡

多台服务器共同协作，不让其中某一台或几台超额工作，发挥服务器的最大作用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

http重定向负载均衡：调度者根据策略选择服务器以302响应请求，缺点只有第一次有效果，后续操作维持在该服务器
dns负载均衡：解析域名时，访问多个ip服务器中的一个（可监控性较弱）
反向代理负载均衡：访问统一的服务器，由服务器进行调度访问实际的某个服务器，对统一的服务器要求大，性能受到服务器群的数量

CDN

内容分发网络，基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

内存泄漏

定义：程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题 js中可能出现的内存泄漏情况结果：变慢，崩溃，延迟大等原因：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

全局变量
dom清空时，还存在引用
ie中使用闭包
定时器未清理
子元素存在引起的内存泄露

避免策略：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；
注意程序逻辑，避免“死循环”之类的；
避免创建过多的对象原则：不用了的东西要及时归还。
减少层级过多的引用

babel原理

ES6、7代码输入 -> babylon进行解析 -> 得到AST（抽象语法树）-> plugin用babel-traverse对AST树进行遍历转译 ->得到新的AST树->用babel-generator通过AST树生成ES5代码、文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

promise

特性：Promise 对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止，也即是说，错误总会被下一个catch语句捕获文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

js自定义事件

三要素： document.createEvent() event.initEvent() element.dispatchEvent()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4708.html

demo:
(en:自定义事件名称，fn:事件处理函数，addEvent:为DOM元素添加自定义事件，triggerEvent:触发自定义事件)
window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEvent("test",function(){console.log("handler1")});
    demo.addEvent("test",function(){console.log("handler2")});
    demo.onclick = function(){
        this.triggerEvent("test");
    }
}
Element.prototype.addEvent = function(en,fn){
    this.pools = this.pools || {};
    if(en in this.pools){
        this.pools.push(fn);
    }else{
        this.pools = [];
        this.pools.push(fn);
    }
}
Element.prototype.triggerEvent  = function(en){
    if(en in this.pools){
        var fns = this.pools;
        for(var i=0,il=fns.length;i<il;i++){
            fns[i]();
        }
    }else{
        return;
    }
}
复制代码

es6模块 commonjs amd cmd

CommonJS 的规范中，每个 JavaScript 文件就是一个独立的模块上下文（module context），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。
CommonJS是同步加载模块,在浏览器中会出现堵塞情况，所以不适用
AMD 异步，需要定义回调define方式
es6 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量
es6还可以导出类、方法，自动适用严格模式