前端程序员须要掌握的几个专业“词语”

有很多前端开发工程师，可能并不清楚下面的部分词语，可是在实战中其实都在使用着它们。

明确一下这些词语和概念没有什么很差~一方面可以让本身可以更专业的谈论知识，另外一方面，在面试的时候也可以应对一些“爱问前端名词”的面试官~

---

W3C

W3C是World Wide Web Consortium的缩写，表示的是“万维网联盟”。

W3C是WEB技术领域，国际中立性技术标准机构。主要工做是发展WEB规范。

BFC

什么是BFC

BFC是Block formatting context的缩写，表示的是“块级格式化上下文”。

设置BFC的元素/盒子，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局（与该区域外部无关）。

BFC相关说明

在HTML当中，每一个元素均可以看作一个盒子（BOX），而不一样盒子的“展现”类型有所不一样。

Formatting context是页面中的一块渲染区域，而且有一套渲染规则。它用来决定：其子元素将如何定位，以及和其余元素的关系和相互做用。

最多见的 Formatting context 有 ：

● Block fomatting context (简称BFC)；

● Inline formatting context (简称IFC)；

● CSS3 中新增 GFC 和 FFC。

为元素设置哪些属性时，能够触发BFC布局

● 设置float属性（属性值不为none）时；

● 设置position属性为absolute或fixed；

● 设置display为inline-block, table-cell, table-caption, flex, inline-flex中的一种；

● 设置overflow属性（属性值不为visible）时。

BFC布局的规则

HTML5学堂（码匠）：以下部分请细细咀嚼，想象平日设置浮动元素的场景，会更容易理解。

● Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；

● BFC容器里面的子元素不会影响到外面的元素；

● 设置BFC的元素的内部元素，会在垂直方向一个接一个地放置；

● 每一个设置BFC的元素的左侧margin， 与包含块（父元素）border的左边相接触（对于从左往右的格式化，不然相反），即便存在浮动也是如此；

● BFC的区域不与float元素相重叠；

● 计算BFC的高度时，浮动元素也参与计算。

BFC布局的触发，用途有哪些

● 设置overflow: hidden来清除浮动；

● 经过设置浮动属性，防止margin重叠。

FOUC

什么是FOUC

FOUC是Flash Of Unstyled Content的缩写，指的是加载网页时出现的短暂的CSS样式失效。

形成FOUC问题的缘由是什么

文档样式闪烁成因：在IE5+浏览器中，若是IE的临时文件夹没有缓存过该页面的CSS文件；出现了样式表位置异常现象（使用import方法导入样式表、将样式表放在页面底部、多个样式表放置在html结构的不一样位置等）

网页会优先加载整个HTML文档的DOM，而后再去导入外部的CSS文件，所以，在页面DOM加载完成到CSS导入完成的过程当中，会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

Hack

什么是Hack

Hack，英文含义为“修改”。因为不一样的浏览器对CSS的支持程度不一样，一样CSS的样式代码在不一样浏览器当中的表现可能出现不一致。为了让全部浏览器样式统一，有时须要为某种浏览器设置不一样于其余浏览器的“专属样式”。

Hack技术的原理

利用CSS中的优先级以及CSS Hack技术，来实现“不一样浏览器”对应“不一样CSS”的需求。

Hack的种类

CSS Hack主要针对IE浏览器，能够分为3种表现形式：

● 属性前缀法：CSS属性上添加Hack（*height: 300px;）；

● 选择器前缀法：在选择器上添加Hack（*html { }）；

● 条件注释法：头部引用Hack（<!–[if lt IE 8]–>）。

GPU

什么是GPU

显卡的处理器称为图形处理器（GPU），它是显卡的“心脏”，与CPU相似，只不过GPU是专为执行复杂的数学和几何计算而设计的。

默认状况下，网页的渲染使用的是CPU。若是有了GPU来处理图形任务，那么CPU就能够执行其余更多系统任务，从而提高计算机总体性能。

GPU加速的主要用途

主要用于CSS3技术中，提高二维动画的渲染速度。

GPU加速的触发方法

为动画DOM元素添加以下CSS3样式。

-webkit-transform:transition3d(0,0,0)；

-webkit-transform:translateZ(0);

两种方法都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU。

对于网页效果来讲，因为如上代码中的值设置为0，所以，并无真正使用3D效果，但浏览器却所以开启了GPU硬件加速模式。

GPU加速的应用场景

● 涉及大量大尺寸图片的动画；

● 涉及大量DOM元素的CSS3动画。

CSS Sprite

什么是CSS Sprite

CSS Sprite，也有人将其称为CSS精灵，是一种网页图片应用处理方式。它容许将一个页面涉及到的全部零星图片都合并到一张大图当中，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。

CSS Sprite的原理

CSS Sprite与Photoshop的背景图合并同样，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-position属性的进行背景定位。

UA

什么是UA

UA是User Agent的缩写。

UA是一个特殊字符串头，使得服务器可以识别客户使用的操做系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

UA的用途

例如：检测当前访问设备的类型（移动设备仍是桌端设备），并根据具体状况实现“重定向”。

haslayout

haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，表明该元素有本身的布局，不然表明该元素的布局继承于父元素。

[注意]经过element.currentStyle.hasLayout能够得出当前元素的hasLayout状况

HTML标签
　　
默认触发hasLayout的有以下HTML标签
　　【1】html,body
　　【2】table,tr,th,td
　　【3】img
　　【4】hr
　　【5】input,button,select,textarea,fieldset
　　【6】frameset,frame,iframe

CSS属性

能够触发hasLayout的有以下CSS属性：
　　【1】display:inline-block
　　【2】height/width:除了auto
　　【3】float:left/right
　　【4】position:absolute
　　【5】writing-mode(IE专有属性，设置文本的垂直显示):tb-rl
　　【6】zoom(IE专有属性，设置或检索对象的缩放比例):除了normal

XSS

XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它容许恶意web用户将代码植入到提供给其它用户使用的页面中。

MVVM

它采用双向绑定（data-binding）：View的变更，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

MVC

MVC模式的意思是，软件能够分红三个部分:
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存

各部分之间的通讯方式以下:
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户获得反馈
全部通讯都是单向的。

更多前端相关词汇之后会相继补充，欢迎多提建议