前端小干货（中级篇）

①渐进增强和优雅降级

这两个名词是css3出来后火起来的
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

.transition{/*渐进增强*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}

.transition{/*优雅降级*/
		  transition: all .5s;
 　　  -o-transition: all .5s;
   　-moz-transition: all .5s;
  -webkit-transition: all .5s;
}

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

②关于浏览器的页面渲染过程

1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

③关于深拷贝

所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中

function fn(str){
	var asd;
	if(test(str) === "Array"){
		asd = [];
	}else if(test(str) === "Object"){
		asd = {};
	}else{
		return str;
	}
	for(var i in str){
		if(test(str[i]) == "Object"){
			fn(str[i])
		}else{
			asd[i] =  str[i]
		}
	}
	return asd
}
function test(es){
	return Object.prototype.toString.call(es).slice(8,-1)
}

④关于浏览器内核的理解

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

从百度百科上的解释来说：网页浏览器的排版引擎也被称为页面渲染引擎，它负责取得网页的内容（HTML、XML、图象等等）、整理信息（例如加入 CSS 等），以及计算网页的显示方式然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。

JS引擎：解析和执行JavaScript来实现网页的动态效果。

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

常见的浏览器内核大概分为四种Trident、Gecko、Blink、Webkit。

①Trident(IE内核)
IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、搜狗浏览器、百度浏览器等。

②Gecko(firefox内核)
火狐

③webkit(Safari内核)
傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

④Blink(Chrome内核)
Chrome

④Presto(Opera内核)
已废弃，现Opera已投入chrome

⑤Flash、Ajax各自的优缺点，在使用中如何取舍？

§ Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。

§ Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

§ 共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

⑥*FC的含义

FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。通常是*指的事display：设置的属性值的简写

单词	含义
BFC	块级格式化上下文行为规范
IFC	内联格式化上下文行为规范
GFC	网格格式化上下文行为规范
FFC	自适应格式化上下文行为规范

产生BFC 的条件

float的值不为none。
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, block中的任何一个。

产生IFC 的条件

display:inline-block

产生GFC 的条件

display:grid

产生FFC 的条件

display:flex或者inline-flex