2019前端经典面试题

第三种方法 负margin值 〈div id=\"main”>

＃main { float: left； width： 100%; ｝

＃mainContainer { margin： 0 230px； height： 200px； background: green； }

＃left { float: left;

margin-left： -100％; width: 230px}

#right {

float： left；

margin-left: -230px; width： 230px; }

#left .inner,

#right .inner ｛

background： orange; margin: 0 10px; height: 200px； ｝

20，js有几种数据类型？其中基本数据类型有哪些？

基本数据类型有 Boolean，undefined,null，number，string 应用类型有 object，array，function

21,undefined和null的区别

Null 代表空值，代表一个空对象指针，一个特殊的对象值 Undefined 是未定义，类型也是undefined

22，http和https有什么区别？如何灵活运用？

Http是http运行在TCP之上，传输内容是明文，客户端和服务器无法验证对方身份。

HTTPS是http运行在SSL/tls之上，SSL/tls运行在TCP上，所有内容都是经过加密。加密采用对称加密，但是秘钥用服务器证书进行非对称加密。服务器和客户端都是可以互相验证身份.

23，常见的Http状态码

2开头，请求成功,表示成功处理了请求的状态代码

3开头，请求重定向，表示完成请求，需要进一步操作,一般是重定向 4开头,请求错误,表示请求出错，妨碍了服务器的处理 5开头，这些状态码表示服务器在尝试处理请求时发生内部错误,服务器本身出错而不是请求出错

24，如何进行网站性能的优化

原因：用户角度 加载速度提高，更好的交互体验 服务商角度 减少页面请求，降低带宽，节省资源 方法：1，JavaScript优化和打包

2,按需加载资源

3，在使用DOM操作库时用上array—ids 4，缓存

5，启用HTTP/2 6，应用性能分析 7，使用负载均衡方案 8,同构

9，使用索引加快数据库查询 10，使用更快的转译方案

11，避免因JavaScript和css的使用而阻塞渲染 12,图片编码优化

25,react和vue有哪些不同，说说你对这两个框架的看法

相同点：都支持服务器渲染 都有virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现了webComponent规范 数据驱动视图 都支持native方案,react的react native 和vue的weex

不同点：react严格上只针对MVC的view层，vue则是mvvm模式 Virtual DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而对于react来说，每次应用状态被改变，全部组件都会被重新渲染,所以react需要shouldComponentUPdate这个生命周期函数来进行控制。 组件的写法不一样。。。 数据绑定，vue是双向的，react是单向的 State对象在react应用中不可变的，需要使用setstate方法更新状态，在vue中state对象对象不是必须的，数据由data属性在vue对象中管理

26，什么是mvvm mvc 有什么区别，原理?

1，MVC(model-view—controller）

MVC是比较直观的架构模式，用户模式—>view(负责接收用户的操作输入)—>controller（业务逻辑处理）—〉view(将结果反馈给view)

2，MVVM（model—view—viewmodel)

将”数据模型数据双向绑定\"的思想作为核心，因此model和view没有什么关系，之后痛过viewmodel进行交互，而model和viewmodel之间的交互是双向的，因此数据的视图的变化会同时修改数据源，而数据源的数据变化也会立刻反应view.

27，px和em的区别

Px表示像素，是一个绝对单位，不会因为其他元素而改变

Em表示相对于父元素的字体大小,em是相对单位，会受到其他元素的影响

28，优雅降级和渐进增强

