秋招这段时间小编也是在不断的面试，最近也面一些大厂，但都不太如意，面过小米、字节、360大厂，现在终于来到了百度，来给大家分享一下百度前端开发实习一面的试题。

一、自我介绍

这个就不用说了，上来大部分都是让你简单介绍一下自己，相信在准备秋招的小伙伴们都已经得心应手了叭。

二、js的数据类型

这个问的js的一些简单基础问题。js的数据类型分为基本数据类型和引用数据类型。

基本数据类型

1、number 数字类型 2，1.2， -2，+4

2、string 字符串 '正确的值 ’ // " 中文" //黑色是字符串

3、boolean 布尔 true false

4、null 空对象指针

5、undefined 未定义

6、Symbol（es6新增，表示独一无二的值）

7、BigInt（es10新增）

引用数据类型

object对象

1、普通对象 {name: ‘xxxx’ }

2、数组 [’ ’ ,1,true,null,undefined]

3、Math 数学对象

4、Date的实例

5、/^$/ 正则

6、函数

7、原型

8、arguments

9、元素集合

function 函数 1、普通函数 2、构造函数（类） 3、类

这里我就不再具体的说啦。大家有不懂的可以看我之前写的文章。

js四大常用类型数据判断（内含面试热点！！）今天，小编学习了js中的四种类型判断以及call源码的底层逻辑，深有所获，来 - 掘金 (juejin.cn)

三、如何解决跨域问题

这个是面试中经常会被问到的问题，我们先来了解一下为什么会发生跨域？

跨域是指在浏览器端，由于浏览器的同源策略（Same Origin Policy）限制，导致无法直接访问来自其他域的资源。

当前端页面尝试从与其不同源的服务器请求资源时，浏览器的同源策略（Same-Origin Policy）阻止了这种跨域请求。

同源机制/同源策略

同源机制（也叫同源策略）是浏览器中的一种重要安全机制，主要限制不同源的文档或脚本如何交互，以保护用户信息的安全。这里的“同源”指的是协议、域名和端口号三个要素必须完全相同。服务器间访问则不受同源策略限制，它们通常通过代码设置白名单或权限来控制访问。

同源策略的主要内容

dom节点：同源策略不允许不同源的两个页面通过JavaScript访问对方的dom节点

网络：限制了xhr，fetch等跨域请求

数据：同源策略不允许不同源的两个页面互相访问浏览器存储，Cookie、IndexedDB和LocalStorage等

什么时候发生的跨域

因为浏览器有同源策略，所以产生了跨域问题，没有浏览器根本不可能有跨域问题，所以跨域一定是发生在浏览器这一端的。当我们的页面发出Ajax请求时，这里是不会发生跨域的，服务器能够接收到页面发出的请求，但是当浏览器接收到服务器返回过来的数据之前，出于安全考虑会对响应做出校验，这个时候就有可能会发生跨域问题。

如何解决跨域问题

一、JSONP

1、借助script标签的src属性不受同源策略的影响来发送请求

2、给后端携带一个参数 callback 并在前端定义callback函数体

3、后端返回callback的调用形式并将要影响的值作为callback的实参

4、当浏览器接受到响应后，就会触发全局的callback函数从而让callback

以参数的形式接受到后端的响应。

缺点：

需要后端配合，只能发GET请求

二、cors

通过设置响应头中的某些字段，比如，access-control-allow-origin 设置允许的源来通知浏览器此时同源策略不需要生效。

三、代理服务器

通过设置一个代理服务器，比如我的浏览器要朝他人的后端请求数据，我可以先设置一个代理服务器后端，让我的浏览器先朝我自己的后端也就是代理服务器发送请求，然后再让代理服务器朝他人的后端发送请求得到数据再返回来。

四、Nginx反向代理

相当于node代理

在服务器上装一个nginx,它其实就是一个后端代理，它就是一个软件，有配置文件，可以配置前端后端长啥样，配置好了之后，当后端返回一个响应，就由这个Nginx接受到。Nginx就相当于启动了一个web服务，Nginx在帮你把这个数据给前端。

五、WebSocket

socket协议天生不受同源协议的影响

WebSocket 是一种基于 TCP 的全双工通信协议，它允许客户端和服务器之间进行双向通信，与传统的 HTTP 请求-响应模式不同，WebSocket 建立一次连接后，可以保持长时间的通信会话。

