移动网站开发 王府井,黑龙江建设网官网网上服务大厅,井陉建设局网站公示,简述企业建网站的步骤校招前端面试常见问题【4】——网络及浏览器 1、网络相关
Q#xff1a;请简述一下 HTTP 协议#xff0c;以及 HTTP1.0/1.1/2.0/3.0 的区别#xff1f;
HTTP 协议#xff1a;超文本传输协议#xff0c;使用 TCP/IP 协议传输数据。是一个应用层的协议。
HTTP1.0#xff…校招前端面试常见问题【4】——网络及浏览器 1、网络相关
Q请简述一下 HTTP 协议以及 HTTP1.0/1.1/2.0/3.0 的区别
HTTP 协议超文本传输协议使用 TCP/IP 协议传输数据。是一个应用层的协议。
HTTP1.0HTTP 1.0 规定浏览器与服务器只保持短暂的连接浏览器的每次请求都需要与服务器建立一个 TCP 连接服务器完成请求处理后立即断开 TCP 连接服务器不跟踪每个客户也不记录过去的请求。因此 HTTP 1.0 存在很大的性能缺陷——当访问一个包含有许多资源文件的网页时每次请求和响应都需要建立一个单独的连接每次连接只是传输一个文档和图像请求之间完全分离。即使图像文件都很小但是客户端和服务器端每次建立和关闭连接却是一个相对比较费时的过程会严重影响到性能。
HTTP 1.1支持长连接的 HTTP 协议在一个 TCP 连接上可以传送多个 HTTP 请求和响应。一个包含有许多图像的网页文件的多个请求和应答可以在一个连接中传输但每个单独的网页文件的请求和应答仍然需要使用各自的连接。
HTTP2.0支持多路复用的 HTTP 协议。 HTTP 2.0 允许同时通过单一的 HTTP 2.0 连接发起多重的请求-响应消息。所有通信都在一个连接上完成这个连接可以承载任意数量的双向数据流。由于 TCP 有慢启动的特点如果 HTTP 连接很多就会十分低效。HTTP/2 通过让所有数据流共用同一个连接可以更有效地使用 TCP 连接。
HTTP3.0也就是 QUIC (quick udp internet connection)协议是由 google 提出的使用 udp 进行多路并发传输的协议。通过使用 UDP 协议省去了 TCP 握手和慢启动的时间拥有极低的建立连接延时。
Q请简述一下 HTTPS 协议
HTTPS 在传输数据之前需要客户端与服务器之间进行一次握手在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL 协议不仅仅是一套加密传输的协议TLS/SSL 中使用了非对称加密对称加密以及 HASH 算法。
握手过程的简单描述如下 1、客户端将自己支持的加密规则发送给服务器。
2、网站从中选出加密算法和 HASH 算法将证书发回给浏览器。证书里面包含了网站地址加密公钥以及证书的颁发机构等信息。
3、获得证书之后客户端要做以下工作 a) 验证证书颁发证书的机构是否合法证书中包含的网站地址是否与正在访问的地址一致等。 b) 如果通过验证浏览器会生成一串随机数的密码并用证书中提供的公钥加密 c) 计算握手信息的 HASH然后将握手信息也一并加密最后将所有信息发送给网站。
4、网站接收浏览器发来的数据之后要做以下的操作 a) 使用自己的私钥将信息解密取出密码使用密码解密握手消息判断 HASH 是否一致。 b) 计算握手的 HASH并使用密码加密握手消息发送给浏览器。
5、浏览器解密并计算握手消息的 HASH如果与服务端发来的 HASH 一致此时握手过程结束之后所有的通信数据将由之前浏览器生成的随机密码进行加密。
Q请简述一下 HTTP 协议中的缓存策略
HTTP 的缓存策略有两种强缓存和协商缓存。
强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的用来表示资源的缓存时间。强缓存中普通刷新会忽略它但不会清除它需要强制刷新。
例如 cache-control: max-age691200 HTTP 1.1 expires: Fri, 14 Apr 2017 10:47:02 GMT HTTP 1.0
协商缓存主要涉及到两个 header 字段E-Tag 和 Last-Modified。每次读取数据时客户单都会跟服务器通信并且会增加缓存标识。在第一次请求服务器时服务器会返回资源并且返回一个资源的缓存标识一起存到浏览器的缓存数据库。当第二次请求资源时浏览器会首先将缓存标识发送给服务器服务器拿到标识后判断标识是否匹配如果不匹配表示资源有更新服务器会将新数据和新的缓存标识一起返回到浏览器如果缓存标识匹配表示资源没有更新并且返回 304浏览器就读取本地缓存服务器中的数据。
例如 E-Tag: 123456abcd Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。
2、浏览器相关
Q请列举一下你知道的浏览器内核的种类
TridentIE6、IE7、IE8、IE9、IE10、360 浏览器和猎豹浏览器。 Geckofirefox 浏览器。 Blinkopera 浏览器。 Webkitsarfari 和 chrome 浏览器。
Q浏览器内核中的有哪些线程
内核主要分成五部分
GUI 渲染线程负责渲染浏览器界面解析 HTMLCSS构建渲染树布局和绘制等。当界面需要重绘或回流时该线程就会执行。注意GUI 渲染线程与 JS 引擎线程是互斥的
JS 引擎线程解析和执行 javascript。
事件触发线程归属于浏览器而不是 JS 引擎用来控制事件循环。
定时器触发线程setInterval 与 setTimeout 所在线程。浏览器定时计数器并不是由 JavaScript 引擎计数的因此通过单独线程来计时并触发定时计时完毕后添加到事件队列中等待 JS 引擎空闲后执行。
异步 http 请求线程在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求将检测到状态变更时如果设置有回调函数异步线程就产生状态变更事件将这个回调再放入事件队列中再由 JavaScript 引擎执行。
Q请简述一下浏览器的渲染流程
接收到文档后渲染引擎会对 HTML 文档进行解析生成 DOM 树、对 CSS 文件进行解析生成布局树同时执行页面中的 JavaScript 代码最终根据 DOM 树和布局树计算样式生成渲染树渲染树中只会包含即将显示在页面中的元素及其样式信息如 head 元素、display 为 hidden 的元素就不会包含在渲染树中根据渲染树需要进行布局来计算每个元素在页面上的位置
接下来渲染引擎开始进行绘制paint这一步分为若干阶段 1、根据渲染树绘制每层的各个元素。 2、栅格化绘制出的图像将渲染树中的节点转换成屏幕上的实际像素 3、显示在屏幕上。 每一层的绘制是由浏览器来完成的最后的合成是由 GPU 来完成而栅格化过程取决于浏览器的设置chrome 默认开启 GPU 栅格化否则由 CPU 进行。
Q浏览器从输入请求到呈现页面有哪几步
1、URL 解析 2、DNS 查询 3、TCP 连接 4、处理请求 5、接受响应 6、渲染页面
Qlocalstorage、sessionstorage 的区别以及使用场景是什么
localStorage生命周期是永久的关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据否则数据永远不会消失只会存储 string。
sessionStorage生命周期是在仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭即使刷新页面或者进入同源另一个页面数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面sessionStorage 也是不一样的。
使用方法
window.localStorage
window.sessionStorageAPI
setItem(key, value) // 保存数据以键值对的方式储存信息。
getItem(key) // 获取数据将键值传入即可获取到对应的 value 值。
removeItem(key) // 删除单个数据根据键值移除对应的信息。
clear() // 删除所有的数据
key(index) // 获取某个索引的 key
