- CSS和JS在網(wǎng)頁中的放置順序是怎樣的挑随?
- CSS放置在HTML中的<head>元素內(nèi)。
- 現(xiàn)代Web應(yīng)用程序一般把全部JavaScript引用放在<body>元素中的頁面內(nèi)容的后面粪般。
- 解釋白屏和FOUC
- 白屏現(xiàn)象:在瀏覽器中越平,如果把CSS樣式放在HTML的底部秉撇,在刷新或打開新窗口的情況下,瀏覽器會出現(xiàn)白屏效果浑劳。使用@import引用CSS樣式也會出現(xiàn)此效果(@import引用的CSS會等到頁面全部被下載完再被加載阱持。)
- FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式):
如果使用@import方法或點擊鏈接,輸入URL,使用書簽進入等,對css進行導(dǎo)入,會導(dǎo)致某些頁面在Windows 下的Internet Explorer出現(xiàn)以無樣式顯示頁面內(nèi)容的瞬間閃爍,
原因:
1魔熏,使用import方法導(dǎo)入樣式表衷咽。
2,將樣式表放在頁面底部
3蒜绽,有幾個樣式表镶骗,放在html結(jié)構(gòu)的不同位置。
原理:當(dāng)樣式表晚于結(jié)構(gòu)性html 加載躲雅,當(dāng)加載到此樣式表時卖词,頁面將停止之前的渲染。此樣式表被下載和解析后吏夯,將重新渲染頁面此蜈,也就出現(xiàn)了短暫的閃屏現(xiàn)象。 - async和defer的作用是什么噪生?有什么區(qū)別
- defer:這個屬性的用途是表明腳本在執(zhí)行時不會影響頁面的構(gòu)造裆赵,腳本會被延遲到整個頁面都解析完畢后再運行。在<script>元素中設(shè)置defer屬性表示告訴瀏覽器立即下載跺嗽,但延遲執(zhí)行這個js腳本战授。
<script defer src="script.js"></script>
- async:這個屬性與defer屬性相似都只適用于外部腳本,都用于改變處理腳本的行為桨嫁。async屬性告訴瀏覽器立即下載文件植兰,但async與defer不同在于,標(biāo)記為async的腳本不保證按照指定它們的先后順序執(zhí)行璃吧。指定async屬性的目的是不讓頁面等待js腳本的下載和執(zhí)行楣导,從而異步加載頁面的其他內(nèi)容。建議異步腳本不要在加載期間修改DOM畜挨。
<script async src="script.js"></script>
-
簡述網(wǎng)頁的渲染機制
瀏覽器這工作步驟:
加載:根據(jù)請求的URL進行域名解析,向服務(wù)器發(fā)起請求毡咏,接收文件(HTML驮宴、JS、CSS呕缭、圖象等)堵泽。
解析:
1 通過解析JS語法、HTML標(biāo)簽恢总、CSS屬性迎罗,構(gòu)建DOM樹、CSSOM樹离熏。
2 解析完成后佳谦,瀏覽器通過DOM樹、CSSOM樹構(gòu)造出渲染樹滋戳。
渲染 :在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)钻蔑。
繪制 :通過調(diào)用操作系統(tǒng)的API把每個節(jié)點繪制在屏幕上。JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
5種簡單數(shù)據(jù)類型(基本數(shù)據(jù)類型):Undefined奸鸯、Null咪笑、Boolean、Number和String娄涩。
1種復(fù)雜復(fù)雜數(shù)據(jù)類型:Object
NaN窗怒、undefined、null分別代表什么?
-
NaN蓄拣,即非數(shù)值(Not a Number)扬虚,這個數(shù)值用于表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況。
特點:
1 任何涉及NaN的操作(例如NaN/10)都會返回NaN球恤。
2 NaN與任何值都不相等辜昵,包括NaN本身。
針對NaN的特點咽斧,ECMAscript定義了isNaN()函數(shù)堪置。這個函數(shù)接受一個參數(shù),該參數(shù)可以是任何類型张惹,而函數(shù)會幫我們確定這個參數(shù)是否“不是數(shù)值”舀锨。isNaN()在接受一個值后,會嘗試這個值轉(zhuǎn)換為數(shù)值宛逗。(字符串"10"或Boolean值會直接轉(zhuǎn)換為數(shù)值)坎匿。任何不能被轉(zhuǎn)換為數(shù)值的值都會導(dǎo)致這個函數(shù)返回true。
console.log(isNaN(NaN));//true
console.log(isNaN(10));//false
console.log(isNaN("10"));//false
console.log(isNaN("blue"));//true
console.log(isNaN(true));//false(布爾值可以轉(zhuǎn)換為0和1)
-
Undefined類型只有一個值,即特殊的Undefined碑诉。在使用var聲明變量但未對其加以初始化時彪腔,這個變量的值就是Undefined侥锦。例如:
這個例子只聲明了變量a进栽,但未對其進行初始化,進行變量a與字面量Undefined的比較恭垦】烀可以等價寫成:
結(jié)論:未經(jīng)初始化的值默認就會取得Undefined值。一般而言番挺,不存在需要聲明一個變量為Undefined的情況唠帝。字面量Undefined主要目的是用于比較。 -
Null類型是第二個只有一個值的數(shù)據(jù)類型玄柏。null值表示一個空對象指針襟衰,所以typeof操作符檢測null值會返回“object”的原因。
如果定義的變量準備在將來用于保存對象粪摘,那么最好將該變量初始化為null瀑晒。這樣一來只要直接檢查null值就可以知道相應(yīng)的變量是否已經(jīng)保存了一個對象的引用。
if (a != null) {
//如果變量a定義了一個對象的引用就執(zhí)行徘意。
}
- typeof和instanceof的作用和區(qū)別?
-
typeof操作符是用于檢測變量的數(shù)據(jù)類型苔悦。如果是使用構(gòu)造函數(shù)創(chuàng)建的對象則會返回"object",不過對于數(shù)組來說是個例外椎咧,無論是否是直接量都會返回"object"
- instanceof此運算符可以判斷一個變量是否是某個對象(類)的實例(檢測 constructor.prototype 是否存在于參數(shù) object 的原型鏈上)玖详,返回值是布爾類型的。示例:
var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // 輸出 "true"
參考:JavaScript instanceof 運算符深入剖析勤讽、MDN
- 代碼
- 完成如下代碼判斷一個變量是否是數(shù)字蟋座、字符串、布爾脚牍、函數(shù) (難度*)
function isNumber(el){
if (typeof(el) === number) {return "ture";}
else {return "false";}
}
function isString(el){
if (typeof(el) === string) {return "ture";}
else {return "false";}
}
function isBoolean(el){
if (typeof(el) === boolean) {return "ture";}
else {return "false";}
}
function isFunction(el){
if (typeof(el) === function) {return "ture";}
else {return "false";}
}
var a = 2,
b = "jirengu",
c = false;
alert( isNumber(a) ); //true
alert( isString(a) ); //false
alert( isString(b) ); //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true
- 以下代碼的輸出結(jié)果是?(難度**)
console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date());//1467739918839
console.log(+"4");//4
- 以下代碼的輸出結(jié)果是? (難度***)
var a = 1;
a+++a;//3
typeof a+2;//number2
- 遍歷數(shù)組向臀,把數(shù)組里的打印數(shù)組每一項的平方 (難度**)
var arr = [3,4,5];
for (i = 0; i < arr.length; i++ ) {
console.log(arr[i] * arr[i]);
// 輸出 9, 16, 25
}
- 遍歷 JSON, 打印里面的值 (難度**)
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var prop in obj) {
console.log(prop + ":" + obj[prop])
}
// 輸出 name: hunger, sex: male, age:28
- 下面代碼的輸出是? 為什么 (難度***)
javascript變量提升機制。
console.log(a);//undefined 因為下一句var a = 1還沒執(zhí)行莫矗,相當(dāng)于只進行了var a; a沒有賦值就console.log(a)
var a = 1;
console.log(a);//1 變量a已經(jīng)賦值為1
console.log(b);//error 這里的b并沒有聲明所以出現(xiàn)錯誤飒硅。
console.log(a);//undefined
var a = 1;
等價于下示
var a;
console.log(a);
a = 1;
//當(dāng)全局變量賦值前被提升到最上面先進行了聲明。
//JS在執(zhí)行前會把所有的變量和函數(shù)提前聲明
本博客版權(quán)歸 本人和饑人谷所有作谚,轉(zhuǎn)載需說明來源