渐进增强(向上兼容）：一开始就针对低版本浏览器进行构筑界面，完成基本功能,然后在针对高级浏览器进行效果，交互，追加功能达到更好的体验 优雅降级（向下兼容）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。

29，eval（）的作用

把字符串参数解析成JS代码并运行，并返回执行的结果； 例如：eval（“2+3”）；//执行加运算并返回执行的结果。 Eval（“var age=10”)；//声明一个变量age Eval（）的作用域 Function(）｛ Eval(“var x=1”）；//等效于var x=1； Console。log(x)；//输出1 ｝ a（)；

console。log（x）；//错误，没有定义x

30，js哪些操作会泄露内存

1， 意外的全局变量引起的内存泄漏 2， 闭包引起的

3， 没有清理DOM元素的应用 4， 被遗忘的定时器或者回调 5， 子元素存在引起的

31，浏览器缓存有哪些？通常的缓存有哪几种？

1， HTTP缓存 2， Websql 3， Cookies 4， Localstorage 5， Sessionstorage 6， Flash缓存

32，bootstrap响应式原理

百分比布局+媒体查询

33,关于js事件冒泡与js时间代理(事件委托）

1， 事件冒泡： 当一个子元素被触发时（如onclick），该事件会从事件源（被触发的子元素)开始逐级向上传播,出发父级元素的点击事件。 2， 事件委托： 将子元素的事件通过冒泡的形式交由父元素来执行 例如:

1. var ul = document.getElementById（'parentUl’）; 2. ul.onclick=function (event） ｛ 3。 var e = event｜|window.event,

4. source = e。target || e.srcElement;//target表示在事件冒泡中触发事件的源元素,在IE中是srcElement

5. if（source.nodeName.toLowerCase() == \"li”）｛ //判断只有li触发的才会输出内容 6. alert(source。innerHTML）; 7。 }

8。 stopPropagation(e）； //阻止继续冒泡 9. };

10. function addElement(） ｛

11. var li = document.createElement(’li’）； 12。 li。innerHTML=”我是新孩子”； 13。 ul.appendChild（li); 14。 }

34，css样式覆盖规则

规则一：由于继承而发生样式冲突时,最近祖先获胜（就近原则）； 规则二：继承样式和直接指定的样式冲突时,直接指定的样式获胜 规则三：直接指定样式发生冲突时，样式权值高的获胜； 规则四：样式权值相等时，后者获胜。 规则五:！important的样式不被覆盖.

35,请简要描述margin重合问题以及解决方式

1，同向margin重叠

这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由

最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。 解决方法：

（1） 在最外层的div中加入overflow：hidden；zoom：1；（zoom这个属性是ie专有属

性,除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性,清除浮动，清除margin重叠等作用.)

（2） 在最外层加入padding：1px；

（3） 在最外层加入:border：1px solid ＃000000; 2,异向重叠问题：

Float：left（ie6专属，或解决ie8+等浏览器的同向重叠问题）

36，position的值，relative\\absolute\\fixed分别相对于进行谁定位？

Absolute：绝对定位 相对于最近一级

Fixed：绝对定位 相对于浏览器窗口或frame进行定位 Relative：相对定位 相对于其在普通流的位置 Static:默认值 没有定位

Sticky:粘性定位 文档位置根据正常文档流计算得出

37，什么是闭包，如何使用，为什么使用？

闭包就是在函数内定义一个函数。

优点：可以读取函数内部的变量 这些变量的值始终保存在内存中

缺点：内存消耗大且容易造成内存泄漏 闭包会在父函数外部，改变父函数内部变量的值

38，请解释一下jsonp的工作原理，以及它为什么不是真正的ajax。

Jsonp是一个简单的跨域方式；HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源

JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

AJAX是不跨域的，而JSONP是一个是跨域的,还有就是二者接收参数形式不一样

39，请解释一下JavaScript的同源.

同源规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。当两个域具有相同的协议,相同的端口，相同的host，那么我们就可以认为是相同的域.

40，怎样添加，移除，移动，复制，创建和查找节点？

1， 创建新节点

Createdocumentfragment（) //创建一个DOM片段 CreateElement(） //创建一个具体的元素 CreateTextNode(） //创建一个文本节点

2， 添加，移除，替换，插入 Appendchild（)//添加 Removechild（) //移除 Replacechild（） //替换 InsertBefore(） //插入

3， 查找

GetelementsBytagname（)//通过标签名

Getelementsbyname（)//通过元素的name属性的值 GetelementbyId（）//通过元素id,唯一性

41，垃圾回收机制方式及内存管理

垃圾回收机制

1， 定义和用法：垃圾回收机制,执行环境负责管理代码执行过程中使用的内存.

2， 原理：垃圾回收机制会定期找出那些不再使用的变量，然后释放其内存。但是这个过程

