前端面试题

193 阅读6分钟

常用的浏览器内核有哪些?

浏览器内核包含渲染引擎和JS引擎。

渲染引擎:用于获取htmlcss和图片等。浏览器内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。

JS引擎:用于解析和执行JS来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

常用的浏览器内核有以下几种:

  • Trident内核:是微软开发的引擎。使用Trident渲染引擎的浏览器有:IE、世界之窗浏览器、遨游、腾讯TT、360、搜狗浏览器等。
  • EdgeHTML:是微软公司发布的网页浏览器Microsoft Edge所使用的网页排版引擎。由微软在原IE浏览器的Trident内核基础上,删除了过时的旧技术支持代码,增加了对现代浏览器技术的支持,是一个全新的内核。
  • Gecko内核:开放源代码,以C++编写的网页引擎,支持跨平台。使用它的浏览器有:Firefox、Netscape6及以上的版本。
  • Presto内核:是Opera Sofeware开发的浏览器排版引擎,Opera前内核,现已废弃。这款引擎的特点是渲染速度的优化达到了极致,然而代价是牺牲了网页的兼容性。由于市场选择问题,主要应用在手机平台--Opera mini。
  • WebKit内核:是一个开源的浏览器引擎。代表浏览器有:Safari、Chrome等。WebKit的优势在于高效稳定,兼容性好,且源码结构清晰,易于维护。WebKit 内核在手机上的应用也十分广泛,例如 Google 的手机Android、 Apple 的iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎,都是基于 WebKit。
  • X5内核:是腾讯基于优秀开源Webkit深度优化的浏览器渲染引擎,搭载在最新一代的手机QQ浏览器上,更快,更便捷。

行内元素与块元素有什么区别

【区别】

行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。

块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。

行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

【行内元素和块级元素的转换 】

 display:block; (设为块级元素) 

 display:inline; (设为行内元素)

【部分块级元素】

<caption>、<div>、<form>、<h1>-<h6>、<ol>、<ul>、<li>、<p>、<table>

【部分行内元素】

<a>、<b>、<br>、<em>、<i>、<img>、<input>、<label>、<select>、<span>、<strong>、<textarea>

什么是BFC

BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。  

在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。

W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。 

为了便于理解,我们换一种方式来重新定义BFC。一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可: 

 1、float的值不是none。

 2、position的值不是static或者relative。 

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 

4、overflow的值不是visible 

BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

清除浮动有哪些方法

清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题。

1、额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)

原理:添加一个空div,利用css提供的clear:both清除浮动,让父级元素能自动获取到高度

优点:简单,代码少,浏览器支持好,不容易出现怪异问题

缺点:如果页面浮动布局多,就会增加很多空div,添加无意义标签,语义化差

不推荐使用

2、父级添加overflow属性(父元素添加overflow:hidden

通过触发BFC方式,实现清除浮动

优点:代码简洁

缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素

不推荐使用

3、给父元素添加高度

浮动之后造成了高度塌陷,那么我们只要给父元素添加了高度,就可以解决浮动问题。缺点也很明显,那就是父元素高度必须固定了。

4、使用after伪元素清除浮动(推荐使用)

优点:符合闭合浮动思想,结构语义化正确  

缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.

.fatherdiv:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.fatherdiv{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}

5、使用before和after双伪元素清除浮动(推荐使用)

优点:代码更简洁 

 缺点:用zoom:1触发hasLayout.

如何理解JS中的this

测试

原始类型与引用类型有什么区别

测试股

如何深度克隆一个对象

测试

数组去除重复元素有哪些方法

测试

同步与异步的区别

测试

get请求与post请求的区别

测试

跨域请求有哪些方案

测试

简述Vue的响应式原理

  • data的属性被object.defineProperty转换为getter和setter,并且记录相应的依赖,当它被改动时会通知相应的依赖
  • 所有的组件实例都会有它对应的watcher实例,watcher实例会依赖于相应的setter
  • 当数据变化时,setter被调用,setter会通知对应的watcher,watcher会更新相应的视图

测试