虽然 WebSocket 协议本身并不受同源策略的限制，但在使用 WebSocket 进行跨域通信时，仍然需要注意一些安全性问题。一种常见的做法是通过服务端设置 CORS 头部，允许特定的源访问 WebSocket 服务。

六、postMessage

当页面一通过iframe嵌套了页面二，这两个页面上已无法进行通讯的，因为跨域了，但是使用postMessage可以实现跨域通信.

七、document.domain

两个页面通过iframe进行嵌套，且两个页面的二级域名一致

四、koa框架

官网介绍： Koa 是一个新的 web 框架，通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

Koa-- 基于 Node.js 平台的下一代 web 开发框架

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。

koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。开发思路和 express 差不多，最大的特点就是可以避免异步嵌套。

这里我就不详细介绍了，大家有需要了解的可以到官网看看：

官网API

五、你了解JSP吗

‌**JSP（Java Server Pages）**‌是一种动态网页技术，它允许在HTML页面中嵌入Java代码，这些代码在服务器端执行，根据客户端的请求动态生成HTML、XML或其他格式的Web页面。JSP技术由[Sun Microsystems](www.baidu.com/s?sa=re_dqa… Microsystems&rsv_pq=c33ce34b00576376&oq=编程中什么是JSP&rsv_t=66dd+2cM0xh/UVaElxKWko26OoPu8H87FVLGBY6vXcWUv1tNROIxnbnpA04&tn=baidu&ie=utf-8)公司主导创建，旨在简化服务器端的Web开发，尤其是对于动态内容的生成。JSP技术是[Java EE](www.baidu.com/s?sa=re_dqa… EE&rsv_pq=c33ce34b00576376&oq=编程中什么是JSP&rsv_t=66dd+2cM0xh/UVaElxKWko26OoPu8H87FVLGBY6vXcWUv1tNROIxnbnpA04&tn=baidu&ie=utf-8)的一部分，可以与Servlets、JavaBeans和JavaServerFaces等组件结合使用，实现复杂的Web应用程序。

JSP的主要特点包括：

‌模板化‌：允许以静态页面为模板，动态生成其中的部分内容。
‌跨平台‌：继承了Java的跨平台优势，实现“一次编写，处处运行”。
‌可重用性‌：通过JavaBean和标签库技术，可以复用常用的功能代码。
‌良好的工具支持‌：有丰富的开发工具支持，便于开发维护。

JSP的工作原理大致如下：

当服务器上的JSP页面被请求时，JSP引擎会将JSP页面文件转译成Java文件。
然后将Java文件编译成字节码文件。
通过执行字节码文件响应客户端的请求，生成动态页面内容并发送给客户端（浏览器）。

JSP的引入，使得开发人员能够在Web页面中嵌入复杂的逻辑和业务处理，从而提供更丰富的用户体验和更好的交互性。同时，JSP技术也促进了表示层、控制层和模型层的分离，使得Web应用程序的开发更加模块化和可维护‌12。

六、inconfont的原理

“Iconfont" 是阿里巴巴推出的一款矢量图标字体库，广泛应用于网页和移动应用的设计中。Iconfont 提供了大量的图标资源，并支持自定义生成字体文件，方便设计师和开发者在项目中使用。

Iconfont 组件库的实现原理

1. 字体图标（Font Icons）

Iconfont 主要通过字体图标来实现图标展示。字体图标本质上是特殊的字符，通过 Unicode 编码来表示。这些字符被定义在一个自定义字体文件中（如 .ttf, .woff, .eot 等格式），并通过 CSS 来显示。

2. CSS 使用

在 HTML 中，你可以像使用普通文本那样插入一个图标字符，然后通过 CSS 来指定所使用的字体文件以及具体的字符样式。例如：

<span class="icon">&#xe600;</span>

CSS 中定义字体文件：

@font-face {
  font-family: 'iconfont'; /* 项目中自定义的字体名称 */
  src: url('iconfont.eot'); /* IE9 */
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
       url('iconfont.woff') format('woff'),
       url('iconfont.ttf') format('truetype'),
       url('iconfont.svg#iconfont') format('svg'); /* 兼容 Chrome、Firefox 和 Opera */
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px; /* 根据需求调整 */
}

3. 动态加载

对于一些动态生成的应用程序，可以利用 JavaScript 动态插入字体图标或者通过 AJAX 加载远程的字体文件。

