虎皮猫的博客

# 浏览器相关

# 介绍一下对浏览器内核的理解

浏览器内核主要分为2部分: 渲染引擎和JS引擎。

  1. 渲染引擎: 负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同
  2. JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

# 浏览器中输入url到网页显示，整个过程发生了什么

  1. 域名解析
  2. 发起tcp三次握手
  3. 建立tcp连接之后发起htttp请求
  4. 服务器端响应http请求，浏览器得到html代码
  5. 浏览器器解析html代码，并请求html代码中的资源
  6. 浏览器对页面进行渲染呈现给用户

# 基本概念

  • cookie: cookie非常小，它的大小限制在4kb左右，它的主要用于保存登陆信息
  • localStorage: 是HTML5标准中新加入的技术，存储不会因为页面关闭而丢失
  • sessionStorage: 是HTML5标准中新加入的技术，存储随着页面关闭而丢失

# 三者区别

  • 数据上的生命周期的不同

    • cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效
    • localStorage 除非被永久清除，否则永久保存
    • sessionStorage 仅在当前会话会有效，关闭页面或浏览器后被清除

  • 存放数据的大小不同

    • cookie 一般为4kb
    • localStorage 一般为5MB
    • sessionStorage 一般为5MB

  • 与服务器端通信不同

    • cookie 每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题
    • localStorage 仅在客户端（即浏览器）中保存，不参与和服务器的通信
    • sessionStorage 仅在客户端（即浏览器）中保存，不参与和服务器的通信

  • 易用性

    • cookie 需要程序员自己来封装，原生的cookie接口不够友好
    • localStorage 原生接口可以接受，可以封装来对Object和Array有更好的支持
    • sessionStorage 原生接口可以接受，可以封装来对Object和Array有更好的支持

# 跨域

# 概念

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

# 解决跨域方法

  1. JSONP

JSONP 的原理很简单，就是利用 <script> 标签没有跨域限制。通过 <script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据。

优点: 兼容性好

缺点: 只能发起 get 请求

  1. CORS 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

# 简单请求

  1. 使用下列方法之一：

  • GET

  • HEAD

  • POST

  1. Content-Type 的值仅限于下列三者之一：

  • text/plain

  • multipart/form-data

  • application/x-www-form-urlencoded

# 复杂请求

对于复杂请求来说，首先会发起一个预检请求，该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

# 缓存机制

缓存可以说是性能优化中简单高效的一种优化方式了，它可以显著减少网络传输所带来的损耗。

# 缓存位置

  1. Service Worker
  2. Memory Cache
  3. Disk Cache
  4. Push Cache
  5. 网络请求

# 缓存策略

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。

# 强缓存

  1. Expires
Expires: Wed, 22 Oct 2018 08:41:00 GMT

表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且 Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。

  1. Cache-control
Cache-control: max-age=30

Cache-Control 出现于 HTTP/1.1，优先级高于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。

# 协商缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。

# 浏览器渲染

# 为什么操作 DOM 慢

DOM 是属于渲染引擎中的东西，而 JS 又是 JS 引擎中的东西。当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信，并且操作 DOM 可能还会带来重绘回流的情况，所以也就导致了性能上的问题。

# 重绘（Repaint）和回流（Reflow）

  • 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
  • 回流是布局或者几何属性需要改变就称为回流。 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多。

← webpack 知识 →