前端面试指南

2019-10-09

字数统计: 3k字 | 阅读时长≈ 11分

https://loaln.github.io/2019/07/18/interview-1/

http://blog.lagabu.com/post/interview/netbase.html#%E8%BF%9B%E7%A8%8B%E5%92%8C%E7%BA%BF%E7%A8%8B

HTML

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

CSS

CSS属性的继承：就是指子节点默认使用父节点的样式属性。
- 可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。
  - 所有元素可继承：visibility和cursor。
  - 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  - 终端块状元素可继承：text-indent和text-align。
  - 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

CSS实现将超出DIV宽度的文字隐藏或用省略号表示

#Container{
	overflow: hidden;	
	text-overflow:ellipsis;
	white-space: nowrap;
}

overflow 属性规定当容器内的文本内容溢出时，容器所发生的事情。hide值指明了溢出的内容会被修剪。
text-overflow 属性规定当容器内的文本内容溢出时，容器所发生的事情。ellipsis值指明了溢出的内容将以省略符号来表示。
white-space属性设置容器如何处理容器内的空白。nowrap值规定了段落中的文本不进行换行，即只用一行显示。

BFC
https://www.cnblogs.com/asheng2016/p/7281784.html
https://www.jianshu.com/p/76484dff1cb5

css3 有哪些新特性
高度塌陷

JavaScript

Ajax
状态值是使用“ajax.readyState”获得。（由数字1~4单位数字组成），本题说的状态码应该是表述有误
0 ：未初始化，还没有调用send()方法
1 ：载入，已调用send()方法，正在发送请求
2 ：载入完成，send()方法执行完成，已经接收到全部响应内容
3 ：交互，正在解析响应内容
4 ：完成，响应内容解析完成，可以在客户端调用了

ES6

流行框架

浏览器

cookies、sessionStorage、localStorage

一样都是用来存储客户端临时信息的对象。
区别：

大小
cookies 的容量比sessionStorage 和 localStorage 小， cookies大约4k, localStorage 大约4M.
在http请求上
cookies会被附件到http请求上
api接口
cookies的api不亲民，sessionStorage和localStorage的更简洁
持久化
localStorage上的数据会在本地持久化，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage会随着本次会话，数据清除。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

localStorage API主要有这几个操作：
1. 设置数据：localStorage.setItem(key,value)
2. 获取数据：localStorage.getItem(key,value)
3. 删除数据：localStorage.removeItem(key)
4. 清空所有数据：localStorage.clear()
5. 获取本地存储数据数量：localStorage.length
6. 获取第N个数据的key键值
  1
  2
  3
  4
  5
  6
  7
  localStorage.getAll = function() {
  var obj = [];
  for(var i = 0;i < localStorage.length;i++) {
  obj.push(localStorage.key(i));
  }
  return obj;
  }
请列举 html5 本地存储（ localStorage ）相关 api ，并实现 getAll 方法，获取本地存储

localStorage和sessionStorage

不同：
localStorage生命周期是永久，

计算机基础

计算机网络

同一信道同一时刻通信的是全双工，半双工是是指在通信过程的任意时刻，信息既可由A传到B，又能由B传A，但只能由一个方向上的传输存在。

计算机网络通常由三个部分组成，它们是通信子网、资源子网和通信协议
- 所谓通信子网就是计算机网络中负责数据通信的部分；
- 资源子网是计算机网络中面向用户的部分，负责全网络面向应用的数据处理工作；
- 而通信双方必须共同遵守的规则和约定就称为通信协议，它的存在与否是计算机网络与一般计算机互连系统的根本区别。

进程和线程

进程：是并发执行的程序在执行过程中分配和管理资源的单位
线程：进程执行流的最小单元，是进程的一部分。一个没有进程的线程被看作单线程，是CPU调度的基本单位

进程间通信的方法

消息队列
管道
共享内存
信号量
套接字
信号

#线程同步的方法
同步方法
同步块
wait和notify
volatile
Lock: ReentrantLock
局部变量
blockqueue

OSI七层结构

应用层：文件传输协议(http、smtp、ftp)
表示层
会话层：建立或者解除会话
传输层：TCP、UDP
网络层：IP、ICMP
数据链路层：传输有地址的帧
物理层

TCP和UDP

tcp是面向连接的，udp是无连接的
tcp是提供可靠连接的，通过tcp传输的数据无差错、不丢失、不重复且按序到达；udp尽最大努力交付，不保证可靠交付。
tcp面向字节流的，udp面向报文
tcp首部有20个字节，udp首部仅8字节
tcp支持1对1连接，udp支持1对1、1对多

三次握手和四次挥手

三次握手之所以三次是要保证client和server均让对方知道自己接收和发送的能力没有问题而保证的最小次数。为保证这种能力，每次握手都会携带一个seq标识，接收方接收到后设置ack=seq+1，并置ACK=1

C=>S server只能判断client具备发送能力
S=>C client判断出server具有接收和发布能力
C=>S 双方均保证接收和发送能力没问题

跨域的方法

