1纯路,CSS和JS在網(wǎng)頁中的放置順序是怎樣的?
- css放在
<head>
標(biāo)簽里族操,js放在<body>
標(biāo)簽最后面鸠窗。
- 原因:
- css放在前面是因為瀏覽器在加載過程中妓羊,會現(xiàn)根據(jù)html生成DOM樹,然后再加上css形成渲染樹稍计,如果css過大還被 放在了后面躁绸,會導(dǎo)致出現(xiàn)閃屏、白屏的現(xiàn)象。
- js本身的特性是加載時會阻塞后面文件的加載涨颜,因此不放在后面會導(dǎo)致后面文件加載速度慢费韭,而且js重復(fù)加載的現(xiàn)象,頁面整體加載慢庭瑰,用戶體驗差星持。
2,解釋白屏和FOUC弹灭。
- 白屏和fouc并不是bug督暂,而是不同瀏覽器加載和顯示機(jī)制不同造成的。
- 白屏: 即網(wǎng)頁空白, 不顯示任何內(nèi)容
當(dāng)CSS放置在代碼的最后面, 如果瀏覽器是等待CSS加載完成之后對HTML元素進(jìn)行渲染和展示, 在新窗口打開或刷新頁面時, 可能因為未加載完成而出現(xiàn)白屏, 使用@import導(dǎo)入CSS和把JS放在頂部也可能導(dǎo)致白屏穷吮。 - FOUC: (Flash of Unstyled Content) 無樣式內(nèi)容閃爍
當(dāng)CSS放置在代碼的最后面, 如果瀏覽器是先對HTML元素進(jìn)行展示逻翁,然后等待CSS加載完成之后重新對樣式進(jìn)行修改, 在新窗口打開或刷新頁面時, 可能會逐步加載無樣式內(nèi)容, 然后再CSS加載完成后突然展現(xiàn)樣式。
3捡鱼,async和defer的作用是什么八回?有什么區(qū)別?
- 當(dāng)瀏覽器碰到
script
腳本的時候:
<script src="script.js"></script>
沒有defer
或async
驾诈,瀏覽器會立即加載并執(zhí)行指定的腳本缠诅,“立即”指的是在渲染該script
標(biāo)簽之下的文檔元素之前,也就是說不等待后續(xù)載入的文檔元素乍迄,讀到就加載并執(zhí)行管引。<script async src="script.js"></script>
有async
,加載和渲染后續(xù)文檔元素的過程將和script.js
的加載與執(zhí)行并行進(jìn)行(異步)闯两。<script defer src="myscript.js"></script>
有defer
褥伴,加載后續(xù)文檔元素的過程將和script.js
的加載并行進(jìn)行(異步),但是script.js
的執(zhí)行要在所有元素解析完成之后漾狼,DOMContentLoaded 事件觸發(fā)之前完成重慢。
- 從實用角度來說呢,首先把所有腳本都丟到 </body>之前是最佳實踐邦投,因為對于舊瀏覽器來說這是唯一的優(yōu)化選擇伤锚,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析擅笔。
此圖告訴我們以下幾個要點:
- defer 和 async 在網(wǎng)絡(luò)讀饶罡(下載)這塊兒是一樣的,都是異步的(相較于 HTML 解析)
- 它倆的差別在于腳本下載完之后何時執(zhí)行弯淘,顯然 defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的
- 關(guān)于 defer绿店,此圖未盡之處在于它是按照加載順序執(zhí)行腳本的,這一點要善加利用
- async 則是一個亂序執(zhí)行的主,反正對它來說腳本的加載和執(zhí)行是緊緊挨著的假勿,所以不管你聲明的順序如何借嗽,只要它加載完了就會立刻執(zhí)行
- 仔細(xì)想想,async 對于應(yīng)用腳本的用處不大转培,因為它完全不考慮依賴(哪怕是最低級的順序執(zhí)行)恶导,不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的,最典型的例子:Google Analytics
4浸须,簡述網(wǎng)頁的渲染機(jī)制惨寿。
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
- 把每個節(jié)點繪制到屏幕上
5,JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
- 簡單數(shù)據(jù)類型:
- number數(shù)據(jù)類型 —— var num=123;
- string(字符串)數(shù)據(jù)類型 —— var str=“abcd”;
- boolean數(shù)據(jù)類型 —— var bool=ture;
- 浮點數(shù)數(shù)據(jù)類型——var float=.89;
- 特殊數(shù)據(jù)類型:
- 未定義undefined —— var a;
- 空 null —— var a=null
- 復(fù)雜數(shù)據(jù)類型:
- object —— var obj={“name”:“小明”删窒,“age”:“14”};
6裂垦,NaN、undefined肌索、null分別代表什么?
- NaN是一個特殊數(shù)字蕉拢,表示非數(shù)(not alike Number)例如Number (“123a”) 得到的即為NaN;NaN 不等于自己诚亚。這里注意企量,他是數(shù)字。
- undefined表示"缺少值"——表明此處應(yīng)該有一個值亡电,但是沒有定義届巩。例如 var a;
- null表示"沒有對象"——即該處不應(yīng)該有值份乒。
7恕汇,typeof和instanceof的作用和區(qū)別?
instanceof 和typeof都能用來判斷一個變量是否為空或是什么類型的變量。
typeof 用以獲取一個變量的類型或辖,typeof 一般只能返回如下幾個結(jié)果:number瘾英,boolean,string颂暇,function缺谴,object,undefined耳鸯。
我們可以使用 typeof 來獲取一個變量是否存在湿蛔,如 if(typeof a!=“undefined”){},而不要去使用 if(a)县爬。因為如果 a 不存在(未聲明)則會出錯阳啥,對于 Array,Null 等特殊對象使用 typeof 一律返回 object。
這正是 typeof 的局限性财喳。如果我們希望獲取一個對象是否是數(shù)組察迟,或判斷某個變量是否是某個對象的實例則要選擇使用instanceof斩狱。-
instanceof 用于判斷一個變量是否某個對象的實例,如 var a=new Array();alert(a instanceof Array);會返回 true扎瓶,
同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object 的子類所踊。再如:function test(){}; var a=new test(); alert(a instanceof test) 會返回 true。
談到instanceof 我們要多插入一個問題概荷,就是 function 的 arguments污筷,我們大家也許都認(rèn)為 arguments 是一個 Array,但如果使用 instaceof 去測試會發(fā)現(xiàn) arguments 不是一個 Array 對象乍赫,盡管看起來很像瓣蛀。
- typeof 返回一個值的數(shù)據(jù)類型:
- 數(shù)值、字符串雷厂、布爾值分別返回number惋增、string、boolean
- 函數(shù)返回function
- undefined返回undefined
- 除此以外改鲫,其他情況都返回object
- instanceof 測試它左邊的對象是否是它右邊的類的實例诈皿,返回布爾型數(shù)據(jù), a.instanceof(b);就是判斷a是否是b的一個實例
-
typeof對數(shù)組(array)和對象(object)的顯示結(jié)果都是object, 無法進(jìn)行區(qū)分, instanceof可以幫助區(qū)分