最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
一、从输入 URL 到页面呈现发生了什么?
在浏览器中输入一个网址,如:https://www.baidu.com 。从输入地址到我们看到百度首页,这一过程到底发生了什么?
1.1、构建网络请求
1.2、查找缓存
检查如果有缓存,则直接使用缓存,如果没有缓存,则会向服务器发送网络请求。
1.3、DNS解析
我们访问网站的时候,输入的是域名,比如上边截图内
域名:https://www.baidu.com
IP地址:36.152.44.95:443
真正的数据包是通过 IP 地址传过来的,域名和 IP 是 一 一 映射关系。我们根据域名获取到具体的 IP 这个过程就叫做 DNS 解析。
IP 地址后的数字指定的端口号,如果没有,默认是 80 。
1.4、建立 TCP 连接
服务器要是想把数据包传给浏览器之前,首先要建立连接。建立 TCP 连接,就是保证服务器与浏览器之间能够进行安全连接通信,数据传输完毕之后再断开连接。
TCP (Transmission Control Protocol),传输控制协议,是一种面向连接的,可靠的,基于字节流的传输层通信协议。
同一个域名下,最多能够建立 6 个 TCP 连接,超过 6 个的话,剩余的会排队等待。TCP 连接分为三个阶段:
-
通过三次握手建立浏览器与服务器之间的连接。
-
进行数据传输,服务器向浏览器发送数据包。
-
断开连接的阶段,数据传输完毕之后,通过四次挥手来断开连接。
1.5、发送 HTTP 请求
TCP 建立连接完毕后,浏览器和服务器可以开始通信了,即开始发送 HTTP 请求。
http 请求,前端程序员就很熟悉喽!有请求和响应。
请求流程图:
二、页面是如何渲染的?
第一个问题讲的浏览器内输入 url 之后做了做了些啥,最后到发送网络请求。服务器根据 url 提供的地址查找文件,然后加载 html、css、js、img等资源文件。接收到文件之后浏览器是如何渲染的呢?
浏览器渲染的过程为:
-
浏览器将获取的 html 文档解析成 DOM 树。
-
处理 CSS 标记,构成层叠样式表模型CSSOM。
-
将 DOM 和 CSSOM 合并,创建渲染树(rendering tree),代表一系列将被渲染的对象。
-
渲染树的每个元素包含的内容都是计算过的,它被称为布局 layout 。浏览器使用流式布局的方式,只需一次绘制操作布局所有的元素。
-
将渲染树的各个节点绘制到屏幕上,这一步被称之为 painting。
过程如图示:
三、浏览器缓存是怎么回事?
3.1、强缓存
检查强缓存的时候,不会发送 http 请求。
如何来检查呢?通过相应的字段来进行检查的,在 hTTP/1.0 中使用的是 Expires /,在 HTTP/1.1 使用的是 Cache-Control 。
Expires
Expires 即过期时间,存在于服务端返回的响应头,告诉浏览器在过期时间之前可以直接从缓存内获取数据,无需再次发送网络请求。
expires: Wed, 29 Dec 2021 07:19:28 GMT
我是在2021-12-22 12:30左右 请求的 https://www.baidu.com/ ,
返回的 expires 内容如上。
表示资源在 2012-12-29 07:12:28 过期,在这之前不会向服务器发送请求
这个方式你看有毛病吗?潜藏了一个大坑,如果电脑的本地时间与服务器时间不一致时,那么服务器返回的这个过期时间可能就是不准确的,因此这种方式在 HTTP 1.1 中被抛弃了。
Cache-Control
在 HTTP1.1 中,采用了一个非常关键的字段:Cache-Control 。这个字段也存在于响应头中。如:
cache-control: max-age=2592000
代表的是这个响应返回后,在 (2592/3600=720小时)之内直接可以直接使用缓存。
它和 Expires 本质的不同在于它并没有采用具体的时间点,而是采用的时长来控制强缓存。如果 Expires 和 Cache-Control 同时存在的时候,Cache-Control 会优先考虑。
强缓存有没有可能失效呢?如果资源缓存时间超时,也就是强缓存失效了,接下来该怎么办呢?此时就会进入到第二级屏障 – 协商缓存。
3.2、协商缓存
强缓存失效之后,浏览器在请求头中携带相应的缓存 tag 向服务器发送请求,服务器根据这个缓存 tag 决定到底是否使用缓存,这就是协商缓存。
缓存 tag 有两种:ETag 和 Last-Modified 。
ETag 是服务器根据当前文件内容生成的唯一标识,如果内容发生更新,唯一标识也会更新。浏览器接收到的 ETag 会作为 if-None-Match 字段的内容,并放到请求头中,发送给服务器之后,服务器会与服务器上的 值进行对比,如果两者一样,浏览器直接返回 304,使用缓存,不一样时发送 http 请求。
Last-Modified ,最后修改时间。浏览器第一次发送网络请求后,服务器会在响应头上加上该字段。浏览器再发请求时,会把该值作为 last-Modified-Since 的值,放入请求头,然后服务器会与服务器上的最后修改时间进行对比,如果两者一样,浏览器直接返回304,使用缓存。不一样时发送 http 请求。
两者对比:
精准度上 ETag 更好一点。因为 ETag 能够更准确的判断资源是否有更新,保证拉取到的都是最新内容。
性能上 Last-Modified 刚好一点,只需要记录一个时间点就好了。
如果两者都存在的话,优先考虑 ETag。
3.3、缓存位置
前边讲述,浏览器请求地址时,服务器返回 304 表示使用浏览器缓存,这些资源究竟缓存到哪了呢?
缓存位置一共有四种,按照优先级由高到低排列分别为:
-
Service Worker
-
Memory Cache
-
Disk Cache
-
Push Cache
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理,区别,亮点,作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
-
项目里用到了react,为什么要选择react,react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗?
-
React的jsx,函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西,接受几个参数
-
redux请求中间件如何处理并发
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西,接受几个参数
-
redux请求中间件如何处理并发
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】