小米面试准备

布满荆棘的人生 2023-02-12 09:24 21阅读 0赞

1.浏览器渲染页面的过程  
2.异步  
每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行

比如：在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

一、回调函数  
假定有两个函数f1和f2，后者等待前者的执行结果。

f1();
    　f2();

耗费时间

function f1(callback){ 
    　　　　setTimeout(function () { 
    　　　　　　// f1的任务代码
    　　　　　　callback();
    　　　　}, 1000);
    　　}
    　　f1(f2);

二、事件监听  
另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

还是以f1和f2为例。首先，为f1绑定一个事件（这里采用的jQuery的写法）。

f1.on(‘done’, f2);

上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：

function f1()\{

setTimeout(function () \{

// f1的任务代码

f1.trigger(‘done’);

\}, 1000);

f1.trigger(‘done’)表示，执行完成后，立即触发done事件，从而开始执行f2。

这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以"去耦合"（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。

三、发布/订阅

上一节的"事件"，完全可以理解成"信号"。

我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。

首先，f2向"信号中心"jQuery订阅"done"信号。

jQuery.subscribe(“done”, f2);

然后，f1进行如下改写：

function f1()\{

setTimeout(function () \{

// f1的任务代码

jQuery.publish(“done”);

\}, 1000);

jQuery.publish(“done”)的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引发f2的执行。

此外，f2完成执行后，也可以取消订阅（unsubscribe）。

jQuery.unsubscribe(“done”, f2);

这种方法的性质与"事件监听"类似，但是明显优于后者。因为我们可以通过查看"消息中心"，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

四、Promises对象

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：

f1().then(f2);

f1要进行如下改写（这里使用的是jQuery的实现）：

function f1()\{

var dfd = $.Deferred();

setTimeout(function () \{

// f1的任务代码

dfd.resolve();

\}, 500);

return dfd.promise;

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。

比如，指定多个回调函数：

f1().then(f2).then(f3);

再比如，指定发生错误时的回调函数：

f1().then(f2).fail(f3);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难  
。

3.解释同步异步、阻塞非阻塞、并行并发之间的区别  
并发，并行：  
并发是指一个时间段内，有几个程序都在同一个CPU上运行，但任意一个时刻点上**只有一个**程序在处理机上运行。

并发是多个程序在一个CPU上运行，CPU在多个程序之间快速切换，微观上不是同时运行，任意一个时刻只有一个程序在运行，但宏观上看起来就像多个程序同时运行一样，因为CPU切换速度非常快，时间片是64ms（每64ms切换一次，不同的操作系统有不同的时间），人类的反应速度是100ms，你还没反应过来，CPU已经切换了好几个程序了

并行是指一个时间段内，有几个程序都在几个CPU上运行，任意一个时刻点上，有**多个**程序在同时运行，并且多道程序之间互不干扰。

阻塞与非阻塞：针对函数（程序）运行的方式，在IO未就绪时，是等待就绪还是直接返回（执行别的操作）。

4.浏览器（请求、处理、响应）  
浏览器请求前先去缓存找。  
service Worker 能够操作的缓存是有别于浏览器内部的 memory cache 或者 disk cache 的。我们可以从 Chrome 的 F12 中，Application -> Cache Storage 找到这个单独的“小金库”。除了位置不同之外，这个缓存是永久性的，即关闭 TAB 或者浏览器，下次打开依然还在(而 memory cache 不是)。有两种情况会导致这个缓存中的资源被清除：手动调用 API cache.delete(resource) 或者容量超过限制，被浏览器全部清空。

memory cash：  
memory cache 是内存中的缓存，(与之相对 disk cache 就是硬盘上的缓存)。按照操作系统的常理：先读内存，再读硬盘。

几乎所有的网络请求资源都会被浏览器自动加入到 memory cache 中。但是也正因为数量很大但是浏览器占用的内存不能无限扩大这样两个因素，memory cache 注定只能是个“短期存储”。常规情况下，浏览器的 TAB 关闭后该次浏览的 memory cache 便告失效 (为了给其他 TAB 腾出位置)。而如果极端情况下 (例如一个页面的缓存就占用了超级多的内存)，那可能在 TAB 没关闭之前，排在前面的缓存就已经失效了。  
preloader：

disk cash 也叫 HTTP cache，顾名思义是存储在硬盘上的缓存，因此它是持久存储的，是实际存在于文件系统中的

请求网络  
如果一个请求在上述 3 个位置都没有找到缓存，那么浏览器会正式发送网络请求去获取内容。之后容易想到，为了提升之后请求的缓存命中率，自然要把这个资源添加到缓存中去。

浏览器的行为

所谓浏览器的行为，指的就是用户在浏览器如何操作时，会触发怎样的缓存策略。主要有 3 种：

打开网页，地址栏输入地址： 查找 disk cache 中是否有匹配。如有则使用；如没有则发送网络请求。  
普通刷新 (F5)：因为 TAB 并没有关闭，因此 memory cache 是可用的，会被优先使用(如果匹配的话)。其次才是 disk cache。  
强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache(为了兼容，还带了 Pragma: no-cache)。服务器直接返回 200 和最新内容

强制缓存 (也叫强缓存)

强制缓存的含义是，当客户端请求后，会先访问缓存数据库看缓存是否存在。如果存在则直接返回；不存在则请求真的服务器，响应后再写入缓存数据库。

5.new一个对象的过程都生成了什么？  
创建了一个新的空对象。  
将构造函数的作用域赋值给了新对象，也就是说谁被new了，this就指向谁。  
执行了构造函数中的代码，也就是执行了上面Person里的代码。  
返回新对象。

6.什么是事件冒泡、事件捕获、事件委托

1、事件捕获  
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

2、事件冒泡  
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  
点了一个标签父级元素绑定的事件也会被触发。

3、事件代理  
li标签时间的代理 用ul  
看上去并没有什么区别，但是使用事件代理的方法**少了遍历所有li节点的操作，性能上肯定更加优化**，而且如果后期又动态的增加li节点，不使用事件代理的话还需要再重新给新增的li节点绑定事件，但是使用事件代理的话则不需要了。

阻止事件冒泡：  
e.stopPropagation(); 这里的stopPropagation是标准的事件对象的一个方法，调用即可

7.margin为4个时，margin:上 右 下 左;（为顺时针方向）

margin为3个时，margin:上 左=右 下;

margin为2个时，margin:上=下 左=右;

margin为1个时，margin:上=右=下=左;

8.display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。  
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；  
visibility:hidden 元素上绑定的事件也无法触发；

opacity: 0元素上面绑定的事件是可以触发的。

9.cookie localStorage sessionStorage  
*数据上的生命周期的不同*  
Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效。  
localStorage 除非被永久清除，否则永久保存。  
sessionStorage 仅在当前会话会有效，关闭页面或浏览器后被清除

*存放数据的大小不同*  
Cookie 一般为4kb  
localStorage 和 sessionStorage 一般为5mb

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

10.改变原数组的值：  
var arr = \[\]  
arr.splice()  
arr.reverse()  
arr.fill()  
arr.copyWithin()  
arr.sort()  
arr.push()  
arr.pop()  
arr.unshift()  
arr.shift()

不改变原数组的值  
var arr = \[\]  
arr.slice()  
arr.map()  
arr.forEach()  
arr.every()  
arr.some()  
arr.filter()  
arr.reduce()  
arr.entries()  
arr.find()  
arr.concat(‘1’,\[‘2’,‘3’\]) //\[1,2,3\]

11.实现一个两边宽度固定 中间自适应的三列布局  
圣杯布局  
左中右三个div宽度设置float：left；  
中间的div宽度设置为width：100%；  
外层设置：padding：0 200px 0 200px；  
此时中间的div可以居中自适应宽度，左右两边通过margin移动到相应的位置上。

12.flex布局的了解justify-content  
align-items

13.div居中的方法

1.  text-align：center  
    这种方法只能水平居中块级元素中的行内元素，如inline，inline-block；

<div class="center">
    　　<span class="center_text">
        123
    　　</span>
    </div>
    .center{ 
    　　text-align:center;
    }
    center_text{ 
    　　display:inline-block;
    　　width:500px
    }

1.  margin:0 auto (需要设置div宽度)  
    这种对齐方式要求内部元素是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效.

<div class="center">
    　　<span class="center_text">
        我是块级元素，我是块级元素，我给自己设了display：block
    　　</span>
    </div>
    .center_text{ 
    　　display:block;
    　　width:500px<br>　　margin：0 auto；
    }

1.  position: absolute

.center { 
    2         position: absolute;
    3         top: 50%;
    4         left: 50%;

1.  flex: 需要html5的支持

.center {   
    3    justify-content: center;  
    4    align-items: center;  
    5  }

margin: auto;
    2     position: absolute;
    3     left: 0;
    4     right: 0;

闭包：  
外部读取函数内部的局部变量 ，就是能够读取其他函数内部变量的函数。  
function f1()\{

var n=999;

function f2()\{  
　　　　　　alert(n); // 999  
　　　　\}  
　　\}  
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！  
f2函数，就是闭包。  
== ===的区别

promise机制