4. 兼容性

为了确保浏览器兼容性，Iconfont 提供了多种字体格式以适应不同的浏览器环境。比如 .eot 文件主要用于 Internet Explorer，而 .woff 则用于最新版本的现代浏览器。

5. 可定制性

用户可以在 Iconfont 网站上选择自己需要的图标，并生成相应的字体文件和 CSS 代码。这样可以减少不必要的图标占用的空间，提高加载速度。

总结

Iconfont 通过使用字体图标的方式实现了图标组件库的功能，这种方式相比于传统的图片图标具有更好的可扩展性和灵活性，因为字体图标可以根据父元素的字体大小和颜色属性自动调整，而且在高分辨率屏幕上也能保持清晰。

七、three.js的载体

Three.js 是一个基于 WebGL 的 3D 图形库，用于在网页中渲染 3D 图形。WebGL 是一个用于渲染交互式 3D 和 2D 图形的标准 Web 技术，它直接在用户的浏览器中运行，无需安装任何插件。

Three.js 的载体

Three.js 的主要载体是浏览器中的 HTML5 <canvas> 元素，通过 WebGL 渲染 3D 图形。具体来说：

HTML5 <canvas> 元素：
- <canvas> 元素是一个矩形区域，可以在其中绘制图形和路径。在 Three.js 中，通常会创建一个 <canvas> 元素作为 WebGL 渲染器的目标。
WebGL：
- WebGL 是一种 3D 图形 API，用于在网页上呈现硬件加速的 3D 图形。Three.js 利用 WebGL 来处理复杂的 3D 场景渲染。
JavaScript：
- Three.js 是用 JavaScript 编写的，因此它需要运行在一个支持 JavaScript 的环境中，通常是浏览器。开发者可以通过 JavaScript 来控制 Three.js 的行为，创建和控制 3D 对象、场景、相机、光照等。

下面是一个简单的示例，展示如何使用 Three.js 在 HTML 页面中创建一个基本的 3D 场景：

<!DOCTYPE html>
<html>
<head>
  <title>My first Three.js app</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
  <script>
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建几何体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 定位相机
    camera.position.z = 5;

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

在这个示例中，我们创建了一个简单的立方体，并使用 <canvas> 元素作为 WebGL 的渲染目标。通过 Three.js 的 API，我们可以方便地设置场景、相机、渲染器、几何体、材质等，并通过动画循环不断更新场景。

结论

Three.js 的主要载体是浏览器中的 <canvas> 元素，它依赖于 WebGL 技术来渲染 3D 图形。通过 JavaScript，Three.js 提供了一个易于使用的抽象层，使得开发者能够更容易地创建和管理复杂的 3D 场景。

八、this的问题

这个也是面试中经常会被问到并且很重要的一个问题。大家一定要熟练掌握

一、为什么要有this?

为了让对象中的函数有能力访问对象自己的属性

二、this的优点？

this可以显著的提升代码质量，减少上下文参数的传递

可以产生作用域的地方就可以用/this，除了块级作用域

就两种一个是全局，一个是函数体内。还有一个地方ever欺骗词法作用域也可以用this.

三、this的绑定规则

1、默认绑定：

当一个函数独立调用，不带任何修饰符的时候

函数在哪个词法作用域下生效，函数的this就指向哪里

（只要是默认绑定，this一定指向window）

函数本身是没有词法作用域（[[scope]]）的，它的词法作用域是由函数声明的位置确定的或者this坚决不能访问词法作用域内部

var

在全局，通过var声明的变量相当于是在window对象上添加了一个属性

2、隐式绑定

当一个函数被一个对象所引用（非调用），再次调用时，函数中的this会指向该对象。

function foo(){
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
    // 相当于下面这样
    // foo: function foo(){
    //	console.log(this.a)
    // }
}
obj.foo() // 2

先解释下这段代码：obj中有个foo属性，然后这个属性的值又是一个函数体，就相当于foo这个函数体写在了foo这个key里面的value中，最后obj.foo()中obj.foo就是相当于foo这个函数体，然后()就是一个调用的意思

根据隐式绑定的规则，foo这个函数被obj这个函数引用，等你obj再次调用这个函数时，函数中的this最终指向了obj这个对象，而非全局，这就是隐式绑定，因此最终打印2

