腾讯云2022web前端开发校招一面面试总结一

全程50分钟左右

一、说一下display

display用来设置元素显示的类型
可选值:
inline将元素设置为行内元素 block将元素设置为块元素
inline-block将元素设置为行内块元素，行内块，既可以设置宽度和高度又不会独占一行
table将元素设置为一个表格
none元素不在页面中显示

二、说一下flex

太多了我就说了一点点

三、讲一下CSS盒模型

盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框，它描述了一个文档元素在网页布局汇总所占的位置大小。每个盒子除了有自己的大小和位置外，还影响着其他盒子的大小和位置，因此正确了解css盒子模型对我们前端页面布局十分重要。
css的盒子模型包括标准盒子模型和IE盒子模型（怪异模型）。

标准盒：

IE盒模型：

四、有了解过动画吗？一般怎么实现有什么区别

CSS动画：动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以他的可操作性很高，几乎可以完成任何你想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。但是，如果帧率过低的话，会帧与帧之间的过渡很可能会不自然、不连贯。

对比：

代码复杂度方面，简单动画，css 代码实现会简单一些，js 复杂一些。复杂动画的话，css 代码就会变得冗长，js实现起来更优。
动画运行时，对动画的控制程度上，js 比较灵活，能控制动画暂停，取消，终止等，css动画不能添加事件，只能设置固定节点进行什么样的过渡动画。
兼容方面，css 有浏览器兼容问题，js 大多情况下是没有的。
性能方面，css动画相对于优一些，css 动画通过GUI解析，js 动画需要经过j s 引擎代码解析，然后再进行 GUI 解析渲染。

五、了解过状态码吗

301和302代表着某个URL发生了转移，不同之处在于：
301 redirect: 301 代表永久性转移(Permanently Moved)，
302 redirect: 302 代表暂时性转移(Temporarily Moved )， 304 的标准解释是： Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。

404：找不到

403： forbidden 禁止，没有权限

401：未授权

500：内部错误

200： OK

六、从输入网址到浏览器渲染出画面经历了什么？

1.查找域名对应的ip地址

① 请求发起后，浏览器首先会解析这个域名，首先它会查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。

② 如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS(域名分布系统)服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。

③查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询

④根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程

⑤本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址

⑥最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

2.建立TCP连接

在拿到域名对应的IP地址后，会以随机端口（1024~~65535）向WEB服务器程序80端口发起TCP的连接请求，这个连接请求进入到内核的TCP/IP协议栈（用于识别该连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，最终到达WEB程序，最终建立了TCP/IP的连接，对于客户端与服务器的TCP链接，必然要说的就是『三次握手』。

3.发起HTTP请求

建立TCP连接之后，发起HTTP请求，请求一般分为三部分

请求方法URI协议/版本

请求头(Request Header)

请求正文

4.服务器端处理

服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。

5.关闭TCP链接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

6.浏览器解析资源

浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不必显示的节点。

在解析CSS的同时，可以继续加载解析HTML，但在解析执行JS脚本时，会停止解析后续HTML

7.浏览器布局渲染

根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：repaint和reflow。

repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

reflow：意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。

有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
有些情况下，比如 resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

七、Http和Https有什么区别

一、传输信息安全性不同

1、http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。

2、https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。

二、连接方式不同

1、http协议：http的连接很简单，是无状态的。

2、https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。

三、端口不同

1、http协议：使用的端口是80。

2、https协议：使用的端口是443．

四、证书申请方式不同

1、http协议：免费申请。

2、https协议：需要到ca申请证书，一般免费证书很少，需要交费。

八、讲一下什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

解决方法：

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

2、带cookie跨域请求：前后端都需要进行设置

九、cookies和cache有什么区别？

cookies是储存在用户本地终端上的数据，有些网站需要你接受cookie才能进入，这样你再次进入网站时就不需要从互联网上读网站数据，直接从你的电脑上读取，速度就快的多了。它可以跨浏览器共享数据；如果没有设置Cookie失效日期，它的生命周期保存到关闭浏览器为止；

Cache存储于服务器的内存中，允许您自定义如何缓存数据项，以及缓存多长时间。当系统缺乏内存时，缓存会自动移除很少使用的或优先级较低的缓存项，以释放内存，此过程称为清理。这是缓存为了确保过期数据不再占用宝贵的服务器资源的方式之一。它不与会话相关，所以它是多会话共享的，因此缓存可以提高系统性能。同时有可能会泄露用户信息，另外在获取数据时还需要检测该缓存项是否还存在。

Session是由应用服务器维持的一个服务器端的存储空间，是一种保存上下文信息的机制，它是针对每一个用户的。用户在连接服务器时，服务器会生成一个唯一的SessionID，用该SessionID为标识符来存取服务器端的Session存储空间，面SessionID这一数据是以Cookie形式保存在客户端。用户提交页面时，会将SessionID提交到服务器端，来存取Session数据。这一过程是不用开发人员来干预的，所以一旦客户端禁用Cookie，Session理论上也会失效，但服务器也可以自动通过URL重写的方式来传递SessionID的值，因此也不是完全依赖Cookie，并且这个过程对于开发人员是透明的。

（还有好多，明天再写吧。。。）