各公司前端面试题总结（二）

超、凢脫俗 2022-04-23 23:16 171阅读 0赞

一、如何让文本居中  
1、首先让一个**块级元素居中**的方法是：给该元素设置margin-left和margin-right属性值为auto。让文本水平居中的方法是设置text-align属性值为center。  
2、对于**单行文本居中**的方法是：给文本父元素设置line-height属性并使其属性值与父元素width属性一致，同时还要设置overflow属性值为hidden为了防止超出文本自动换行变成多行文本。如下：

3、对于多行文本且父元素高度不固定的文本居中的方法是：给父元素设置padding-bottom和padding-bottom属性且属性值相同。如下：

4、对于多行文本且父元素高度固定情况下文本居中的方法：会用到vertical-align属性。如下：

二、盒子模型  
1、盒子模型具有以下几个部分：

*  外边距——margin
 *  边框——border
 *  内边距——padding
 *  内容——content  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]

2、盒子模型一般分为两种：IE盒子模型（怪异盒子模型）和标准盒子模型

*  IE盒子模型：

width = content-width + padding-width + border-width
    height = content-height + padding-height + border-height

解析即IE盒子模型宽高就是内容(content)，内填充(padding)，边框(border)。如果盒子模型设定了固定的width，如果设置border，padding任何一个属性的宽度，将会压缩内容区，让内容区变小

*  标准盒子模型：  
    标准CSS盒子模型设置的宽高就是内容区的宽高。如果盒子模型设定了固定的width，则这个width指的就是内容的width了，如果再添加border，padding的值，这时候总的宽度就会超过设置的宽度，这个需要注意，不然就会影响到了网页布局了

3、CSS3加了个box-sizing属性，变相承认了这两种盒子都对，不过box-sizing默认属性就是content-box，即标准盒子模式，IE盒子模型就是属性border-box。

三、说说二叉树（腾讯必考）  
1、二叉树是每个结点最多有两个子树的树结构。通常子树被称作“左子树”（left subtree）和“右子树”（right subtree）。  
2、二叉树的遍历算法：  
注意：

*  遍历二叉树是以一定规则将二叉树中的节点排列成一个线性结构，实质上是对一个非线性结构进行线性化操作
 *  尽管二叉树与树有许多相似之处，但二叉树不是树的特殊情形：树中结点的最大度数没有限制，而二叉树结点的最大度数为2；树的结点无左、右之分，而二叉树的结点有左、右之分
 *  遍历二叉树就是按某种顺序访问二叉树中的每个结点一次且仅一次的过程。这里的访问可以是输出、比较、更新、查看元素内容等等各种操作。
 *  二叉树的遍历方式分为两大类：一类按根、左子树和右子树三个部分进行访问；另一类按层次访问

遍历二叉树的顺序存在下面6种可能：

TLR（根左右）, TRL（根右左）

LTR（左根右）, RTL（右根左）

LRT（左右根）, RLT（右左根）  
（1）先序遍历：  
若二叉树为空，则结束遍历操作；  
否则：先访问根节点——>先序遍历左(右)子树——>先序遍历右(左)子树  
如图：顺序为ABDFECGHI  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
（2）中序遍历  
若二叉树为空，则结束遍历操作；  
否则：中序遍历左(右)子树——>访问根节点——>中序遍历右(左)子树  
如图：顺序为DBEFAGHCI  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]  
（3）后序遍历  
若二叉树为空，则结束遍历操作；  
否则：后序遍历左(右)子树——>后序遍历右(左)子树——>访问根节点  
如图：顺序为DEFBGHICA![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]  
四、http和https的区别  
1、http(Hypertext transfer protocol)超文本传输协议，它规定了全球网（Word Wide Web）的服务器和浏览器互相通信的规则是一种数据传输协议，http连接很简单，是无状态的。  
2、https协议是由http+SSL构建的可以进行加密传输和身份认证的网络协议  
3、无连接：意思是限制每次连接只处理一个请求。服务器处理完客户的请求并得到应答后就会断开连接。这样的话可以节省传输时间  
4、无状态：是指协议对于事物处理没有记忆能力。无状态意味着后续处理需要前面的信息时必须重传。  
总的区别：

*  https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用.
 *  http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议.
 *  http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443
 *  http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全.
 *  http效率更高，https更安全
 *  http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。  
    五、说说一些常见的http状态码
 *  2打头 ：（请求成功）表示成功处理了请求的状态代码。

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 201 （已创建） 请求成功并且服务器创建了新的资源。  
202 （已接受） 服务器已接受请求，但尚未处理。  
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。 204 （无内容） 服务器成功处理了请求，但没有返回任何内容。  
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。  
206 （部分内容） 服务器成功处理了部分 GET 请求。

*  3打头：（请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。  
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。  
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。  
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。  
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。  
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。  
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

*  4打头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。  
    400 （错误请求） 服务器不理解请求的语法。  
    401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。  
    403 （禁止） 服务器拒绝请求。  
    404 （未找到） 服务器找不到请求的网页。  
    405 （方法禁用） 禁用请求中指定的方法。  
    406 （不接受） 无法使用请求的内容特性响应请求的网页。  
    407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。  
    408 （请求超时） 服务器等候请求时发生超时。  
    409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。  
    410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。  
    411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。  
    412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。  
    413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。  
    414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。  
    415 （不支持的媒体类型） 请求的格式不受请求页面的支持。  
    416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。  
    417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
 *  5打头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。  
    500 （服务器内部错误） 服务器遇到错误，无法完成请求。  
    501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。  
    502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。  
    503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。  
    504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。  
    505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

六、在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？  
输入url后，首先需要找到这个url域名的服务器ip,为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器，得到服务器的ip地址后，浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html给浏览器，因为html是一个树形结构，浏览器根据这个html来构建DOM树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面，之后根据外部央视，内部央视，内联样式构建一个CSS对象模型树CSSOM树，构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为html文件中会含有图片，视频，音频等资源，在解析DOM的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先 查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304  
总结为：DNS解析  
TCP连接

发送HTTP请求

服务器处理请求并返回HTTP报文

浏览器解析渲染页面

连接结束

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20220222/c6ae81d6ba6447cf916b37aa99b4d527.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20220222/9d8587aa89d5425094a0790ce706bd9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]: /images/20220222/c5fd4cf0011c40b98ecd6dbdfa99004f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]: /images/20220222/f6cbfb87daf6447fa4d74dafef257013.png