3、隐式丢失

隐式丢失是隐式绑定的一种，当一个函数被多个函数链式调用时，函数中的this最终指向引用函数的对象

function foo(){
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
}
var obj2 = {
    a: 3,
    obj: obj
}
obj2.obj.foo()

这段代码如何理解呢？我们有两种理解关于最后一行代码，一种是obj2.obj就是obj这个对象，然后obj这个对象去obj.foo()，就是成了一个隐式绑定，this会指向obj。另一种是obj2.(obj.foo())，obj.foo()就是foo()，然后obj2.foo()，相当于obj2调用了这个函数，this会指向obj2。两种理解好像都没问题，其实大部分人应该就是第一种理解，其实最终确实是第一种理解，换句话说，就近原则，最终输出2

4、显示绑定

显示绑定就是使用call、apply或bind方法人为干预他，让他代指谁

1、call

function foo(){
    console.log(this.a);
}
var obj = {
    a: 2
}
foo.call(obj) // 2

这个call的用法就是把foo的this指向了obj

foo中有参数时如何使用

function foo(n){
    console.log(this.a,n);
}
var obj = {
    a: 2
}
foo.call(obj,100) // 2 100

可以看出call与foo共用这个括号

2、apply

3、bind

五、new绑定

当使用new关键字进行实例化一个构造函数时，this最终指向该实例化对象

六、箭头函数

箭头函数没有this这个概念，在箭头函数中的this指向了外层第一个非箭头函数

九、如何实现一个三栏布局

具体的方法大家可以去看看我之前写的这篇文章

三栏布局：打造你想要的网页体验！前言：什么是三栏布局？就是主题内容优先加载,左右固定宽度，中间自适应。简单的说就是当 - 掘金 (juejin.cn)

十、如何实现水平垂直居中

这个是css中经常会被面试官问到的问题，有时候面试官还会让你手写，大家一定要背出来

情景：两个方块，大的包含小的，让小的水平垂直居中

方法一：定位absolute+translate

