初中级面试题（浏览器）

糖鱼Donyo
263 阅读22分钟

网页从输入网址到渲染完成经历了哪些过程

输入网址，发送到dns服务器，并获取域名对应的服务器对应的ip地址。然后与服务器建立tcp连接，浏览器向服务器发送http请求，服务器响应请求，并返回指定url的数据（或错误信息，或重定向新的url地址）。浏览器下载服务器返回的数据及解析html源文件，生成dom树，解析css和js，渲染页面，直至显示完成。

浏览器渲染机制

  1. 构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node
  2. 构建渲染树（construct）：解析对应的CSS样式文件信息
  3. 布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
  4. 绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。

服务端渲染和客户端渲染的区别

客户端渲染不利于 SEO 搜索引擎优化，服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的，所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的，而是两者结合来做的，例如京东的商品列表就采用的是服务端渲染，目的了为了 SEO 搜索引擎优化，而它的商品评论列表为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染。

AST-抽象语法树 (Abstract Syntax Tree)

抽象语法树 (Abstract Syntax Tree) ，是将代码逐字母解析成 树状对象 的形式。这是语言之间的转换、代码语法检查，代码风格检查，代码格式化，代码高亮，代码错误提示，代码自动补全等等的基础。例如:

function square(n){
    return n * n
}

陈述输入url回车后的过程

  1. 读取缓存：搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤，直接访问该 IP 地址。)
  2. DNS解析：将域名解析成 IP 地址
  3. TCP连接：TCP 三次握手，简易描述三次握手——客户端：服务端你在么？ 服务端：客户端我在，你要连接我么？ 客户端：是的服务端，我要链接。连接打通，可以开始请求了。
  4. 发送http请求
  5. 服务器处理请求并返回http报文
  6. 浏览器解析渲染页面
  7. 断开连接：TCP四次挥手

重绘和重排的区别

重绘（repaint或redraw） ：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）

重排（重构/回流/reflow） ：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

触发重排的条件：任何页面布局和几何属性的改变都会触发重排：

  • 页面渲染初始化(无法避免)
  • 添加或删除可见的DOM元素
  • 元素位置的改变，或者使用动画
  • 元素尺寸的改变——大小，外边距，边框
  • 浏览器窗口尺寸的变化
  • 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

重排必定会引发重绘，但重绘不一定会引发重排。

最佳实践:

  • css

    • 避免使用table布局
    • 将动画效果应用到position属性为absolute或fixed的元素上

  • javascript

    • 避免频繁操作样式，可汇总后统一 一次修改
    • 尽量使用class进行样式修改
    • 减少dom的增删次数，可使用 字符串 或者 documentFragment 一次性插入
    • 极限优化时，修改样式可将其display: none后修改
    • 避免多次触发上面提到的那些会触发回流的方法，可以的话尽量用 变量存住

几种请求方法

GET、POST、DELETE、HEAD、PUT、CONNECT、OPTIONS、TRACE

get和post区别

请求方式GETPOST
参数位置参数拼接到url的后面参数在请求体中
参数大小受限于浏览器url大小，一般不超过32K1G
服务器数据接收接收1次根据数据大小，可分多次接收
适用场景从服务器端获取数据向服务器提交数据
安全性参数携带在url中，安全性低相对于GET请求，安全性更高

如何解决跨域

在MDN中，对跨域是这么解释的：

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

  1. CORS
  2. jsonp
  3. 服务器代理

JSONP原理

由于浏览器的同源策略限制，不允许跨域请求；但是页面中的 script、img、iframe标签是例外，不受同源策略限制。

Jsonp 就是利用script标签跨域特性进行请求。

JSONP 的原理就是，先在全局注册一个回调函数，定义回调数据的处理；与服务端约定好一个同名回调函数名，服务端接收到请求后，将返回一段 Javascript，在这段 Javascript 代码中调用了约定好的回调函数，并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后，就会执行这个回调函数。