不是实时的，开销较大，所以会按固定时间间隔周期性的执行。 3， 实例如下： function fn1（） {

var obj = {name： ’hanzichi', age: 10｝; ｝

function fn2() {

var obj = ｛name：’hanzichi’, age： 10｝; return obj;

｝var a = fn1(）;var b = fn2();

fn1中定义的obj为局部变量,而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中，返回的对象被全局变量b所指向,所以该块内存并不会被释放。

4， 标记回收策略：标记清除和引用计数.

42,jQuery的事件委托方法blind，live，delegate，on之间有什么区别?

（1），blind

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数;

语法：bind（type,[data］,function（eventObject））;

特点：

（1）、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

（2)、当页面加载完的时候，你才可以进行bind(),所以可能产生效率问题.

实例如下：$（ \"#members li a\" ）.bind（ \"click\） ｛｝ )；

(2）,live

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：live（type， [data］, fn); 特点：

(1）、live方法并没有将绑定到自己（this）身上，而是绑定到了this。context上了.

（2)、live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document，新添加的元素不必再绑定一次.

(3）、使用live()方法但却只能放在直接选择的元素后面，不能在层级比较深,连缀的DOM遍历方法后面使用，即＄（“ul\"\").live.。.可以,但＄(”body”)。find(”ul\")。live.。。不行；

实例如下:＄（ document ）.on（ \"click”， ”#members li a\） {｝ )；

（3）,delegate

定义和用法：将监听事件绑定在就近的父级元素上

语法:delegate(selector,type，［data］,fn）

特点：

(1）、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。

（2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上.

实例如下：

$（”＃info_table”）.delegate(\"td”，\"click\＊显示更多信息＊/});

$（\"table”）。find(”#info”）。delegate（\"td\”click\显示更多信息＊/｝)；

（4），on

定义和用法：将监听事件绑定到指定元素上。

语法:on（type,［selector]，［data］，fn)

实例如下:＄（”＃info_table\"）。on（\"click\"，”td”，function(）{/*显示更多信息*/｝）;参数的位置写法与delegate不一样。

说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one(）。

总结:.bind(）, .live()， 。delegate(）， .on（)分别对应的相反事件为：。unbind（），.die(）， .undelegate（)，.off（)

43，浏览器的内核分别是什么？

IE：trident内核 Firefox:gecko内核 Safari：webkit内核 Opera：现在blink内核 Chrome：blink内核

44，浏览器是如何渲染画面的?

渲染的流程如下:

1， 解析HTML文件，创建dom树

自上而下,遇到任何样式和脚本都会阻塞

2， 解析css。优先级：浏览器默认设置〈用户设置〈外部样式〈内联样式样式；

3， 将css和DOM合并，构建渲染树 4， 布局和绘制，重绘和重排

45，css3新增了很多属性，一起分析一下新增的属性：

1。CSS3边框：

· border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的,在 CSS3 中，border—radius 属性用于创建圆角.border：2px solid;

· box-shadow：CSS3边框阴影.在 CSS3 中,box—shadow 用于向方框添加阴影.box-shadow:10px 10px 5px #888888；

· border—image：CSS3边框图片。通过 CSS3 的 border—image 属性，您可以使用图片来创建边框.border-image:url(border。png) 30 30 round;

2.CSS3背景：

· background-size: 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

· background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding—box 或 border—box 区域.

3。CSS3文字效果：

· text-shadow：在 CSS3 中,text-shadow 可向文本应用阴影.text-shadow：5px 5px 5px ＃FFFFFF;

· word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行:p｛word—wrap：break—word；｝

4.CSS3 2D转换：

transform：通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

· translate（）：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top(y 坐标) 位置参数:transform:translate（50px，100px）;值 translate（50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

· rotate（）：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg）；值 rotate（30deg) 把元素顺时针旋转 30 度。

· scale()：元素的尺寸会增加或减少,根据给定的宽度（X 轴)和高度（Y 轴)参数：transform：scale（2，4)；值 scale（2，4） 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高x（） 5。CSS3 3D转换：

· rotateX(）：元素围绕其 X 轴以给定的度数进行旋转.transform：rotateX（120deg）；

· rotateY（)：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg）;

6。CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。

7。CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript.

8。CSS3多列:

· column—count:属性规定元素应该被分隔的列数.

· column—gap：属性规定列之间的间隔.

· column-rule ：属性设置列之间的宽度、样式和颜色规则。

9。CSS3用户界面：

· resize:属性规定是否可由用户调整元素尺寸。

· box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。

· outline—offset :属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

46,从输入url到显示页面，都经历了什么？

1、首先,在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析（DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址.)，解析获取相应的IP地址.

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。(TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

5、握手成功后，浏览器向服务器发送http请求，请求数据包。 6、服务器处理收到的请求，将数据返回至浏览器 7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互 10、客户端和服务器交互 11、ajax查询

47，对标签有什么理解?

Meta标签提供关于html文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器，搜索引擎，或其他web服务. 作用：

Meta里的数据是供机器解读的，告诉机器如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容。

48，h5新特性，

（1）新的语义标签和属性 （2）表单新特性 (3)视频和音频 (4）Canvas绘图 （5)SVG绘图 (6)地理定位 （7）拖放API

49，display:none 和 visibility:hidden的区别

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility：hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位,浏览器会解析该元素;

2。使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

50，JavaScript如何检测一个变量是一个string类型

typeof(obj) === \"string\" typeof obj === ”string” obj.constructor === String

51，＄(document）.ready(）方法和Window.onload有什么区别？

（1)、window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行的。

（2)、$（document）.ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

52，get和post之间的区别？

1， 传输大小 get比post传输内容要小

2， Get请求参数会被保留在历史记录中,而post不会 3， Post是加密传输，get是明文传输,post要比get安全 4， Get只能接受url编码,而post没有