JSONP：动态创建script标签并带上请求接口发送跨域请求，只能用get方法
CORS：后端设置Access-allow-origin-control=’*’即可
postMessage
iframe+document.domain

重排和重绘

引起重排重绘的时机：

添加或删除可见DOM元素
元素位置发生变化
元素尺寸发生变化
内容发生变化，如文本被图片替代
窗口尺寸变化
页面渲染时
重排一定会引起重绘，重绘不一定引起重排

重排(回流)

生成渲染树后需要计算节点在设备视口(viewport)中的确切位置和大小，这个计算阶段就是回流。

重绘

通过回流阶段知道可视节点和可视节点具体的位置和大小后，需要将每个节点转换为屏幕上的实际像素，这个阶段叫做重绘。

优化方法

批量修改DOM
避免触发同步布局事件
对于复杂动画效果，使用绝对定位脱离文档流
css3硬件加速

http和https

http: http是超文本传输协议，是互联网上应用最广泛的一种网络协议，是一个客户端和服务器请求和应答的标准。

https: 是以安全为目标的http协议，加入了SSL层，以SSL安全协议为基础。建立信息安全通道来确保数据传输并确保网站真实性。

http和https的区别

http是明文传输未加密通信的，网景公司设置了SSL协议对http协议传输的内容进行加密，并进行身份认证，比http协议安全性能高。

https协议使用ca证书，费用较高
http明文传输，https使用ssl协议加密
链接方式不同，端口也不同，http是80端口、https是443端口
http连接简单无状态、https加密传输、身份认证

#工作原理
客户端给出协议版本号、一个随机生成的数、客户端支持的加密方法给服务端
服务端确认使用的加密方法，并给出数字证书ca以及服务器生成的随机数
客户端确认证书有效，生成新的随机数，并使用证书中的公钥加密随机数并发给服务端
服务端使用自己的私钥解密随机数
客户端与服务端根据约定的加密方法，使用前面三个随机数生成会话密钥，用来加密接下来的整个会话流程

#http1.0、http1.1、http2.0的区别

#http1.0
无状态：服务器不跟踪不记录请求过的状态
无连接：浏览器每次请求都需要建立tcp连接

#http1.1
长连接：新增Connection字段，可以设置keep-alive值保持连接不断开
管道化：基于长连接的基础，管道化可以不等第一个请求响应继续发送后面的内容，但响应的顺序还是按请求的顺序返回
缓存处理：增加cache-control字段
断点传输：上传/下载的资源过大时分割为多个部分分别上传/下载

#http2.0
二进制分帧：将所有传输信息分割为更小的消息和帧，并用二进制形式编码
多路复用：共享TCP链接的基础上同时发送请求和响应，同一域名下的所有访问都由同一个TCP连接中走，http消息被分解为独立的帧，乱序发送，服务端根据标识符和首部将消息重新组装
头部压缩
服务推送：服务器可以额外向客户端推送资源而无需客户端明确请求

#从url输入到显示页面的过程
查看浏览器缓存中是否有url对应的ip记录，没有会依次从系统缓存->路由器缓存->DNS服务器中找
根据ip和端口构造http请求并封入tcp包中
经过传输层、网络层、数据链路层、物理层到达服务器
服务器解析请求并返回响应和html给浏览器
浏览器根据html构建DOM树，遇到JS脚本和外部JS连接会阻塞并执行脚本
如遇到style标签或者link标签(先下载后构建)时根据外部样式、内部样式、内联样式构建CSSOM树并不影响DOM树构建
DOM树与CSSOM树合并为渲染树
进行回流(Layout)得到节点的几何信息
进行重绘(Painting)根据渲染树和回流得到的信息得到节点的绝对像素
将像素发送给GPU展示在页面上

#HTTP缓存机制
浏览器在第一次发送请求后，服务器会在响应头中添加与缓存相关的字段：last-modified、expires、cache-control、ETag、Date

强缓存: 直接从本机获取缓存，不需要向服务器发送请求
协商缓存: 浏览器发送请求给服务器，服务器判断是否可使用本地缓存

操作系统

进程

进程因为时间片轮状而暂停，可能进入就绪态，就绪挂起态。因为等待某个资源，可能进入阻塞态，阻塞挂起态。
进程主要组成部分包括3个部分：
1.程序。作用：描述进程要完成的功能。
2.数据。作用：程序在执行时所需要的数据和工作区。
3.进程控制块PCB。作用：包含进程的描述信息和控制信息。它是进程存在的唯一标志。

数据库

第二范式：首先是 1NF，另外包含两部分内容，一是表必须有一个主键；二是没有包含在主键中的列必须完全依赖于主键，而不能只依赖于主键的一部分。
第三范式（3NF）：首先是 2NF，另外非主键列必须直接依赖于主键，不能存在传递依赖。即不能存在：非主键列 A 依赖于非主键列 B，非主键列 B 依赖于主键的情况。

数据结构和算法

本文作者： Niccce
本文链接： https://niccce.github.io/2019/10/09/front-end-interview-guide/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！