百度一面 + 空天院一面百度一面 + 空天院一面百度一面 + 空天院一面百度一面 + 空天院一面百度一面 + 空天院一面

由于空天院的面试非常简短，故合为一起

##########################百度

1.css三列等高布局

法一：使用浮动此处的三列等高布局是利用了CSS的特性，先给容器加上一个很大的padding-bottom再用 margin-bottom负值补回来，而外层（#Container）用overflow:hidden将不显示区域隐藏起来

margin-bottom的负值可以将元素向上折叠（即消除掉这部分），此部分正好和padding-bottom相抵消掉

微信图片_202304071019007.jpg

blog.csdn.net/biaobiao121…

www.cnblogs.com/xxx91hx/p/4…

法二：使用flex 此法比较简单，父元素使用flex，子元素自动撑开，撑开的同时父元素会拿到子元素的高度并将其继承给其他子元素

2.响应式布局

rem和em
- blog.csdn.net/androidiosk…
viewport：vw、vh
transform的scale
媒体查询
flex布局
检测设备类型准备多套css

juejin.cn/post/715501…

3.如何直接使用rem

4.媒体查询是什么

可以根据不同的条件（宽高等）来动态加载不同的css样式 juejin.cn/post/697101…

5.Object.create是什么

juejin.cn/post/684490…

6.原型链讲一讲，通过prototype继承的多了很多额外属性，如何清除掉

使用Object.create(null,a:{value:10}即可创建不继承Object.prototype上属性（valueof，toString等）的对象

字面量和new关键字创建的对象是Object的实例，原型指向Object.prototype，继承内置对象Object
Object.create(arg, pro)创建的对象的原型取决于arg，arg为null，新对象是空对象，没有原型，不继承任何对象；arg为指定对象，新对象的原型指向指定对象，继承指定对象

7.new的实现

var obj = new Object(); // 创建一个空对象
obj.__proto__ = Object.prototype; // obj的__proto__指向构造函数Object的prototype
var result = Object.call(obj); // 把构造函数Object的this指向obj，并执行构造函数Object把结果赋值给result
if (typeof(result) === 'object') {
    objB = result; // 构造函数Object的执行结果是引用类型，就把这个引用类型的对象返回给objB
} else {
    objB = obj; // 构造函数Object的执行结果是值类型，就返回obj这个空对象给objB
}

8.call、apply、bind哪个效率高

call的效率高

9.import和require哪个改变当前数会改变原数，哪个改变原数会改变当前数

require/exports 输出的是值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
import/export 模块输出的是值的引用。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
若文件引用的模块值改变，require 引入的模块值不会改变，而 import 引入的模块值会改变。

blog.csdn.net/weixin_4411…

10.event loop的输出题

11.http几个版本之间的区别

HTTP1.0 HTTP 1.1主要区别****

长连接****

HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支持长连接。

HTTP是基于TCP/IP协议的，创建一个TCP连接是需要经过三次握手的,有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响。因此最好能维持一个长连接，可以用个长连接来发多个请求。

节约带宽

HTTP 1.1支持只发送header信息(不带任何body信息)，如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端如果接受到100，才开始把请求body发送到服务器。

这样当服务器返回401的时候，客户端就可以不用发送请求body了，节约了带宽。

另外HTTP还支持传送内容的一部分。这样当客户端已经有一部分的资源后，只需要跟服务器请求另外的部分资源即可。这是支持文件断点续传的基础。

HOST域

现在可以web server例如tomat，设置虚拟站点是非常常见的，也即是说，web server上的多个虚拟站点可以共享同一个ip和端口。

HTTP1.0是没有host域的，HTTP1.1才支持这个参数。

HTTP1.1 HTTP 2.0主要区别

多路复用

HTTP2.0使用了(类似epoll)多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。

当然HTTP1.1也可以多建立几个TCP连接，来支持处理更多并发的请求，但是创建TCP连接本身也是有开销的。

TCP连接有一个预热和保护的过程，先检查数据是否传送成功，一旦成功过，则慢慢加大传输速度。因此对应瞬时并发的连接，服务器的响应就会变慢。所以最好能使用一个建立好的连接，并且这个连接可以支持瞬时并发的请求。

数据压缩

HTTP1.1不支持header数据的压缩，HTTP2.0使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。

请求与响应首部的定义在HTTP2.0中基本没有变，只是所有首部键必须全部小写，而且要求行要独立为:method:、:scheme:、:host:、:path:这些键值对

对于相同的数据，不再重新通过每次请求和响应发送。每个新的首部键值对要么追加到当前表的末尾，要么替换表中之前的值。首部表在HTTP2.0的链接存续期内始终存在，由客户端和服务端共同渐进的更新。

服务器推送

意思是说，当我们对支持HTTP2.0的web server请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。

服务器端推送的这些资源其实存在客户端的某处地方，客户端直接从本地加载这些资源就可以了，不用走网络，速度自然是快很多的。

二进制帧层****

HTTP2.0会把所有信息分割成更小的消息和帧，并采用二进制格式将其封装。例如header封装到Headers帧，request body封装到Data帧。

HTTP2.0通信都在一个TCP连接上完成，这个连接可以承载任意数量的双向数据流，相应的每个数据流以消息的形式发送。而消息由一或多个帧组成，这些帧可以乱序发送，然后根据每个帧首部的流标识符重新组装。

12.重排和重绘讲一下，访问DOM位置信息会引发重排吗

重排在layout阶段
重绘在paint阶段

导致页面重排的一些操作

内容改变：文本改变(包括字体大小)或者图片的尺寸改变 DOM元素的几何属性改变：元素的宽高改变时，原来渲染树中的DOM节点会失效，浏览器会根据DOM的变化重新构建渲染树中的相关节点。如果父元素的几何属性发生变化时，会导致子元素以及兄弟元素的位置发生变化，从而引起重排。 DOM树结构发生变化：添加DOM节点，修改DOM节点的位置以及删除某个节点都会对渲染树进行修改，从而导致重排。浏览器的布局是自上而下的，修改当前元素不会都之前的元素造成影响，但是会对之后的元素造成影响，导致重排。获取某些属性时：当获取一些属性值时，浏览器为了保证获取到正确的值也会引起重排。如元素的offsetTop，offsetLeft，offsetHeight，offsetWidth，scrollTop，scrollWidth，scrollLeft，scrollHeight、浏览器窗口尺寸发生改变时：浏览器窗口的尺寸发生改变时，会导致所有元素的尺寸发生变化，从而导致重排。页面初始化、页面第一次渲染时（3）导致页面重绘的一些操作

只修改元素的样式，而未修改元素的大小和位置，引起重绘

下面这篇文章写的非常好可以看看 juejin.cn/post/707551…

13.埋点系统做过吗

使用src+gif的方式进行上报，这样可以防止跨域，而且图片资源在js中可以new而不必创建dom，其次gif比较小传输速率更快 juejin.cn/post/706512…

百度一面 + 空天院一面