web前端经典面试题试题及答案（持续更新）-浏览器

Myth丶恋晨 2023-01-22 04:50 145阅读 0赞

> 浏览器  
> 浏览器缓存、浏览器渲染机制、浏览器渲染过程、重排reflow、重绘repaint、浏览器兼容

# 浏览器缓存 #

## <table>   <tbody>    <tr>     <td align="left">浏览器缓存的分类？</td>    </tr>   </tbody>  </table> ##

1、强缓存

// Expires：
    Expires:Thu, 21 Jan 2017 23:39:02 GMT // value值表示的是绝对时间，一般都是服务器时间，可能与客户端时间不一样
    // Cache-Control：
    Cache-Control: max-age=3600 // value值是以客户端时间为准

如果服务器这两个时间都下发了，以后者为准  
2、协商缓存：与服务器协商是否要用，是否过期  
（1）Last-Modified/ If-Modified-Since  
`Last-Modified: Web, 26 Jan 2017 00:35:11 GMT`  
（2）Etag/ If-None-Match  
if-none-match的值就是服务器发过来的etag的值

## <table>   <tbody>    <tr>     <td align="left">与浏览器缓存相关的http头有哪些？</td>    </tr>   </tbody>  </table> ##

Expires、Cache-Control、Last-Modified、If-Modified-Since、Etag、If-None-Match

## <table>   <tbody>    <tr>     <td align="left">cookie token 和 session 的区别？</td>    </tr>   </tbody>  </table> ##

1、这道题绝对不是你回答的点越多就越好。这道题考察的是你对浏览器缓存知识的理解程度，所以你应该回答的是 Cookie、 Session、Token 的产生背景、原理、有什么问题，在回答这个的基础上把差别讲出来。把这些东西答出本质，再加点装逼的东西，再故意拓展讲到你准备的其他内容才是答好这道题的关键，而要理解好这些东西，其实一两天就够了。  
2、关于Cookie，见：https://www.yuque.com/tqpuuk/yrrefz/ns4z0t

## <table>   <tbody>    <tr>     <td align="left">浏览器缓存的原理？</td>    </tr>   </tbody>  </table> ##

待完善

## <table>   <tbody>    <tr>     <td align="left">Cookie、sessionStorage、localStorage的区别？</td>    </tr>   </tbody>  </table> ##

共同点：都是保存在浏览器端，并且是同源的

*  Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
 *  sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
 *  localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明一下cookie的作用：

*  保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
 *  跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便
 *  定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

## <table>   <tbody>    <tr>     <td align="left">浏览器缓存的区别/ 请描述一下cookies，sessionStorage和localStorage的区别？</td>    </tr>   </tbody>  </table> ##

1、cookie  
（1）本身用于客户端和服务端通信  
（2）但是它有本地存储的功能，于是就被“借用”  
（3）document.cookie = …获取和修改即可  
（4）cookie用于存储的缺点  
①存储量太小，只有4kb  
②所有http请求都带着，会影响获取资源的效率  
③api简单，需要封装才能用document.cookie  
2、localStorage,sesseionStorage  
（1）html5专门为存储而设计，最大容量5M  
（2）api简单易用  
（3）`lcoalStorage.setItem(key, value);localStorage.getItem(key);`  
（4）ios safari隐藏模式下:`localStorage.getItem`会报错，建议统一使用`try-catch`封装  
3、`sessionStorage`用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而`localStorage`用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

## <table>   <tbody>    <tr>     <td align="left">localstorage的超出，容错，替换方案？</td>    </tr>   </tbody>  </table> ##

1、localstorage超出：  
localStorage存储空间是每个域5M，如果超出了这个空间，就会报错：QuotaExceededError  
2、容错、替换方案  
（1）超了申请其他的域，修改nigix配置， postmessge通信往其他域上存取。   
A、B页面引用C页面，C最好是主域。  
`iframe.contentWindow.postMessage()`  
`window.parent.postMessage()`  
（2）indexDB  
（2）最简单粗暴的方法，把之前的缓存都给删了。（不推荐）

## <table>   <tbody>    <tr>     <td align="left">如果 localStorage 存满了，再往里存东西，或者要存的东西超过了剩余容量，会发生什么？</td>    </tr>   </tbody>  </table> ##

存不进去并报错（QuotaExceededError）

# 浏览器渲染机制 #

## <table>   <tbody>    <tr>     <td align="left">什么是DOCTYPE及作用？</td>    </tr>   </tbody>  </table> ##

1、定义：DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。  
2、作用：DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。

## <table>   <tbody>    <tr>     <td align="left">常见的doctype有哪些？</td>    </tr>   </tbody>  </table> ##

