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;
- 回调函数
- 事件监听
- 发布/订阅
- 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在实现这些检查时，也更加密切地关注了性能方面。
网友评论