记录一次前端面试中遇到的问题

最新推荐文章于 2024-06-15 22:06:32 发布

我想叫蜡笔小小新呀

最新推荐文章于 2024-06-15 22:06:32 发布

阅读量583

点赞数

分类专栏：前端技术文章标签：前端问题前端面试前端基础前端工程师

本文链接：https://blog.csdn.net/romantic_love/article/details/91049629

版权

前端技术专栏收录该内容

22 篇文章 0 订阅

订阅专栏

前端面试中的一些问题：

1、浏览器输入一个url会发生什么?

答：

（1）解析URL

URL（Universal Resource Locator）：统一资源定位符。

当在浏览器中输入URL后，浏览器首先对拿到的URL进行识别，抽取出域名字段。

（2）DNS解析

DNS解析（域名解析），DNS实际上是一个域名和IP对应的数据库。

查询浏览器缓存（浏览器会缓存之前拿到的DNS 2-30分钟时间），如果没有找到，

检查系统缓存，检查hosts文件，这个文件保存了一些以前访问过的网站的域名和IP的数据。它就像是一个本地的数据库。如果找到就可以直接获取目标主机的IP地址了。没有找到的话，需要

检查路由器缓存，路由器有自己的DNS缓存，可能就包括了这在查询的内容；如果没有，要

查询ISP DNS 缓存：ISP服务商DNS缓存（本地服务器缓存）那里可能有相关的内容，如果还不行的话，需要，

递归查询：从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索哦对应目标域名的IP。

（3）浏览器与网站建立TCP连接（三次握手）

详见下面第2问。

（4）请求和传输数据

（5）浏览器渲染页面

客户端拿到服务器端传输来的文件，找到HTML和MIME文件，通过MIME文件，浏览器知道要用页面渲染引擎来处理HTML文件。

ａ.浏览器会解析html源码，然后创建一个 DOM树。

在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。

b.浏览器解析CSS代码，计算出最终的样式数据，形成css对象模型CSSOM。

首先会忽略非法的CSS代码，之后按照浏览器默认设置——用户设置——外链样式——内联样式——HTML中的style样式顺序进行渲染。

c.利用DOM和CSSOM构建一个渲染树（rendering tree）。
渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。

而且一大段文本中的每一个行在渲染树中都是独立的一个节点。
渲染树中的每一个节点都存储有对应的css属性。

ｄ.浏览器就根据渲染树直接把页面绘制到屏幕上。

（考虑下浏览器的缓存策略，在哪个位置）

参考地址：《在浏览器中输入URL并回车后都发生了什么？》

2、三次握手协议

答：

第一次握手：客户端向服务器端发送请求（SYN=1）等待服务器确认；

第二次握手：服务器收到请求并确认，回复一个指令（SYN=1，ACK=1）；

第三次握手：客户端收到服务器的回复指令并返回确认（ACK=1）。

参考地址：《在浏览器中输入URL并回车后都发生了什么？》

3、http1.1与http2的区别？同源策略是什么？协商缓存是什么？

答：

（1）什么是HTTP 2.0

HTTP/2（超文本传输协议第2版，最初命名为HTTP 2.0），是HTTP协议的的第二个主要版本，使用于万维网。HTTP/2是HTTP协议自1999年HTTP 1.1发布后的首个更新，主要基于SPDY协议（是Google开发的基于TCP的应用层协议，用以最小化网络延迟，提升网络速度，优化用户的网络使用体验）。

参考地址：

《HTTP 2.0与HTTP 1.1区别》

《HTTP2与HTTP1.1的区别-详细》

《同源策略和跨域-总结》

《前端浏览器的两种缓存:协商缓存和强缓存》

4、浏览器的跨域？jsonp的机制？

答：

参考地址：

《前端常见跨域解决方案（全）》

《jsonp跨域原理解析》

5、JS有哪几种数据类型？基本类型和引用类型的区别？如何判断数据的类型？如何判断一个数据是不是数组？

答：

（1）JS有哪几种数据类型

ECMAScript中有5种简单数据类型（也称基本数据类型）：Undefined，Null，Boolean，Number，String

有一种复杂数据类型：Object

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型。

（2）基本类型和引用类型的区别

基本类型值指的是简单的数据段，而引用类型指那些可能由多个值构成的对象。

基本类型有Undefined，Null，Boolean，Number，String。这5种类型是按值访问的，因为可以操作保存在变量中的实际的值。

引用类型的值是保存在内存中的对象。js不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。为此，引用类型的值是按引用访问的。

（3）如何判断数据的类型？如何判断一个数据是不是数组？

使用typeof判断五种数据类型 number string boolean undefined object和函数类型 function

使用Object.prototype.toString.call区分对象，数组和null。Object.prototype.toString.call是对象的一个原生原型扩展函数,用来更精确的区分数据类型。

console.log(typeof 'aaa'); // string
console.log(typeof 123); // number
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof Function); // function

 var   gettype=Object.prototype.toString;

       gettype.call('aaaa');          // 输出      [object String]

       gettype.call(2222);            // 输出      [object Number]

       gettype.call(true);            // 输出      [object Boolean]

       gettype.call(undefined);       // 输出      [object Undefined]

       gettype.call(null);            // 输出   [object Null]

       gettype.call({});              // 输出   [object Object]

       gettype.call([]);              // 输出   [object Array]
       gettype.call(function(){});    // 输出   [object Function]

参考地址：

《Javascript高级程序设计（第3版）》

《ECMAScript 6 入门》

《js 判断各种数据类型》

6、SSR中，如何处理高并发情况下导致的后台接口报错？

答：

答案不佳

参考地址：

《Vue SSR常见问题、异常处理以及优化方案》

7、浏览器的缓存怎么实现的

答：

参考地址：

《浏览器缓存原理》

8、如何实现js中sort方法？你知道的排序算法有哪些？如何实现快速排序？

答：

暂未说明sort实现原理，待后续

// 快速排序，使用递归
function QuickSort(arr, func) {
    if (!arr || !arr.length) return [];
    if (arr.length === 1) return arr;
    var pivot = arr[0];
    var smallSet = [];
    var bigSet = [];
    for (var i = 1; i < arr.length; i++) {
        if (func(arr[i], pivot) < 0) {
            smallSet.push(arr[i]);
        } else {
            bigSet.push(arr[i]);
        }
    }
    return QuickSort(smallSet, func).concat([pivot]).concat(QuickSort(bigSet, func));
}

参考地址：

《深入了解javascript 数组的sort方法》