1、HTML5： `<!DOCTYPE html>`  
2、HTML4.01 Strict：该DTD包含所有html元素和属性，但不包括展示性的和启用的元素，如font  
3、HTML 4.01 Transitional ：该DTD包含所有html元素和属性，包括展示性的和启用的元素，如font

## <table>   <tbody>    <tr>     <td align="left">h5的doctype怎么写？</td>    </tr>   </tbody>  </table> ##

`<!DOCTYPE html>`

# 浏览器渲染过程 #

## <table>   <tbody>    <tr>     <td align="left">加载资源的形式？</td>    </tr>   </tbody>  </table> ##

1、输入url（或跳转页面）加载html  
`http://coding.m.imooc.com`  
2、加载html中的静态资源  
`<script src="/static/js/jquery.js"></scrip>`

## <table>   <tbody>    <tr>     <td align="left">在浏览器中输入url，从输入url到html的详细过程/加载一个资源的过程？</td>    </tr>   </tbody>  </table> ##

1、dns解析：浏览器根据dns服务器得到域名的ip地址  
2、发送到服务器：向这个ip的机器发送http/https请求  
3、服务器响应：服务器收到、处理并返回http/https请求  
4、浏览器渲染：浏览器得到并返回内容

## <table>   <tbody>    <tr>     <td align="left">浏览器渲染页面的过程？</td>    </tr>   </tbody>  </table> ##

1、根据html结构生成dom Tree  
2、根据css生成cssom（om：object model）  
3、将dom和cssom整合行程renderTree  
4、浏览器根据renderTree开始渲染和展示  
5、遇到`<script>`，会执行并阻塞渲染  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]

# 重排Reflow #

1、定义  
也叫回流，DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow

## <table>   <tbody>    <tr>     <td align="left">触发reflow？</td>    </tr>   </tbody>  </table> ##

1、增加、删除、修改dom结点时，会导致reflow或repaint  
2、移动dom的位置，或是搞个动画的时候  
3、修改css样式  
4、resize窗口的时候（移动端没有这个问题），或者是滚动的时候，有可能会触发。  
5、修改网页的默认字体时

## <table>   <tbody>    <tr>     <td align="left">如何避免回流？</td>    </tr>   </tbody>  </table> ##

1、属性替代：避免使用触发回流的css属性  
2、新建图层：将频繁重绘回流的dom元素单独作为一个独立图层，那么这个dom元素的重绘和回流的影响只会在这个图层中

# 重绘Repaint #

1、定义  
当各种盒子的位置、大小及其他属性，如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，也是页面的内容出现了，这个过程称之为repaint  
即页面呈现的内容统统画在屏幕上。

## <table>   <tbody>    <tr>     <td align="left">触发repaint？</td>    </tr>   </tbody>  </table> ##

1、dom改动  
2、css改动

## <table>   <tbody>    <tr>     <td align="left">如何尽量减少repaint？</td>    </tr>   </tbody>  </table> ##

1、向浏览器中一次repaint一个节点

## <table>   <tbody>    <tr>     <td align="left">回流重绘的优化？</td>    </tr>   </tbody>  </table> ##

1、translate替换top，left, margin等位移属性。  
top会触发回流但是translate不会  
2、opacity替换visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流。  
visibility会触发重绘但不会触发回流  
3、不要一条一条修改dom样式，预先定义好class，然后修改dom的class  
4、可以将dom离线操作，如先display:none(会有一次reflow)，但是接下来的操作都不会重绘，等离线操作结束后，再显示。  
5、不要把dom节点的属性值（如offsetWidth，offsetHeight, clientWidth, clientHeight）放在循环里，当成循环的变量，  
浏览器回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个栈。但是如果你多次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，导致页面回流增加。  
所以为了避免这个问题，应该用一个变量保存在循环体外。  
offsetWidth/ offsetHeight，会强制刷新缓冲机制  
6、不要使用table，table的每一行改变，甚至一个单元格的样式更新，都会导致整个table回流  
7、动画实现速度的选择  
8、动画新建图层  
9、使用gpu加速，位置变换时，用translate,persepective  
cpu走主线到gpu，会有传输损耗

## <table>   <tbody>    <tr>     <td align="left">触发页面回流重绘的属性？</td>    </tr>   </tbody>  </table> ##

1、盒子模型相关：  
width、height、padding、border、margin、display、border-width、min-height  
2、定位属性及浮动：  
top、right、bottom、left、position、float、clear  
3、节点内部文字结构，行内属性  
text-align、overflow、line-height、vertical-align、font-weight、white-space、font-size

## <table>   <tbody>    <tr>     <td align="left">只触发页面重绘的属性？</td>    </tr>   </tbody>  </table> ##

