几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少?

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

明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识,另一方面,在面试的时候也能够应对一些“爱问前端名词”的面试官~

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]-->)。

欢迎沟通交流~~~HTML5学堂(码匠)

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、XSS、strict、MVVM、MVC、SPA

面试中会提到的更多前端“专属”词汇,可查看“决胜前端”小程序中的新专题 ——

开开心心每一天

生活艰辛,代码不易,但是,不要忘记微笑哦~!

版权声明:该图来自“【美】莉兹·克里莫 (author)”的书籍《你今天真好看》《我可以咬一口吗》(个人很喜欢他的书~)

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-08-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

网易NEC水平垂直居中

HTML5学堂:水平垂直居中在项目开发中可以算是比较常见的吧,所以之前也给大家分享了HTML+CSS水平垂直居中的实现方法。今天主要给大家分享网易NEC里面是如...

3385
来自专栏守候书阁

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

844
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

1656
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

1266
来自专栏coding for love

CSS进阶08-绝对定位 Absolute Positioning

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

671
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

874
来自专栏Android自学

Reset CSS(CSS初始化)总结

1222
来自专栏小李刀刀的专栏

自适应的多列图文混排改进

关于网页两栏、三栏的布局讨论由来已久,有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案,而是一个专门针对两栏图文混排的特定需求的改进型方...

3024
来自专栏IMWeb前端团队

jQuery选择器总结

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 不得不说,jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都...

1925
来自专栏IMWeb前端团队

移动端重构实战系列1——基础知识

距离上个移动端重构系列已是两年了(不得不感叹时间是把杀猪刀)。这次将会带来实战系列,将欠下两年的债现在还上,给七年的重构赋予一次新生。 既然是新的开始,先简单说...

1750

扫码关注云+社区