面试学习笔记(1)——前端工程师

这篇博客主要记录一些前端常考题目以及必要知识。

网络部分内容

这一部分主要是计算机网络中的内容，考察一些网络编程和通信的内容，需要对一些关键知识进行区分。

http和https的异同

http和https都是超文本传输协议，两者的区别主要在于安全性的考虑。

1. http基于TCP协议，承担WWW服务器到本地浏览器的信息传输，在传输过程中采用明文传输，不对传输信息做任何加密处理，https简单来讲，就是将http与SSL相结合，设置了SSL协议对http传输的数据进行了加密处理，安全性更高。
2. 端口也不同，http服务器默认是80端口，https默认是443端口。
3. https协议可以认证用户和服务器，确保数据发送到正确的客户机和服务器，可以进行加密传输和身份认证，虽然不是绝对安全的，但是也大大增加了中间人攻击的成本。
4. https的缺点在于：对开发者而言，需要ca证书，费用较高，对用户而言，更加费时费电。并且SSL证书需要绑定IP，然而不能再同一个IP上绑定多个域名。

WebSocket

WebSocket是HTML5中的协议，支持持久连接。
它基于http协议，借用http协议完成一部分握手，然后再通过附加属性来实现连接，可以持续传输数据，更快。

几个关键的http状态码

200：OK 请求成功。一般用于GET和POST请求。
204：No Content 无内容。服务器成功处理但是未返回内容。
301：Moved Permanently 永久移动。请求的资源已经永久移动到新的URL，返回信息包含新的URL，浏览器会自动重定向。
302：Found 临时移动。与301类似，但知识临时移动，客户端继续使用原URL。
304：Not Modified 未修改。所请求资源未修改，服务器不返回任何资源。
305：Use Proxy 使用代理。所请求的资源必须通过代理访问。
401：Unauthorized 请求需要身份认证
403：Forbidden 拒绝执行
404：Not Found 未找到资源
408：Request Time-out 超时
500：Internal Server Error 服务器内部错误

Cookie、sessionStorage和localStorage

这三者都保存在浏览器端，并且是同源的，不同之处在于：

1. 基本属性：Cookie数据在浏览器和服务器之间传递，且有路径的概念，存储大小很小，只有4KB左右，sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2. 生命周期：sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保持，localStorage始终有效，用作持久数据，cookie有过期时间这一概念。
3. 补充：Cookie可以用作保存用户登陆状态，设置过期时间。也可以用于追踪用户行为，例如地点，选项信息等，实现自动化定制服务。

web worker

web worker主要用于解决html页面在脚本执行过程中不可响应的问题，它作为后台运行的js，独立于其他的脚本，不会影响页面的性能。通过postMessage将结果回传至主线程，从而在复杂操作时不阻塞主线程。

XSS攻击

XSS（跨站脚本攻击），指的是攻击者在返回的HTML中嵌入js脚本实施的网站攻击。
可以使用Cookie来进行防范，可以通过在http头部加上set-cookie属性：
httponly：可以禁止js脚本访问cookie
secure：可以使浏览器仅在请求为https的时候发送cookie

click在ios上有延迟该如何解决

1. 粗暴做法：禁用缩放
2. 利用FastClick，原理是在监测到touchend事件后立刻触发模拟click事件，并且把延迟的真正触发事件阻断。

前端优化的方法

1. 降低请求量：合并资源、减少http请求数、minify / gzip压缩、webP、lazyLoad等
2. 加快请求速度：预解析DNS、减少域名数、并行加载、CDN分发
3. 缓存：http协议缓存请求、离线缓存manifest、离线数据缓存localStorage
4. 渲染：JS/CSS优化、加载顺序优化、服务器渲染、pipeline

从输入URL到页面呈现，中间的过程（重点）

1. 输入URL之后，首先要找到域名对应的IP地址，这一步中需要先查找缓存（浏览器、系统和路由器缓存），如果没有则查询DNS服务器，得到IP地址。
2. 得到IP地址后，根据地址和端口号构造http请求，通过TCP协议传输到服务器，服务器根据请求作出相应响应，将html文档传给浏览器。
3. 客户浏览器得到html页面后会根据它构建DOM树，并在构建过程中对遇到的JS脚本或外部JS连接进行执行和下载，然后再构建CSS对象模型树（CSSOM），然后将CSSOM和DOM合并为渲染树，进行布局，渲染页面，遇到图片视频等资源，在解析DOM时会进行下载。最后将页面呈现在浏览器中。

浏览器缓存机制

强缓存和协商缓存，根据相应的header内容决定。

HTML&CSS

CSS盒模型

就是用来装页面元素的矩形区域，有两种：IE盒子模型和标准的W3C盒子模型。
IE盒子模型：


从上图可以看出，这两种盒模型主要的区别在于width的包含范围不同，标准盒模型width指的是content部分的宽度，IE盒模型指的是content+padding+border三部分的宽度。

浮动塌陷清除的方法

1. 使用带clear属性的空元素：
   在浮动元素的后面使用一个空元素如：
   
   ，并在CSS中赋予.clear{clear:both;}属性即可清除，使用br或hr也可以。
2. 使用CSS的overflow属性
   给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，添加overflow属性，浮动元素回到了容器层，将容器高度撑起，达到了清理浮动的效果。
3. 给浮动元素的容器添加浮动
   这样可能导致整体浮动，影响布局，不建议使用。