给top和left分别一个50%，然后自身再top和left负50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            position: relative;
        }
        .wrap {
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* margin-top: -100px; */
            /* margin-left: -100px; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap"></div>
    </div>
</body>
</html>

如果已知宽高的时候也可以不用translate,直接写成margin-left:-100px和margin-top:-100px.

方法二：定位+margin auto

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
 </style>
 <div class="father">
    <div class="son"></div>
 </div

父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高

这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin:auto它就可以上下左右都居中了。

方法三：弹性布局flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap {
		   width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap"></div>
    </div>
</body>
</html>

justify-content: center是主轴居中，align-item: center是交叉轴居中

方法四：网格布局grid

写法和弹性一模一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .wrap {
            width: 200px; 
            height: 200px; 
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">hhhhhh</div>
    </div>
</body>
</html>

方法五：表格布局table,text-align和vertical-aligin

用表格布局就需要用上text-align: center来居中，那么就需要子元素是非块级元素，所以将子元素设置display: inline-block成为行内块，表格元素在y轴上居中用vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .wrap {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">hhhhhh</div>
    </div>
</body>
</html>

文字水平垂直居中text-aligin、line-height

对于文字的水平垂直居中，你可以使用text-align: center和line-height来设置，line-height的参数设置成父容器的高即可

块级元素仅水平居中 margin: 0 auto

margin: 0 auto常见于仅水平居中块级元素，无法垂直居中

十一、浏览器存储方式有哪些？

Cookies：
- Cookies 是最早期的一种存储机制，主要用于保存用户的状态信息，如认证令牌或偏好设置。
- Cookies 会随着 HTTP 请求一起发送给服务器，因此可用于身份验证。
- Cookies 的大小有限制（大约 4KB），并且不适合存储大量数据。
- Cookies 支持设置过期时间、路径、域名、安全标志（secure）和 HTTPOnly 标志。
Web Storage (localStorage/sessionStorage)：
- Web Storage 提供了两种存储类型：localStorage 和 sessionStorage。
- localStorage 用于持久存储数据，除非用户手动清除或通过 JavaScript 删除，否则数据不会过期。
- sessionStorage 用于临时存储数据，当页面会话结束时（通常是关闭浏览器窗口或标签页），数据会被清除。
- Web Storage 的数据不会自动发送给服务器，除非开发者显式地这样做。
- Web Storage 的容量比 Cookies 大得多（约 5MB）。
IndexedDB：
- IndexedDB 是一个完整的数据库系统，支持客户端数据存储。
- 数据可以结构化存储，并且支持索引和事务。
- IndexedDB 是异步的，适合存储大量数据。
- 与 Web Storage 相比，IndexedDB 更加复杂，但功能也更强大。
File System APIs (FileReader/FileWriter)：
- 这些 API 允许在客户端存储文件，但需要用户许可。
- 主要用于离线存储和文件操作。

这里后面面试官又问我为什么现在仍然很多人用cookie? 我是从这几个方面来回答他的

身份验证：

许多网站仍然依赖 Cookies 来进行身份验证，因为 Cookies 会随请求一起发送给服务器，从而允许服务器验证用户的身份。
兼容性：

Cookies 是最古老的存储机制之一，几乎所有浏览器都支持，并且许多遗留系统依然依赖 Cookies。
简单易用：

Cookies 的设置和读取相对简单，不需要额外的 JavaScript 操作，只需要简单的 HTTP 头部设置即可。
跨域请求：

Cookies 可以设置跨域访问权限，这对于单点登录（SSO）等场景非常重要。
HTTPOnly 标志：

Cookies 支持 HTTPOnly 标志，这可以防止通过 JavaScript 脚本读取 Cookies，增加了安全性。

十二、怎么实现让不同的用户A和B访问我展示不同的CSS但不跳转路由？

我当时听到面试官问我这个问题的时候其实是有点迷的，后面去搜了一些资料。

方法一：使用 JavaScript 动态加载 CSS

这种方法通过 JavaScript 动态创建 <link> 标签来加载 CSS 文件。根据用户的标识符（如用户名、用户 ID 或者 Cookie 中的信息），可以加载不同的 CSS 文件。

示例代码：

假设你有一个后端 API，可以根据用户的 ID 返回不同的 CSS 文件地址：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic CSS Example</title>
    <script>
        // 用户 ID 示例，实际中应该从服务器获取
        var userId = 'A'; // 或者 'B'

        // 根据用户 ID 获取对应的 CSS 文件
        function getCssForUser(userId) {
            if (userId === 'A') {
                return 'css/userA.css';
            } else if (userId === 'B') {
                return 'css/userB.css';
            }
            return ''; // 默认值或错误处理
        }

        // 动态加载 CSS 文件
        function loadDynamicCSS(url) {
            var link = document.createElement('link');
            link.type = 'text/css';
            link.rel = 'stylesheet';
            link.href = url;
            document.head.appendChild(link);
        }

        // 初始化时加载 CSS
        window.onload = function() {
            var cssUrl = getCssForUser(userId);
            loadDynamicCSS(cssUrl);
        };
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

方法二：使用条件注释（仅限 IE 浏览器）

虽然条件注释主要针对 Internet Explorer 浏览器，但在某些情况下也可以用来做简单的动态 CSS 加载。不过这不是推荐的做法，因为它仅限于 IE 浏览器，并且需要服务器端的支持。

方法三：内联样式或动态修改 CSS 类

如果不需要加载外部 CSS 文件，而是根据用户的标识来修改页面元素的样式，可以直接在 JavaScript 中修改元素的内联样式或更改其类名。

十三、算法题

接下来就到了面试官考算法的时候了，他给了我一道算法题和一道1代码输出题，但是题目我有点不太记得了，总体感觉还是有一点难度的，但是我也是在面试官的频频点拨下才完成的这道算法题。

十四、平常有没有右键检查过某些东西的源代码并去了解过？

这里我也跟面试官说会的，平常遇到一些不会的代码或者新鲜的事物都会去研究检查一下的，像前面提到three,js里我就跟他说我之前看到旋转的地球仪就会去了解他是怎么实现的。就是用的three.js

总结

最后就是面试官也是很亲切，很和蔼的和我聊了一会闲天，问我的爱好，问我平常空闲的时间都喜欢干些啥以及平常是如何释放压力的，总之就是聊了差不多十几二十分钟的闲天，不得不说这确实是所有面试过程中遇到的最亲切和蔼最好的面试官了，面试的过程中我不懂不清楚的问题还会想办法点拨我，真的感动死啦！不出意外的话也和我预想的一样，最终一面也是让我通过啦！！

百度前端开发一面