前端工程師面試題(html+css)

image.png

正值金九銀十的招聘旺季煤墙，我把我珍藏整理多年的前端面試題分享給大家堕扶，分三部分徊件。這是第一部分,html和css布局相關(guān)的。

1. HTML5相關(guān)

1.1 新特性匆背、移除了那些元素

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集钥顽，主要是關(guān)于圖像，位置靠汁，存儲(chǔ)蜂大，多任務(wù)等功能的增加。

新特性(包括標(biāo)簽):

  • 繪畫 canvas;
  • 用于媒介回放的 video 和 audio 元素;
  • 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)蝶怔，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
    sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
  • 語(yǔ)意化更好的內(nèi)容元素奶浦，比如 article、footer踢星、header澳叉、nav、section;
  • 表單控件沐悦，calendar成洗、date、time藏否、email瓶殃、url、search;
  • 新的技術(shù)webworker, websocket, Geolocation;

移除的元素：

  • 純表現(xiàn)的元素：basefont副签，big遥椿，center，font, s淆储，strike冠场，tt，u;
  • 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame本砰，frameset碴裙，noframes；

1.2 處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題

支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽舔株，
瀏覽器支持新標(biāo)簽后莺琳，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。

當(dāng)然也可以直接使用成熟的框架督笆、比如html5shim;

<!--[if lt IE 9]>
 <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

1.3 區(qū)分 HTML 和 HTML5

DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

1.4 HTML語(yǔ)義化的理解

用正確的標(biāo)簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化诱贿，結(jié)構(gòu)更清晰娃肿，便于對(duì)瀏覽器、搜索引擎解析;
及時(shí)在沒(méi)有樣式CCS情況下也以一種文檔格式顯示珠十，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重料扰，利于SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解焙蹭。

1.5 HTML5離線儲(chǔ)存

在用戶沒(méi)有與因特網(wǎng)連接時(shí)晒杈，可以正常訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)孔厉，更新用戶機(jī)器上的緩存文件拯钻。

原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源撰豺，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)粪般。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示污桦。

如何使用：

  1. 頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性亩歹；
  2. 在cache.manifest文件的編寫離線存儲(chǔ)的資源；
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
  3. 在離線狀態(tài)時(shí)凡橱，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)小作。

瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？
在線的情況下稼钩，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性顾稀，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問(wèn)app坝撑，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)础拨。如果已經(jīng)訪問(wèn)過(guò)app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面绍载，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件诡宗，如果文件沒(méi)有發(fā)生改變，就不做任何操作击儡，如果文件改變了塔沃，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
離線的情況下阳谍，瀏覽器就直接使用離線存儲(chǔ)的資源蛀柴。

2. HTML標(biāo)簽相關(guān)

2.1 iframe有那些缺點(diǎn)螃概？

  • iframe會(huì)阻塞主頁(yè)面的Onload事件；
  • 搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面鸽疾，不利于SEO;
  • iframe和主頁(yè)面共享連接池吊洼，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載制肮。

使用iframe之前需要考慮這兩個(gè)缺點(diǎn)冒窍。如果需要使用iframe，最好是通過(guò)javascript 動(dòng)態(tài)給iframe添加src屬性值豺鼻，這樣可以繞開以上兩個(gè)問(wèn)題综液。

2.2 Label的作用是什么

label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上儒飒。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

2.3 如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

WebSocket谬莹、SharedWorker；
也可以調(diào)用localstorge桩了、cookies等本地存儲(chǔ)方式附帽；

localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)井誉，它都會(huì)觸發(fā)一個(gè)事件士葫，
我們通過(guò)監(jiān)聽事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信送悔；
注意quirks：Safari 在無(wú)痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 QuotaExceededError 的異常慢显；

2.4 webSocket如何兼容低瀏覽器？

Adobe Flash Socket 欠啤、
ActiveX HTMLFile (IE) 荚藻、
基于 multipart 編碼發(fā)送 XHR 、
基于長(zhǎng)輪詢的 XHR

2.5 字體標(biāo)簽的區(qū)別

title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題洁段，H1則表示層次明確的標(biāo)題应狱，對(duì)頁(yè)面信息的抓取也有很大的影響；

