内容简介:有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识,另一方面,在面试的时候也能够应对一些“爱问前端名词”的面试官。
有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。
明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识,另一方面,在面试的时候也能够应对一些“爱问前端名词”的面试官。
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)时。
● 欢迎加入前端全栈开发交流圈一起学习交流:731771211
BFC布局的规则
HTML5学堂(码匠):如下部分请细细咀嚼,想象平日设置浮动元素的场景,会更容易理解。
● Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
● BFC容器里面的子元素不会影响到外面的元素;
● 设置BFC的元素的内部元素,会在垂直方向一个接一个地放置;
● 每个设置BFC的元素的左侧margin, 与包含块(父元素)border的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此;
● BFC的区域不与float元素相重叠;
● 计算BFC的高度时,浮动元素也参与计算。
BFC布局的触发,用途有哪些
● 设置overflow: hidden来清除浮动;
● 通过设置浮动属性,防止margin重叠。
[图片上传失败...(image-499b0f-1549891228160)]
FOUC
什么是FOUC
FOUC是Flash Of Unstyled Content的缩写,指的是加载网页时出现的短暂的CSS样式失效。
造成FOUC问题的原因是什么
文档样式闪烁成因:在IE5+浏览器中,如果IE的临时文件夹没有缓存过该页面的CSS文件;出现了样式表位置异常现象(使用import方法导入样式表、将样式表放在页面底部、多个样式表放置在html结构的不同位置等)
网页会优先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成的过程中,会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
Hack
什么是Hack
Hack,英文含义为“修改”。由于不同的浏览器对CSS的支持程度不同,同样CSS的样式代码在不同浏览器当中的表现可能出现不一致。为了让所有浏览器样式统一,有时需要为某种浏览器设置不同于其他浏览器的“专属样式”。
欢迎加入前端全栈开发交流圈一起学习交流:619586920
Hack技术的原理
利用CSS中的优先级以及CSS Hack技术,来实现“不同浏览器”对应“不同CSS”的需求。
Hack的种类
CSS Hack主要针对IE浏览器,可以分为3种表现形式:
● 属性前缀法:CSS属性上添加Hack(*height: 300px;);
● 选择器前缀法:在选择器上添加Hack(*html { });
● 条件注释法:头部引用Hack(<!–[if lt IE 8]–>)。
GPU
GPU – 码匠
什么是GPU
显卡的处理器称为图形处理器(GPU),它是显卡的“心脏”,与CPU类似,只不过GPU是专为执行复杂的数学和几何计算而设计的。
默认情况下,网页的渲染使用的是CPU。如果有了GPU来处理图形任务,那么CPU就可以执行其他更多系统任务,从而提升计算机整体性能。
欢迎加入前端全栈开发交流圈一起学习交流:619586920
GPU加速的主要用途
主要用于CSS3技术中,提升二维动画的渲染速度。
GPU加速的触发方法
为动画DOM元素添加如下CSS3样式。
-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的用途
例如:检测当前访问设备的类型(移动设备还是桌端设备),并根据具体情况实现“重定向”。
如有疏忽,下方品论,说出你认为重要的前端用词,共勉!
以上所述就是小编给大家介绍的《如何让自己看起来更专业?前端程序员必须了解的几个“词语”》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 大前端时代,我为什么支持前端程序员学习原生技术?
- 如何看待前端程序员被鄙视的问题
- 干货|前端程序员容易出错的基础知识
- 程序员练级攻略(2018):前端基础和底层原理
- 程序员练级攻略(2018):前端性能优化和框架
- 程序员笔记——通过OpenGL理解前端渲染原理(1)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入浅出HTML与CSS、XHTML
[美] 弗里曼 Freeman.E. / 东南大学出版社 / 2006-5 / 98.00元
《深入浅出HTML与CSS XHTML》(影印版)能让你避免认为Web-safe颜色还是紧要问题的尴尬,以及不明智地把标记放入你的页面。最大的好处是,你将毫无睡意地学习HTML、XHTML 和CSS。如果你曾经读过深入浅出(Head First)系列图书中的任一本,就会知道书中展现的是什么:一个按人脑思维方式设计的丰富的可视化学习模式。《深入浅出HTML与CSS XHTML》(影印版)的编写采用了......一起来看看 《深入浅出HTML与CSS、XHTML》 这本书的介绍吧!