JSONP缺点：它只支持GET请求，而不支持POST请求等其他类型的HTTP请求。

说一说什么是跨越，怎么解决

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。 为来防止CSRF攻击

  1. JSONP ：JSONP 的原理很简单，就是利用 

     <script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script> 
<script>       
     function jsonp(data) {    
        console.log(data)    
     }    
</script>

    JSONP 使用简单且兼容性不错，但是只限于 get 请求。

  2. CORS：CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

  3. document.domain ：该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。

    只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域。

  4. webpack配置proxyTable设置开发环境跨域 。

  5. nginx代理跨域

  6. iframe跨域、object跨域

  7. postMessage：这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息。

缓存的理解

缓存可以减少网络 IO 消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段 很多时候，大家倾向于将浏览器缓存简单地理解为“HTTP 缓存”。 但事实上，浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级依次排列如下： Memory Cache ——Service Worker Cache ——HTTP Cache ——Push Cache。

缓存它又分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存：

实现强缓存，过去我们一直用 expires。 当服务器返回响应时，在 Response Headers 中将过期时间写入 expires 字段，现在一般使用Cache-Control 两者同时出现使用Cache-Control 。

协商缓存，Last-Modified 是一个时间戳，如果我们启用了协商缓存，它会在首次请求时随着 Response Headers 返回：每次请求去判断这个时间戳是否发生变化。 从而去决定你是304读取缓存还是给你返回最新的数据

了解错误监控类：前端错误的分类，错误的捕获方式，上报错误的基本原理。前端错误的分类：即时运行错误，代码错误，资源加载错误。即时运行错误的捕获方式：try...catch...，window.onerror

资源加载错误：object.onerror，performance.getEntries()，Error事件

上报错误的基本原理：1. 采用ajax通信的方式上报；2. 利用Image对象上报。

缓存又分为强缓存和协商缓存。强缓存不过服务器，协商缓存需要过服务器，协商缓存返回的状态码是304。两类缓存机制可以同时存在，强缓存的优先级高于协商缓存。当执行强缓存时，如若缓存命中，则直接使用缓存数据库中的数据，不再进行缓存协商。

  1. 强缓存

    • Expires：Expires的值是服务器告诉浏览器的缓存过期时间（值为GMT时间，即格林尼治时间），即下一次请求时，如果浏览器端的当前时间还没有到达过期时间，则直接使用缓存数据。

      　　虽然这种方式添加了缓存控制，节省流量，但是还是有以下几个问题的：

      • 由于浏览器时间和服务器时间不同步，如果浏览器设置了一个很后的时间，过期时间一直没有用
      • 缓存过期后，不管文件有没有发生变化，服务器都会再次读取文件返回给浏览器

      　　　不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。

    • cache-control：针对浏览器和服务器时间不同步，加入了新的缓存方案；这次服务器不是直接告诉浏览器过期时间，而是告诉一个相对时间Cache-Control=10秒，意思是10秒内，直接使用浏览器缓存。

      强制缓存的弊端很明显，即每次都是根据时间来判断缓存是否过期；但是当到达过期时间后，如果文件没有改动，再次去获取文件就有点浪费服务器的资源了。

  2. 协商缓存

    • Last-Modified 和 If-Modified-Since：为了节省服务器的资源，再次改进方案。浏览器和服务器协商，服务器每次返回文件的同时，告诉浏览器文件在服务器上最近的修改时间。

      虽然这个方案比前面三个方案有了进一步的优化，浏览器检测文件是否有修改，如果没有变化就不再发送文件；但是还是有以下缺点：

      • 由于Last-Modified修改时间是GMT时间，只能精确到秒，如果文件在1秒内有多次改动，服务器并不知道文件有改动，浏览器拿不到最新的文件
      • 如果服务器上文件被多次修改了但是内容却没有发生改变，服务器需要再次重新返回文件。

    • Etag 和 If-None-Match：　为了解决文件修改时间不精确带来的问题，服务器和浏览器再次协商，这次不返回时间，返回文件的唯一标识ETag。只有当文件内容改变时，ETag才改变。