strong是標(biāo)明重點(diǎn)內(nèi)容祠丝，有語(yǔ)氣加強(qiáng)的含義疾呻，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：<strong>會(huì)重讀，而<b>是展示強(qiáng)調(diào)內(nèi)容写半。

i內(nèi)容展示為斜體岸蜗，em表示強(qiáng)調(diào)的文本；

Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語(yǔ)義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽叠蝇。

3. css部分(1)

3.1 盒子模型

介紹一下標(biāo)準(zhǔn)的CSS的盒子模型璃岳？低版本IE的盒子模型有什么不同的？
（1）有兩種， IE 盒子模型铃慷、W3C 盒子模型单芜；
（2）盒模型： 內(nèi)容(content)、填充(padding)犁柜、邊界(margin)洲鸠、 邊框(border)；
（3）區(qū) 別： IE的content部分把 border 和 pading計(jì)算了進(jìn)去;

3.2 css選擇符與屬性繼承

選擇符:
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a:hover, li:nth-child）

可繼承的樣式:
font-size font-family color ul li dl dd dt

不可繼承的樣式:
border padding margin width height

3.3 優(yōu)先級(jí)算法

  • 優(yōu)先級(jí)就近原則馋缅，同權(quán)重情況下樣式定義最近者為準(zhǔn);

  • 載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級(jí)為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

3.4 css3新增偽類

 舉例：
    p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素扒腕。
    p:last-of-type  選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
    p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素股囊。
    p:only-child        選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素袜匿。
    p:nth-child(2)  選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素更啄。

    :after          在元素之前添加內(nèi)容,也可以用來(lái)做清除浮動(dòng)稚疹。
    :before         在元素之后添加內(nèi)容
    :enabled        
    :disabled       控制表單控件的禁用狀態(tài)。
    :checked        單選框或復(fù)選框被選中祭务。

3.5 css居中

給div設(shè)置一個(gè)寬度内狗，然后添加margin:0 auto屬性

div{
    width:200px;
    margin:0 auto;
 }

讓絕對(duì)定位的div居中

  position: absolute;
  width: 1200px;
  background: none;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

水平垂直居中一

  確定容器的寬高 寬500 高 300 的層
  設(shè)置層的外邊距

 div {
      position: relative;     /* 相對(duì)定位或絕對(duì)定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;      /* 外邊距為自身寬高的一半 */
    background-color: pink;     /* 方便看效果 */
 }

水平垂直居中二

未知容器的寬高，利用 `transform` 屬性

div {
    position: absolute;     /* 相對(duì)定位或絕對(duì)定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;     /* 方便看效果 */

}

水平垂直居中三

利用 flex 布局
實(shí)際使用時(shí)應(yīng)考慮兼容性

.container {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;     /* 方便看效果 */
}

3.6 display值及作用

block         象塊類型元素一樣顯示义锥。
none          缺省值柳沙。象行內(nèi)元素類型一樣顯示。
inline-block  象行內(nèi)元素一樣顯示拌倍，但其內(nèi)容象塊類型元素一樣顯示赂鲤。
list-item     象塊類型元素一樣顯示，并添加樣式列表標(biāo)記柱恤。
table         此元素會(huì)作為塊級(jí)表格來(lái)顯示
inherit       規(guī)定應(yīng)該從父元素繼承 display 屬性的值

3.7 position定位

absolute
    生成絕對(duì)定位的元素数初，相對(duì)于值不為 static的第一個(gè)父元素進(jìn)行定位。
fixed （老IE不支持）
    生成絕對(duì)定位的元素梗顺，相對(duì)于瀏覽器窗口進(jìn)行定位泡孩。
relative
    生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位寺谤。
static
    默認(rèn)值仑鸥。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）变屁。
inherit
    規(guī)定從父元素繼承 position 屬性的值眼俊。

3.8 css3新特性

  新增各種CSS選擇器  （: not(.input)：所有 class 不是“input”的節(jié)點(diǎn)）
  圓角           （border-radius:8px）
  多列布局        （multi-column layout）
  陰影和反射        （Shadow\Reflect）
  文字特效      （text-shadow、）
  文字渲染      （Text-decoration）
  線性漸變      （gradient）
  旋轉(zhuǎn)          （transform）
  增加了旋轉(zhuǎn),縮放,定位,傾斜,動(dòng)畫粟关，多背景
  transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

