前端面试3

2017-08-31 本文已影响39人卡农me

1.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
经常会遇到的的伪元素有：::before, ::after（在CSS3中唯一引入的伪元素是::selection），伪类包括：:focus, :hover, :link。
在css2中，对两者没有特别的区分，单冒号和双冒号都可以；css3中的伪元素需要用双冒号表示。
2.script中的async defer：

<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

3.CSS中 link 和@import 的区别是？

link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重高于@import的权重.

@import 的不推荐原因：link混合@import会破坏并行下载，这是一个很严重的问题，这会导致原本并行下载的样式变成一个一个的同步下载
4.BFC
参考1
参考2

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。

Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。（不严谨的说只有块元素参与）

BFC的生成（满足以下条件之一）：

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

BFC的约束规则:

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

通俗的解释就是：

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

看到以上的几条约束，让我想起学习css时的几条规则

Block元素会扩展到与父元素同宽，所以block元素会垂直排列
垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)
浮动元素会尽量接近往左上方（或右上方）
为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素
5.margin重叠
CSS CSS 外边距(margin)重叠及防止方法
 CSS外边距合并的问题

margin重叠计算方法：()

全部都为正值，取最大者(1, 2 , 3 中取 3)
不全是正值，则取绝对值，然后最大的正边界减去绝对值最大的负边界 ([1, 2, 6] 和 [ -1, -3, -9] 中取 6 - |-9| 的值）；
没有正值，则都取绝对值，然后用0减去最大值。(-1, -2 , -3 中取 -3)

注意：

水平边距永远不会重合
BFC后，消除了margin重叠

根元素的垂直margin不会被重叠

float : 相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。

overflow : 设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）

position : 设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。

display : 设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。

防止外边距重叠解决方案：

外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素加float:left;或display:inline-block;
内层元素padding:1px;

6.js异步编程的4种方法

回调函数
事件监听
发布/订阅
Promises对象

单线程
如何自定义事件

dom.addEventListener('自定义事件',function(){
  console.log('自定义事件');
});

var eve = new Event('自定义事件');
dom.dispatchEvent(eve);

写一个promise

var promise = new Promise(function(resolve, reject) {
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

同时发送多个请求：关于promises，你理解了多少？

其它：

写一个原生ajax

//var xhr=new ActiveXObject()(IE5/IE6使用，现在基本不用)
var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象

xhr.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (xhr.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (xhr.status === 200) {
            // 成功
        } else {
            // 失败
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
xhr.open('GET', 'url'，'true（异步）或 false（同步）');
xhr.send();

7.虚拟DOM
实现虚拟 DOM 所需的技术背景可以分为两个方面：

需要了解的是与 DOM 紧密相关的树形数据结构，及对树进行增查改删等操作的算法
需要了解的是用于转译 JSX 代码的工具链（可以用Babel 的 transform-react-jsx 插件来实现）
更新虚拟 DOM：差量更新

JSX：
React 使用 JSX 来替代常规的 JavaScript，JSX语法像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码
优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速,组件的结构和组件之间的关系看上去更加清晰

8.react和vue

react和vue的相似之处：
1.使用虚拟dom
2.提供了响应式和组件化的视图组件
3.关注核心库，伴随于此，有配套的路由和负责处理全局状态管理的库

性能方面的差异：
1.渲染性能

渲染用户界面的时候，dom的操作成本是最高的，那为了尽可能的减少对dom的操作，Vue和React都利用虚拟DOM来实现这一点，但Vue的Virtual DOM实现（一个陷阱的叉子）的权重要轻得多，因此比React的引入开销更少。
Vue 和 React 也提供功能性组件，这些组件因为都是没有声明，没有实例化的，因此会花费更少的开销。当这些都用于关键性能的场景时，Vue 将会更快。

2.更新性能
在react中，当一个组件的状态发生变化时，它将会引起整个组件的子树都进行重新渲染，从这个组件的根部开始。那为了避免子组件不必要的重新渲染，您需要随时使用shouldComponentUpdate，并使用不可变的数据结构。在Vue中，组件的依赖关系在它的渲染期间被自动跟踪，因此系统准确地知道哪些组件实际上需要重新渲染。这就意味着在更新方面,vue也是快于React

3.开发中
在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。这是由于 React 有大量的检查机制，这会让它提供许多有用的警告和错误提示信息。vue在实现这些检查时，也更加密切地关注了性能方面。

前端面试3

猜你喜欢

热点阅读