存储

我们经常需要对业务中的一些数据进行存储，通常可以分为 短暂性存储 和 持久性储存。

  • 短暂性的时候，我们只需要将数据存在内存中，只在运行时可用

  • 持久性存储，可以分为 浏览器端 与 服务器端

    • 浏览器:cookie: 通常用于存储用户身份，登录状态等

      • http 中自动携带， 体积上限为 4K， 可自行设置过期时间
      • localStorage / sessionStorage: 长久储存/窗口关闭删除， 体积限制为 4~5M
      • indexDB

    • 服务器:

      • 分布式缓存 redis
      • 数据库

关于Pragma

　当该字段值为no-cache的时候，会告诉浏览器不要对该资源缓存，即每次都得向服务器发一次请求才行。

res.setHeader('Pragma', 'no-cache') //禁止缓存
res.setHeader('Cache-Control', 'public,max-age=120') //2分钟

通过Pragma来禁止缓存，通过Cache-Control设置两分钟缓存，但是重新访问我们会发现浏览器会再次发起一次请求，说明了Pragma的优先级高于Cache-Control

缓存的优先级

上面我们说过强制缓存的优先级高于协商缓存，Pragma的优先级高于Cache-Control，那么其他缓存的优先级顺序怎么样呢：Pragma > Cache-Control > Expires > ETag > Last-Modified

XSS和CSRF区别

  1. 跨站脚本攻击（Cross Site Scripting)，为了不和层叠样式表 CSS 混淆，故将跨站脚本攻击缩写为 XSS。恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。
  2. 跨站请求伪造（Cross-site request forgery），是伪造请求，冒充用户在站内的正常操作。我们知道，绝大多数网站是通过 cookie 等方式辨识用户身份，再予以授权的。所以要伪造用户的正常操作，最好的方法是通过 XSS 或链接欺骗等途径，让用户在本机（即拥有身份 cookie 的浏览器端）发起用户所不知道的请求。

区别：

  • 原理不同，CSRF是利用网站A本身的漏洞，去请求网站A的api；XSS是向目标网站注入JS代码，然后执行JS里的代码。
  • CSRF需要用户先登录目标网站获取cookie，而XSS不需要登录
  • CSRF的目标是用户，XSS的目标是服务器
  • XSS是利用合法用户获取其信息，而CSRF是伪造成合法用户发起请求

HTTP协议

HTTP协议：

  1. HTTP协议的主要特点
  2. HTTP报文的组成部分
  3. HTTP方法
  4. POST和GET的区别
  5. HTTP状态码
  6. 什么是持久连接
  7. 什么是管线化

HTTP报文的组成部分

请求报文：请求行，请求头，空行，请求体；响应报文：状态行，响应头，空行，响应体。请求行包含：http方法，页面地址，http协议以及版本；请求头包含：key-value值，告诉服务器端我要什么内容。

HTTP协议类的主要特点：简单快速，灵活，无连接，无状态。

HTTP协议类，HTTP方法：GET，获取资源，POST，传输资源，PUT，更新资源，DELETE，删除资源，HEAD，获得报文首部。

HTTP协议类：POST和GET的区别：1.GET在浏览器回退时是无害的，而POST会再次提交请求；2.GET产生的URL地址可以被收藏，而POST不可以；3.GET请求会被浏览器主动缓存，而POST不会，除非手动设置；4.GET请求只能进行url编码，而POST支持多种编码方式；5.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会保留；6.GET请求在URL中传送的参数是有长度限制的，而POST是没有限制的；7.对参数的数据类型，GET只接受ASCII字符，而POST没有限制；8.GET比POST更不安全，因为参数直接暴露在URL中，所以不是用来传递敏感信息的；9.GET参数通过URL传递的，POST放在Request body中。