3.9 創(chuàng)建一個(gè)三角形

把上泵琳、左、右三條邊隱藏掉（顏色設(shè)為 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

3.10 瀏覽器兼容

* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.

* 瀏覽器默認(rèn)的margin和padding不同获列。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一谷市。

* IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下击孩，在ie6顯示margin比設(shè)置的大迫悠。

  浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

  這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性巩梢。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

  漸進(jìn)識(shí)別的方式创泄，從總體中逐漸排除局部。

  首先括蝠，巧妙的使用“\9”這一標(biāo)記鞠抑，將IE游覽器從所有情況中分離出來(lái)。
  接著忌警，再次使用“+”將IE8和IE7搁拙、IE6分離開來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別法绵。

  css
      .bb{
          background-color:#f1ee18;/*所有識(shí)別*/
          .background-color:#00deff\9; /*IE6箕速、7、8識(shí)別*/
          +background-color:#a200ff;/*IE6朋譬、7識(shí)別*/
          _background-color:#1e0bd1;/*IE6識(shí)別*/
      }

*  IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,
   也可以使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性盐茎。
   解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性。

*  IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;
   Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性徙赢。

*  解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)字柠。

*  Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,
   可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

3.11 li之前空白間隔

行框的排列會(huì)受到中間空白（回車\空格）等的影響狡赐，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式窑业，占據(jù)空間，所以會(huì)有間隔阴汇，把字符大小設(shè)為0数冬，就沒(méi)有空格了。

3.12 為什么要初始化css樣式

- 因?yàn)闉g覽器的兼容問(wèn)題搀庶，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的拐纱，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

- 當(dāng)然哥倔，初始化樣式會(huì)對(duì)SEO有一定的影響秸架，但魚和熊掌不可兼得，但力求影響最小的情況下初始化咆蒿。

最簡(jiǎn)單的初始化方法： * {padding: 0; margin: 0;} （強(qiáng)烈不建議）

淘寶的樣式初始化代碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

4. css部分(2)

4.1 BFC規(guī)范

（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它是一個(gè)獨(dú)立容器东抹，決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用蚂子。）
一個(gè)頁(yè)面是由很多個(gè) Box 組成的,元素的類型和 display 屬性,決定了這個(gè) Box 的類型。
不同類型的 Box,會(huì)參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響缭黔。
更多詳細(xì)內(nèi)容請(qǐng)看CSS中的BFC

4.2 css定義權(quán)重

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1食茎，class的權(quán)重為10，id的權(quán)重為100馏谨，以下例子是演示各種定義的權(quán)重值：

/*權(quán)重為1*/
div{
}
/*權(quán)重為10*/
.class1{
}
/*權(quán)重為100*/
#id1{
}
/*權(quán)重為100+1=101*/
#id1 div{
}
/*權(quán)重為10+1=11*/
.class1 div{
}
/*權(quán)重為10+10+1=21*/
.class1 .class2 div{
}

如果權(quán)重相同别渔，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)

4.3 css浮動(dòng)

請(qǐng)解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)惧互？清除浮動(dòng)的方式：

浮動(dòng)元素脫離文檔流哎媚，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留喊儡。
浮動(dòng)元素引起的問(wèn)題和解決辦法拨与？

浮動(dòng)元素引起的問(wèn)題：
父元素的高度無(wú)法被撐開，影響與父元素同級(jí)的元素與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后若非第一個(gè)元素浮動(dòng)艾猜，則該元素之前的元素也需要浮動(dòng)买喧，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)解決方法： 使用CSS中的clear:both;屬性來(lái)清除元素的浮動(dòng)可解決2、3問(wèn)題箩朴，對(duì)于問(wèn)題1岗喉，添加如下樣式秋度，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動(dòng)的幾種方法：

  • 額外標(biāo)簽法
<div style="clear:both;"></div>