4. 使用伪元素
   结合CSS的**:after伪元素和IEhack**可以完美兼容当前主流的各大浏览器。
   给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清理浮动。

使元素消失的方法

1. opacity:0，使得该元素隐藏，但不会改变页面布局。只是不可见，但是点击等事件仍然会触发。
2. visibility:hidden，元素隐藏，不改变页面布局，也不会触发绑定的事件。
3. display:none，可以理解成把元素删除，会改变布局。

几种常用的CSS布局

1. 圣杯布局：从上到下分别为header、container、footer，然后将container部分定为三栏布局。缺陷在于center在container的padding中的，宽度小的时候会发生混乱。
2. 双飞翼布局：给center部分包裹了一个main，通过设置margin主动把页面撑开，最终效果与圣杯布局类似。
3. Flex布局是CSS3提供的一种方便的布局方式。
4. 绝对定位布局。
5. 表格布局：能够使三栏高度统一。
6. 网格布局：使用方便，兼容性较差。可以将页面分为多个区域，或者用来定义内部元素的大小、位置、图层关系。

前端中的事件流

事件流指的是从页面中接收事件的顺序：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

如何让事件先冒泡后捕获

监听到捕获事件时，先暂缓执行，直到冒泡事件被捕获之后再执行捕获事件。

事件委托

事件委托指的是不在事件的发生地（直接DOM）上设置监听，而是在父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上的事件触发，通过判断事件发生元素DOM的类型，从而作出不同的响应。
比较适合动态元素的绑定，新添加的子元素也有监听函数，也可以有事件触发机制。

JavaScript

JS的数据类型

字符串 String，数字 Number，布尔 Boolean，数组 Object，null，Undefined，symbol，对象 Object

闭包

简单来讲，闭包就是能够读取其他函数内部变量的函数，是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。在一个函数内定义另外一个函数就会产生闭包。
用处：

1. 匿名自执行函数：所有的变量，如果不加var关键词，会默认添加到全剧对象的属性上去，可能会导致很多不良后果，如：别的函数可能误用或造成全局对象过于庞大，影响访问速度等。实际应用中会出现某个函数只需要执行一次，内部变量无需维护，这时候就可以使用闭包。
2. 结果缓存：对于执行复杂的函数，很费事，我们需要把计算的结果存储起来，当调用这个函数的时候，现在缓存中查找，避免很多重复计算。闭包不会释放外部的引用，从而使得函数内部的值能够被保留下来。
3. 封装：实现类和继承等。

性能优化的方法

1. 减少http请求
2. 使用内容发布网络（CDN）
3. 添加本地缓存
4. 压缩资源文件
5. 将CSS放在顶部，把js放在底部，让脚本最后加载
6. 避免使用CSS表达式
7. 减少DNS查询
8. 使用外部js和CSS
9. 避免重定向
10. 图片懒加载

JS中继承实现的方式

1. 原型链继承：将父类的实例作为子类的原型，这样产生的实例既是子类的实例也是父类的实例，简单易于实现，但是无法实现多继承，无法向父类构造函数传参。
2. 构造继承：使用父类的构造函数增强子类实例，即复制父类的实例属性给子类。构造继承避免了原型链继承的缺点，但是只能继承父类的实例属性和方法，不能继承原型属性和方法，无法实现函数复用，每个子类都有父类实例函数的副本，影响性能。
3. 实例继承：为父类实例添加新特性，作为子类实例返回。不限制调用方法，不同调用方法效果相同，但是实例实际上是父类的实例，不支持多继承。
4. 拷贝继承：支持多继承，但是效率较低，因为要拷贝父类的属性所以内存占用高，，无法获取父类不可枚举的方法。
5. 组合继承：通过调用父类构造，继承父类属性并保留传参的优点，然后通过父类实例作为子类原型，实现函数复用。
6. 寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样在调用两次父类构造的时候就不会初始化两次实例方法/属性。

AJAX

Ajax返回状态

1. 0：未初始化，还没调用send()方法
2. 1：载入，已调用send()方法，正在发送请求
3. 2：载入完成，send()方法执行完成，已接受全部响应内容
4. 3：交互，正在解析响应内容
5. 4：完成，解析完成，可以在客户端调用

Ajax过程

Ajax创建异步对象XMLHttpRequest，操作XMLHttpRequest对象完成：

1. 设置请求参数：请求方式，相对路径，是否异步等。
2. 设置回调函数，一个处理服务器响应的函数，使用onreadystatechange，类似函数指针。
3. 获取异步对象的readyState属性：存有服务器响应状态信息，每当readyState改变，onreadystatechange就会执行。
4. 判断响应报文的状态，若为200则说明服务器正常运行并返回响应数据。
5. 读取响应数据，可以通过responseText属性来取回服务器返回的数据。

var xhr = new XMLHttpRequest();
xhr.open('get','aabb.php',true);
xhr.send(null);
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200)
			console.log(xhr.responseText);
	}
}

几个重要的设计模式

1. 单例模式：保证一个类只有一个实例。
2. 工厂模式：在创建对象时不会对客户端暴露创建逻辑，通过使用一个共同的接口来指向新创建的对象。
3. 发布订阅模式：在软件架构中是一种消息范式，消息发送者会将消息分为不同类别发布，而不是直接发给特定的接收者，接收者可以通过订阅某个类别接收消息。