http/https 协议

1.0 协议缺陷:

  • 无法复用链接，完成即断开，重新慢启动和 TCP 3次握手
  • head of line blocking: 线头阻塞，导致请求之间互相影响

1.1 改进:

  • 长连接(默认 keep-alive)，复用

  • host 字段指定对应的虚拟站点

  • 新增功能:

    • 断点续传

    • 身份认证

    • 状态管理

    • cache 缓存

      • Cache-Control
      • Expires
      • Last-Modified
      • Etag

2.0:

  • 多路复用
  • 二进制分帧层: 应用层和传输层之间
  • 首部压缩
  • 服务端推送

https: 较为安全的网络传输协议

  • 证书(公钥)
  • SSL 加密
  • 端口 443

TCP:

  • 三次握手

  • 四次挥手

  • 滑动窗口: 流量控制

  • 拥塞处理

    • 慢开始
    • 拥塞避免
    • 快速重传
    • 快速恢复

缓存策略: 可分为 强缓存 和 协商缓存

  • Cache-Control/Expires: 浏览器判断缓存是否过期，未过期时，直接使用强缓存，Cache-Control的 max-age 优先级高于 Expires

  • 当缓存已经过期时，使用协商缓存

    • 唯一标识方案: Etag(response 携带) & If-None-Match(request携带，上一次返回的 Etag): 服务器判断资源是否被修改，

    • 最后一次修改时间: Last-Modified(response) & If-Modified-Since (request，上一次返回的Last-Modified)

      • 如果一致，则直接返回 304 通知浏览器使用缓存
      • 如不一致，则服务端返回新的资源

  • Last-Modified 缺点：

    • 周期性修改，但内容未变时，会导致缓存失效
    • 最小粒度只到 s， s 以内的改动无法检测到

  • Etag 的优先级高于 Last-Modified

HTTP状态码：

  • 1xx:指示信息，表示请求已接收，继续处理；
  • 2xx:成功，表示请求已被成功接收；
  • 3xx:重定向，要完成请求必须进行更进一步的操作；
  • 4xx:客户端错误，请求有语法错误或请求无法实现；
  • 5xx:服务器错误，服务器未能实现合法的请求。
  • 200 ok: 客户端请求成功
  • 206 Partial Content: 客户发送了一个带有Range头的GET请求，服务器完成了它
  • 301 Moved Permanently: 所请求的页面已经转移至新的url
  • 302 Found: 所有请求的页面已经临时转移至新的url
  • 304 Not Modified： 客户端有缓冲的文档并发出了一个条件性的请求

服务器告诉客户，原来缓冲的文档还可以继续使用

  • 400 客户端请求有语法错误，不能被服务器所理解
  • 401 请求未经授权，这个状态码必须和www-Authenticate报头域一起使用
  • 403 对被请求页面的访问被禁止
  • 404 请求资源不存在
  • 505 服务器发送不可预期的错误，原来缓冲的文档还可以继续使用
  • 503 请求未完成，服务器临时过载或宕机，一段时间后可能恢复正常

TCP三次握手

建立连接前，客户端和服务端需要通过握手来确认对方:

  • 客户端发送 syn(同步序列编号) 请求，进入 syn_send 状态，等待确认
  • 服务端接收并确认 syn 包后发送 syn+ack 包，进入 syn_recv 状态
  • 客户端接收 syn+ack 包后，发送 ack 包，双方进入 established 状态

TCP四次挥手

  • 客户端 -- FIN --> 服务端， FIN—WAIT
  • 服务端 -- ACK --> 客户端， CLOSE-WAIT
  • 服务端 -- ACK,FIN --> 客户端， LAST-ACK
  • 客户端 -- ACK --> 服务端，CLOSED

HTTP与HTTPS的区别

HTTP的URL由http://起始且默认使用端口80，而HTTPS的URL由https://起始且默认使用端口443

HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的 SSL 加密传输协议

HTTP的连接很简单，是无状态的，HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

持久链接：HTTP1.1版本 1.0不支持

HTTP协议采用“请求-应答”模式，当使用普通模式，即非keep-alive模式时，每个请求或应答，客户端和服务器都要新建一个链接，完成之后立即断开连接（HTTP协议为无连接的协议）

当使用keep-alive模式（又称为持久链接，连接重用）时，keep-alive功能使客户端到服务器端的连接有效，当出现对服务器的后继请求时，keep-alive功能避免了重新建立链接。

管线化

  1. 在使用非持久连接的情况下，某个连接上消息的传递类似于请求1-响应1
  2. 使用持久连接的情况下，请求1-请求2-响应1-响应2

管线化：

  • 管线化机制通过持久连接完成，仅仅HTTP1.1支持此技术；
  • 只有GET和HEAD请求可以进行管线化，而post则有限制；
  • 初次创建连接时不应启动管线机制，因为对象（服务器）不一定支持HTTP1.1版本的协议；
  • 管线化不影响响应到来的顺序，响应返回的顺序并未改变；
  • HTTP1.1要求服务器支持管线化，但并不要求服务端也对响应进行管线化处理，只要求对于管线化的请求不失败即可。
  • 由于上面提到的服务端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不友好，因此现代浏览器如Chrome和FIreFox默认并未开启管线化支持。

网络分层

目前网络分层可分为两种：OSI 模型和 TCP/IP 模型

OSI模型 应用层（Application） 表示层（Presentation） 会话层（Session） 传输层（Transport） 网络层（Network） 数据链路层（Data Link） 物理层（Physical）

TCP/IP模型 应用层（Application） 传输层（Host-to-Host Transport） 互联网层（Internet） 网络接口层（Network Interface）

AJAX

  1. 什么是同源策略以及限制
  2. 前后端如何通信
  3. 如何创建ajax
  4. 跨域通信的几种方式

什么是同源策略以及限制

同源策略限制从一个源加载的文档或脚本如何与另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

  1. cookie、LocalStorage、IndexDB无法读取
  2. DOM无法获取
  3. ajax请求不能发送

ajax是同源下面的通信方式，websocket不限制同源策略，cors支持跨源通信，也支持同源通信。

如何创建Ajax

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新

同步和异步的区别

同步： 浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作

异步： 浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

ajax的优点和缺点

ajax的优点

  1. 无刷新更新数据（在不刷新整个页面的情况下维持与服务器通信）
  2. 异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作）
  3. 前端和后端负载均衡（将一些后端的工作交给前端，减少服务器与宽度的负担）
  4. 界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）

ajax的缺点

  1. ajax不支持浏览器back按钮
  2. 安全问题 Aajax暴露了与服务器交互的细节
  3. 对搜索引擎的支持比较弱
  4. 破坏了Back与History后退按钮的正常行为等浏览器机制

什么时候使用post？

post一般用于修改服务器上的资源，对所发送的信息没有限制。比如

1、无法使用缓存文件（更新服务器上的文件或数据库） 2、向服务器发送大量数据（POST 没有数据量限制） 3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

什么是Ajax和JSON，它们的优点和缺点

Ajax： Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互

Ajax优点： 异步请求响应快，用户体验好；页面无刷新、数据局部更新；按需取数据，减少了冗余请求和服务器的负担；

Ajax缺点： 异步回调问题、this指向问题、路由跳转back问题；对搜索引擎的支持比较弱，对于一些手机还不是很好的支持

JSON： 是一种轻量级的数据交换格式，看着像对象，本质是字符串

JSON优点： 轻量级、易于人的阅读和编写，便于js解析，支持复合数据类型

JSON缺点： 没有XML格式这么推广的深入人心和使用广泛, 没有XML那么通用性

avatar
文章
阅读
粉丝