（缺點(diǎn)：不過(guò)這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來(lái)不夠簡(jiǎn)潔炸庞。）

  • 使用after偽類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

注意這里是給父元素加

  • 設(shè)置overflow為hidden或者auto
給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; //zoom:1用于兼容IE6。

4.4 cookie隔離

如果靜態(tài)文件都放在主域名下荚斯，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的埠居，非常浪費(fèi)流量，
所以不如隔離開事期。

因?yàn)閏ookie有域的限制滥壕，因此不能跨域提交請(qǐng)求，故使用非主要域名的時(shí)候兽泣，請(qǐng)求頭中就不會(huì)帶有cookie數(shù)據(jù)绎橘，
這樣可以降低請(qǐng)求頭的大小，降低請(qǐng)求時(shí)間唠倦，從而達(dá)到降低整體請(qǐng)求延時(shí)的目的称鳞。

同時(shí)這種方式不會(huì)將cookie傳入Web Server，也減少了Web Server對(duì)cookie的處理分析環(huán)節(jié)稠鼻，
提高了webserver的http請(qǐng)求的解析速度冈止。

4.5 link和@import

（1）link屬于XHTML標(biāo)簽，除了加載CSS外候齿，還能用于定義RSS, 定義rel連接屬性等作用熙暴；而@import是CSS提供的闺属，只能用于加載CSS;

（2）頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載周霉，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

（3）import是CSS2.1 提出的掂器，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽俱箱，無(wú)兼容問(wèn)題;

4.6 style標(biāo)簽寫在body后與body前有什么區(qū)別唉匾？

提示對(duì)于js阻塞，網(wǎng)上已經(jīng)有很多文章匠楚，但是css阻塞的描述較少巍膘，于是對(duì)css阻塞進(jìn)行深入研究。
寫了一個(gè)測(cè)試demo芋簿，代碼如下