color、border-style、border-radius、visibility、background、box-shadow、outline

## <table>   <tbody>    <tr>     <td align="left">你了解的浏览器的重绘和回流导致的性能问题？</td>    </tr>   </tbody>  </table> ##

重绘（Repaint）和回流（Reflow）  
重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。

*  重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘
 *  回流是布局或者几何属性需要改变就称为回流。  
    回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

所以以下几个动作可能会导致性能问题：

*  改变 window 大小
 *  改变字体
 *  添加或删除样式
 *  文字改变
 *  定位或者浮动
 *  盒模型
 *

很多人不知道的是，重绘和回流其实和 Event loop 有关。

*  当 Event loop 执行完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。
 *  然后判断是否有 resize或者 scroll，有的话会去触发事件，所以 resize和 scroll事件也是至少 16ms 才会触发一次，并且自带节流功能。
 *  判断是否触发了 media query
 *  更新动画并且发送事件
 *  判断是否有全屏操作事件
 *  执行 requestAnimationFrame回调
 *  执行 IntersectionObserver回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好
 *  更新界面
 *  以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback回调。

减少重绘和回流

*  使用 translate 替代 top

<div class="test"></div>
    <style>
      .test {
          position: absolute;
          top: 10px;
          width: 100px;
          height: 100px;
          background: red;
      }
    </style>
    <script>
      setTimeout(() => {
          // 引起回流
          document.querySelector('.test').style.top = '100px'
      }, 1000)
    </script>

*  使用 visibility替换 display: none，因为前者只会引起重绘，后者会引发回流（改变了布局）  
    把 DOM 离线后修改，比如：先把 DOM 给 display:none(有一次 Reflow)，然后你修改100次，然后再把它显示出来
 *  不要把 DOM 结点的属性值放在一个循环里当成循环里的变量  
    for(let i = 0; i < 1000; i++) \{  
    // 获取 offsetTop 会导致回流，因为需要去获取正确的值  
    console.log(document.querySelector(’.test’).style.offsetTop)  
    \}
 *  不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
 *  动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
 *  CSS 选择符从右往左匹配查找，避免 DOM 深度过深
 *  将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video标签，浏览器会自动将该节点变为图层。

# 浏览器兼容 #

## <table>   <tbody>    <tr>     <td align="left">你做的页面在哪些流览器测试过, 这些浏览器的内核分别是什么?</td>    </tr>   </tbody>  </table> ##

IE6、7、8、FF、Opera、Safari、Chrome、Maxthon  
`IE`: trident内核。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用trident这个内核。  
`Firefox`：gecko内核  
`Safari`：webkit内核  
`Opera`：以前是presto内核，Opera现已改用Google Chrome的Blink内核  
`Chrome`：Blink(基于webkit，Google与Opera Software共同开发)

## <table>   <tbody>    <tr>     <td align="left">经常遇到的浏览器兼容问题？</td>    </tr>   </tbody>  </table> ##

1、在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用  
2、a标签对里不能嵌套a标签对  
3、若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），但如果设置了float属性，就不需要设置display:block。  
4、ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，有padding值，所以应该事先声明ul,li,ol,dl,dd,dd\{margin:0;padding:0\}。  
5、作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应  
6、关于手形光标`cursor: pointer`而hand 只适用于 IE.  
7、css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。  
8、浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; // 这种情况之下IE会产生200px的距离，这时需要设置display:inline; 使浮动忽略}

## <table>   <tbody>    <tr>     <td align="left">浏览器和 Node 事件循环的区别？</td>    </tr>   </tbody>  </table> ##

其中一个主要的区别在于浏览器的event loop 和nodejs的event loop 在处理异步事件的顺序是不同的,nodejs中有micro event;其中Promise属于micro event 该异步事件的处理顺序就和浏览器不同.nodejs V11.0以上 这两者之间的顺序就相同了.

function test () {
       console.log('start')
        setTimeout(() => {
            console.log('children2')
            Promise.resolve().then(() => {console.log('children2-1')})
        }, 0)
        setTimeout(() => {
            console.log('children3')
            Promise.resolve().then(() => {console.log('children3-1')})
        }, 0)
        Promise.resolve().then(() => {console.log('children1')})
        console.log('end') 
    }
    
    test()
    
    // 以上代码在node11以下版本的执行结果(先执行所有的宏任务，再执行微任务)
    // start
    // end
    // children1
    // children2
    // children3
    // children2-1
    // children3-1
    
    // 以上代码在node11及浏览器的执行结果(顺序执行宏任务和微任务)
    // start
    // end
    // children1
    // children2
    // children2-1
    // children3
    // children3-1

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]: /images/20221020/312f76b4ef114bfba8a699ef4117730f.png