摘要：学堂码匠各类前端术语知多少有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。
W3CHTML5学堂-码匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少？ 有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。
明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识，另一方面，在面试的时候也能够应对一些“爱问前端名词”的面试官~
W3C是World Wide Web Consortium的缩写，表示的是“万维网联盟”。
W3C是WEB技术领域，国际中立性技术标准机构。主要工作是发展WEB规范。
BFC是Block formatting context的缩写，表示的是“块级格式化上下文”。
设置BFC的元素/盒子，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局（与该区域外部无关）。
在HTML当中，每个元素都可以看做一个盒子（BOX），而不同盒子的“展示”类型有所不同。
Formatting context是页面中的一块渲染区域，并且有一套渲染规则。它用来决定：其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的 Formatting context 有 ：
● Block fomatting context (简称BFC)；
● Inline formatting context (简称IFC)；
● CSS3 中新增 GFC 和 FFC。
● 设置float属性（属性值不为none）时；
● 设置position属性为absolute或fixed；
● 设置display为inline-block, table-cell, table-caption, flex, inline-flex中的一种；
● 设置overflow属性（属性值不为visible）时。
HTML5学堂（码匠）：如下部分请细细咀嚼，想象平日设置浮动元素的场景，会更容易理解。
● Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
● BFC容器里面的子元素不会影响到外面的元素；
● 设置BFC的元素的内部元素，会在垂直方向一个接一个地放置；
● 每个设置BFC的元素的左侧margin， 与包含块（父元素）border的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此；
● BFC的区域不与float元素相重叠；
● 计算BFC的高度时，浮动元素也参与计算。
● 设置overflow: hidden来清除浮动；
● 通过设置浮动属性，防止margin重叠。
FOUC是Flash Of Unstyled Content的缩写，指的是加载网页时出现的短暂的CSS样式失效。
造成FOUC问题的原因是什么文档样式闪烁成因：在IE5+浏览器中，如果IE的临时文件夹没有缓存过该页面的CSS文件；出现了样式表位置异常现象（使用import方法导入样式表、将样式表放在页面底部、多个样式表放置在html结构的不同位置等）
网页会优先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成的过程中，会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
Hack，英文含义为“修改”。由于不同的浏览器对CSS的支持程度不同，同样CSS的样式代码在不同浏览器当中的表现可能出现不一致。为了让所有浏览器样式统一，有时需要为某种浏览器设置不同于其他浏览器的“专属样式”。
Hack技术的原理利用CSS中的优先级以及CSS Hack技术，来实现“不同浏览器”对应“不同CSS”的需求。
Hack的种类CSS Hack主要针对IE浏览器，可以分为3种表现形式：
● 属性前缀法：CSS属性上添加Hack（*height: 300px;）；
● 选择器前缀法：在选择器上添加Hack（*html { }）；
● 条件注释法：头部引用Hack（）。
GPU 什么是GPU欢迎沟通交流~~~HTML5学堂（码匠）
显卡的处理器称为图形处理器（GPU），它是显卡的“心脏”，与CPU类似，只不过GPU是专为执行复杂的数学和几何计算而设计的。
默认情况下，网页的渲染使用的是CPU。如果有了GPU来处理图形任务，那么CPU就可以执行其他更多系统任务，从而提升计算机整体性能。
主要用于CSS3技术中，提升二维动画的渲染速度。
GPU加速的触发方法为动画DOM元素添加如下CSS3样式。
-webkit-transform:transition3d(0,0,0)；
-webkit-transform:translateZ(0);
两种方法都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU。
对于网页效果来说，由于如上代码中的值设置为0，因此，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。
● 涉及大量大尺寸图片的动画；
● 涉及大量DOM元素的CSS3动画。
CSS Sprite，也有人将其称为CSS精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都合并到一张大图当中，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprite的原理CSS Sprite与Photoshop的背景图合并一样，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-position属性的进行背景定位。
UA 什么是UAUA是User Agent的缩写。
UA是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
例如：检测当前访问设备的类型（移动设备还是桌端设备），并根据具体情况实现“重定向”。
更多前端相关词汇haslayout、XSS、strict、MVVM、MVC、SPA
面试中会提到的更多前端“专属”词汇，可查看“决胜前端”小程序中的专题
生活艰辛，代码不易，但是，不要忘记微笑哦~！
版权声明：该图来自“【美】莉兹·克里莫 (author)”的书籍《你今天真好看》《我可以咬一口吗》（个人很喜欢他的书~）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51171.html
摘要：学堂码匠各类前端术语知多少有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。 HTML5学堂-码匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少？ 有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识，另一方面，在...
摘要：学堂码匠各类前端术语知多少有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。 HTML5学堂-码匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少？ 有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识，另一方面，在...
摘要：有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好一方面能够让自己能够更专业的谈论知识，另一方面，在面试的时候也能够应对一些爱问前端名词的面试官是的缩写，表示的是万维网联盟。 有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。 明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业...
阅读 2583·2021-11-22 12:01
阅读 1107·2021-11-15 11:37
阅读 3687·2021-09-22 14:59
阅读 1748·2021-09-04 16:45
阅读 1384·2021-09-03 10:30
阅读 1016·2021-08-11 11:18
阅读 2461·2019-08-30 10:53
阅读 2014·2019-08-29 15:13