late-css.php
<?php
header("Content-type: text/css; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'div{background:blue}';
echo $str;
?>
 
late-js.php
<?php
header("Content-type: text/js; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'document.write("I'm the lazy note")';
echo $str;
?>

index3.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</head>
<body>
    <div></div>
</body>
</html>

運(yùn)行demo呈現(xiàn)的是頁(yè)面需要等待10秒才能打開峡懈，而且直接打開的是藍(lán)色方塊。（證明css在頁(yè)面中存在阻塞,但不確定是在解析DOM時(shí)阻塞還是渲染時(shí)阻塞）

index4.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
</head>
<body>
    <div></div>
</body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</html>

運(yùn)行demo呈現(xiàn)的是頁(yè)面需要等待10秒才能打開与斤，而且直接打開的是藍(lán)色方塊肪康。（證明css在頁(yè)面中存在的是阻塞渲染）
那么在我們?cè)O(shè)計(jì)頁(yè)面的時(shí)候css，盡量將首屏顯示的css直接放在html上面是最合適的撩穿，但是實(shí)際情況很難做到磷支，比如一些導(dǎo)航的樣式，未來(lái)在css文件中實(shí)現(xiàn)CDN食寡，不得不將css放在外鏈中雾狈。

index.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
        <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    </head>
    <body>
        <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <style>
        div{background:yellow;}
    </style>
</html>

（證明js，阻塞DOM解析抵皱，CSS作用于DOM解析到哪里善榛，就渲染到哪里）
猜猜這是會(huì)顯示什么？
先白色5秒呻畸，再藍(lán)色5秒移盆，再黃色

index2.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
    </head>
    <body>
    <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    <style>
        div{background:yellow;}
    </style>
</html>

（證明css在下載時(shí)，不阻塞DOM解析伤为，但是下載時(shí)阻塞渲染）
先紅色咒循，再黃色

總結(jié)：CSS和JS的下載都不會(huì)被解析阻塞，CSS下載時(shí)會(huì)阻塞渲染, 外部樣式會(huì)阻塞后續(xù)腳本執(zhí)行绞愚，直到外部樣式加載并解析完畢叙甸。

  1. 沒(méi)遇到JS阻塞的情況，CSS只會(huì)在DOM解析完后渲染爽醋。
  2. 遇到JS阻塞的情況蚁署，當(dāng)DOM一旦遇到JS阻塞時(shí)，就會(huì)觸發(fā)CSS渲染

那么現(xiàn)在有一個(gè)問(wèn)題蚂四，css寫在body前和body后有什么區(qū)別光戈，
由上述可見(jiàn)哪痰，CSS無(wú)論是用STYLE標(biāo)簽還是link外鏈，

  • 如果沒(méi)有遇到j(luò)S阻塞久妆，放哪里都一樣晌杰，
  • 如果遇到j(luò)s阻塞，把CSS寫在BODY上面筷弦，不會(huì)出現(xiàn)二次渲染肋演，把CSS寫在BODY下面，JS阻塞時(shí)烂琴，會(huì)出現(xiàn)一次渲染爹殊，等阻塞完畢會(huì)出現(xiàn)二次渲染（除非外鏈的CSS下載時(shí)間比阻塞時(shí)間長(zhǎng)）。

推薦電子書

前端常見(jiàn)面試題匯總

轉(zhuǎn)載請(qǐng)注明

極客教程-極客教程

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末奸绷，一起剝皮案震驚了整個(gè)濱河市梗夸，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌号醉，老刑警劉巖反症，帶你破解...
    沈念sama閱讀 221,820評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異畔派，居然都是意外死亡铅碍，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門线椰，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)胞谈，“玉大人，你說(shuō)我怎么就攤上這事“０龋” “怎么了？”我有些...
    開封第一講書人閱讀 168,324評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)饲漾。 經(jīng)常有香客問(wèn)我，道長(zhǎng)逐工，這世上最難降的妖魔是什么凶朗？ 我笑而不...
    開封第一講書人閱讀 59,714評(píng)論 1贊 297
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮趟庄，結(jié)果婚禮上括细，老公的妹妹穿的比我還像新娘。我一直安慰自己戚啥，他們只是感情好奋单，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著猫十，像睡著了一般览濒。 火紅的嫁衣襯著肌膚如雪呆盖。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 52,328評(píng)論 1贊 310
  • 城市分裂傳說(shuō)
    那天贷笛，我揣著相機(jī)與錄音应又，去河邊找鬼。 笑死乏苦，一個(gè)胖子當(dāng)著我的面吹牛株扛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播汇荐，決...
    沈念sama閱讀 40,897評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼洞就，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了掀淘？” 一聲冷哼從身側(cè)響起奖磁，我...
    開封第一講書人閱讀 39,804評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎繁疤，沒(méi)想到半個(gè)月后咖为，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1贊 318
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡稠腊，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年躁染，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片架忌。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡吞彤，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出叹放，到底是詐尸還是另有隱情饰恕，我是刑警寧澤，帶...
    沈念sama閱讀 36,238評(píng)論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布井仰，位于F島的核電站埋嵌，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏俱恶。R本人自食惡果不足惜雹嗦，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3贊 334
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望合是。 院中可真熱鬧了罪，春花似錦、人聲如沸聪全。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評(píng)論 0贊 24
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)难礼。三九已至娃圆，卻和暖如春汽久，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背踊餐。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工景醇， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人吝岭。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓三痰，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親窜管。 傳聞我的和親對(duì)象是個(gè)殘疾皇子散劫，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2贊 359

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,759評(píng)論 1贊 92
  • <a name='html'>HTML</a> Doctype作用幕帆？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? （1）获搏、<...
    clark124閱讀 3,497評(píng)論 1贊 19
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,423評(píng)論 24贊 450
  • 本文由我收集總結(jié)了一些前端面試題，初學(xué)者閱后也要用心鉆研其中的原理失乾，重要知識(shí)需要系統(tǒng)學(xué)習(xí)常熙、透徹學(xué)習(xí)，形成自己的知識(shí)...
    王鈺峰閱讀 489評(píng)論 0贊 2
  • 我們辦公室有個(gè)小姑娘她叫丁丁，2歲半的女孩 媽媽給她在幼兒園交學(xué)費(fèi)一星期也難得去上一兩次纽竣，她是出勤率最低的學(xué)生墓贿，但...
    喜耳閱讀 295評(píng)論 0贊 0