HTML5学派-Codesmith：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各种前端名词你知道多少？很多前端开发工程师可能不认识下面的一些词，但是在实战中确实会用到。弄清楚这些词和概念是没有错的~一方面可以让你更专业的讲知识，另一方面也可以应对一些面试时“爱问前端术语”的面试官面试~W3CW3C是万维网联盟“万维网联盟”的缩写。W3C是WEB技术领域的国际中立技术标准组织。主要工作是制定WEB规范。什么是BFC？BFC是Blockformattingcontext的缩写，意思是“块级格式化上下文”。设置BFC的element/box，它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部Block-levelBox如何布局（与区域外无关）。BFC相关说明在HTML中，每个元素都可以看作是一个盒子（BOX），不同盒子的“显示”类型是不同的。格式化上下文是页面中的一个渲染区域，有一套渲染规则。它用于确定：其子元素将如何定位，以及它们如何与其他元素关联和交互。最常见的格式化上下文有：●块格式化上下文（简称BFC）；●内联格式化上下文（简称IFC）；●GFC和FFC是CSS3中新增的。为元素设置哪些属性可以触发BFC布局●设置float属性时（属性值不是none）；●设置position属性为absolute或fixed；●设置显示为inline-block,table-cell,table-caption,flex,inline-flex之一；●设置溢出属性时（属性值不可见）。BFC布局规则HTML5派（coder）：请仔细咀嚼以下部分，想象一下平日设置浮动元素的场景，会更容易理解。●Box的垂直距离由margin决定。属于同一BFC的两个相邻Box的外边距会重叠；●BFC容器内部的子元素不会影响外部元素；●设置BFC的元素的内部元素会在垂直方向依次放置；●设置BFC的每个元素的左边距触及包含块（父元素）边框的左侧（对于从左到右的格式，否则相反），即使有浮动；●BFC的区域不与float元素重叠；●BFC计算高度时，浮动元素也参与计算。触发BFC布局有什么用？●设置溢出：隐藏清除浮动；●通过设置浮动属性，防止边距重叠。什么是FOUCFOUC是FlashOfUnstyledContent的缩写，指的是加载网页时发生的瞬态CSS样式失效。FOUC问题的原因是什么？文档样式闪烁的原因：在IE5+浏览器中，如果IE的临时文件夹没有缓存页面的CSS文件；表格放在页面底部，多个样式表放在html结构的不同位置等）网页会先加载整个HTML文档的DOM，然后导入外部CSS文件。因此，从页面DOM加载完成到CSS导入完成的过程中，页面上的内容都会有一段时间没有样式。这段时间的长短与网速和电脑的速度有关。Hack什么是HackHack，英文意思是“修改”。由于不同浏览器对CSS的支持不同，相同的CSS样式代码在不同浏览器中的表现可能会不一致。为了使所有浏览器的样式统一，有时需要为某个浏览器设置一个不同于其他浏览器的“专有样式”。Hack技术的原理是利用CSS中的优先级和CSSHack技术来实现“不同浏览器”对应“不同CSS”的需求。Hacks的种类CSSHacks主要针对IE浏览器，分为三种形式：●属性前缀方式：在CSS属性中添加Hack(*height:300px;)；●选择器前缀法：在选择器中添加Hack(*html{})；●条件注释方式：headerreferenceHack()。欢迎交流~~~HTML5学派（Codesmith）GPU什么是GPU？显卡的处理器称为图形处理单元（GPU）。专为数学和几何计算而设计。默认情况下，网页的渲染使用CPU。如果有GPU来处理图形任务，那么CPU就可以执行其他更多的系统任务，从而提高计算机的整体性能。GPU加速的主要目的主要是用在CSS3技术中，提高二维动画的渲染速度。GPU加速触发方法将以下CSS3样式添加到动画DOM元素。-webkit-transform:transition3d(0,0,0);-webkit-transform:translateZ(0);这两种方法都会启用GPU硬件加速模式，允许浏览器在渲染动画时从CPU切换到GPU。对于网页效果，由于上面代码中的值设置为0，并没有真正使用3D效果，而是浏览器开启了GPU硬件加速模式。GPU加速应用场景●涉及大量大尺寸图片的动画；●涉及大量DOM元素的CSS3动画。CSSSprite什么是CSSSpriteCSSSprite，有人称之为CSSSprite，是一种网页图像应用处理方法。它允许将一个页面中涉及的所有零星图片组合成一张大图。访问页面时，加载的图片不会像以前那样一张一张慢慢显示。CSSSpriteCSSSprite的原理和Photoshop的背景图片组合是一样的，就是把网页中的一些背景图片整合成一个图片文件，然后利用CSS的background-position属性来定位背景。什么是UA？UAUA是用户代理的缩写。UA是一个特殊的字符串头，可以让服务器识别客户端使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。UA的目的，比如检测当前接入设备的类型（移动设备还是桌面设备），根据具体情况进行“重定向”。更多前端相关词汇haslayout、XSS、strict、MVVM、MVC、SPA更多面试中会提到的前端“专属”词汇，可以在“决战前端”小程序快乐每一天查看专题生活不易，码字不易，但别忘了微笑~！版权声明：本图出自《【美国】LizCremer（作者）》一书《你今天真好看》《我可以咬一口吗》（很喜欢他的书~）
