いくつかのフロントエンドエンジニアは、「単語」を習得する必要があります

HTML5学校-コードカーペンター W3C、BFC、FOUC、ハック、GPU、スプライト、UA ......フロントエンドターム知ってのすべての種類?フロントエンドの開発エンジニアの多くがありますが、それは、次のフレーズの明確な一部ではないかもしれないが、実際の実際の戦闘使用中の彼らがあります。
これらの単語や概念のいくつかを識別します- -一方では何も悪いがあるのは、そう、彼らはより多くの専門的な知識を話すことができることを、他方では、インタビューの中でインタビュアー「愛は、用語のフロントエンドを尋ねた」のいくつかに対処することができますすることができます

W3C

W3Cは、World Wide Web Consortiumの略語で表している"ワールド・ワイド・ウェブ・コンソーシアムを。"
W3Cは、Web技術分野、国際的な技術標準化団体の中立性です。主な仕事は、WEBの仕様を開発することです。

clipboard.png

BFC

BFCは何ですか

BFCを示すブロックフォーマット文脈略語である「ブロックレベル・フォーマット・コンテキスト」を
要素/箱のBFCセットは、唯一のブロックレベルボックスのレイアウト(エリア外とは何の関係)の指定方法内部ブロックレベルボックス、に参加するために、独立した描画領域です。

BFC命令

各要素は、ボックス(BOX)として見ることができるHTMLでは、「ショー」タイプの異なるボックスが異なっています。
ページのコンテキストをフォーマットすると、描画領域、およびレンダリング規則のセットです。決定するために使用されます。その子要素、および他の要素だけでなく、関係と相互作用をどのように配置するかを。
最も一般的なフォーマットのコンテキストがあります:
(BFCと呼ばれる)●ブロックfomattingコンテキスト;
●インライン書式コンテキスト(IFCをいう。);
●CSS3新GFCとFFC。

プロパティは、BFCのレイアウトをトリガすることができる要素に設定されている場合

●(属性値がNoneでない)フロートプロパティを設定する場合、
●絶対位置プロパティにセットまたは修正;
●ディスプレイセットインラインブロック、テーブルセルにテーブル・キャプション、フレックス、インラインフレックス一方の;
●提供オーバーフロープロパティ(属性値が表示されていない)時間。

BFCのレイアウトルール

HTML5の学校(コード・カーペンター):次のセクションで、噛んでくださいは、通常のシーンを設定する浮動要素を想像し、理解することが容易になるだろう。
●ボックスの垂直距離はマージンによって決定されます。同じオーバーラップに属する2つの隣接するマージンBFCのボックスが発生し、
サブ要素の外側に容器内●BFCは素子に影響を与えない;
●要素が垂直方向に次々に配置され、BFC要素の内部に配置されました。
左ブロック(フォーマット、またはその逆のために左から右へ)の境界の(親要素)、浮遊さえ存在との接触を含むBFCの各要素について●左余白設定、;
●領域ではないBFCフロート要素は重複;
●BFCの高さを算出し、フローティング要素も計算に関与しています。

BFCトリガレイアウト、用途

●オーバーフロー設定:透明フロートに隠された、
オーバーラップマージンを防ぐために、浮動プロパティを設定することにより、●を。

clipboard.png

FOUC

FOUCは何ですか

FOUCはUnstyledコンテンツ略語のフラッシュを使用すると、短いCSSスタイルの失敗をロードしたときに表示されるページを指しています。

どのような問題がある原因FOUC

ドキュメントスタイル点滅原因:IE5 +ブラウザIEの一時フォルダは、ページのCSSファイルをキャッシュされていない場合、スタイルシートの位置異常の出現(スタイルシートをインポートし、インポートの方法を使用して、ページの下部にあるスタイルシート、およびより異なる位置に配置されたスタイルシートは、構造体などをHTML)
ページには、全体のHTML DOMドキュメントをロードするための優先順位を与え、その後、外部CSSファイルをインポートするために行くので、DOMがCSSインポートのプロセスにロードされたページが完了し、一定の時間があるでしょうしますページ上のコンテンツは、スタイル、ネットワークの速度と時間のこの期間の長さではなく、コンピュータの速度が関係を持っています。

ハック

ハックとは何ですか

ハック、英語の意味は、「改変」されます。CSSのサポートの異なるブラウザ度なので、異なるブラウザ間で同じCSSスタイルコードのパフォーマンスが一貫性のない表示されることがあります。すべてのブラウザスタイルの制服ためには、時にはあなたは、ブラウザのいくつかの種類など、他のブラウザで「排他的なスタイル」とは異なる設定する必要があります。

技術のハック原則

優先使用CSSやCSSハック技術、異なるCSSのニーズ」に「異なるブラウザ」対応を実現します。

ハックの種類

主にIEのCSSハック、フォームの3種類に分けることができる:
●prefix属性の方法:(:により300ピクセル*高さ;); CSSプロパティハックを追加
●セレクタプレフィックス方法:{* HTML(セレクタにハックを追加});
●ノート方法条件:ヘッド基準ハック(< - [LTなら! IE 8] - >)。

ようこそ通信~~~ HTML5スクール(ヤード・カーペンター)

GPU

clipboard.png

GPUは何ですか

グラフィックスプロセッサは、グラフィックスカードである、グラフィックスプロセッサ(GPU)と呼ばれ、「心臓」、および類似のCPUであるが、GPUは、複雑な数学的および幾何学的計算及び設計を実行するように設計されています。
デフォルトでは、CPUを使用してWebページをレンダリングします。あなたは、グラフィックスのタスクを処理するためにGPUを持っている場合、CPUは、コンピュータ全体のパフォーマンスを向上するように、他のタスクより多くのシステムを実行することができます。

主な目的のGPUアクセラレーション

CSS3の技術は、主に高速2次元アニメーションのレンダリング改善するために使用されます。

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
面试中会提到的更多前端“专属”词汇,可查看“决胜前端”小程序中的专题
画像のキャプション

开开心心每一天

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

免責事項:からフィギュア「[US]リズケリのMo(著者)」本「は。あなたは本当に今日は良く見える」「私はあなたをかむことができます」(個人的に彼の本のように〜)

clipboard.png

clipboard.png

おすすめ

転載: www.cnblogs.com/baimeishaoxia/p/12213632.html