1.CSS和JS在網頁中的放置順序是怎樣的访忿?
css一般使用 link 標簽將樣式表放在頂部的<head>標簽內海铆,
js一般放在頁面底部(</body>標簽前)
2.解釋白屏和FOUC
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內容逐步展現(xiàn)如果使用 @import標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC .
- 如果將JS放在底部卧斟,腳本會阻塞后面內容的呈現(xiàn)也會阻塞其后組件的下載珍语。對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內容的下載. 所以把 JavaScript 放入頁面頂部也會導致 白屏現(xiàn)象。
3.async和defer的作用是什么是偷?有什么區(qū)別
如果沒有 defer 或 async蛋铆,瀏覽器會立即加載并執(zhí)行指定的腳本刺啦,“立即”指的是在渲染該 script 標簽之下的文檔元素之前透乾,也就是說不等待后續(xù)載入的文檔元素,讀到就加載并執(zhí)行乳乌。而有了async或者defer后汉操,加載和渲染后續(xù)文檔元素的過程將和 script.js異步執(zhí)行。
區(qū)別:
- async磷瘤,加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行(不保證順序)采缚。
- 有 defer,加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行(異步)篡帕,但 script.js 的執(zhí)行要在所有元素解析完成之后镰烧,DOMContentLoaded 事件觸發(fā)之前完成(腳本延遲到文檔解析和顯示后執(zhí)行怔鳖,有順序)结执。
4.簡述網頁的渲染機制
- 1.解析 HTML 標簽, 構建 DOM 樹
- 2.解析 CSS 標簽, 構建 CSSOM 樹
- 3.把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 4.在渲染樹的基礎上進行布局, 計算每個節(jié)點的幾何結構
- 5.把每個節(jié)點繪制到屏幕上 (painting)
render-tree-construction.png
5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復雜類型?
JavaScript的數(shù)據(jù)類型昌犹,共有六種斜姥。
簡單類型:
- 數(shù)值(number):整數(shù)和小數(shù)(比如1和3.14)
- 字符串(string):字符組成的文本(比如"Hello World")
- 布爾值(boolean):true(真)和false(假)兩個特定值
- undefined:表示“未定義”或不存在沧竟,即此處目前沒有任何值
- null:表示空缺悟泵,即此處應該有一個值杈笔,但目前為空
復雜類型: - 對象(object):各種值組成的集合
6.NaN、undefined蒙具、null分別代表什么?
- NaN:含義是Not a Number球榆,表示非數(shù)字禁筏,NaN和任何值都不相等持钉,包括自己
-undefined:該類型只有一個值篱昔,即特殊的undefined每强。在var聲明變量但未對其加以初始化時,這個變量的值就是undefined州刽。
null:表示空缺空执,即此處應該有一個值穗椅,但目前為空。
7.typeof和instanceof的作用和區(qū)別?
typeof是一元運算符邢羔,返回值為字符串拜鹤,該字符串用來說明運算數(shù)的數(shù)據(jù)類型
instanceof用于判斷一個變量是否某個對象的實例敏簿,返回true或者false。是二元運算惯裕。
代碼
function isNumber(el){
return typeof el =="number";
}
function isString(el){
return typeof el =="string";
}
function isBoolean(el){
return typeof el =="boolean";
}
function isFunction(el){
return typeof el =="function";
}
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
2.以下代碼的輸出結果是?
console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date());//1477584649062
console.log(+"4");//4
3.以下代碼的輸出結果是?
var a = 1;
a+++a;//3
typeof a+2;//number2
4.遍歷數(shù)組蜻势,把數(shù)組里的打印數(shù)組每一項的平方
var arr = [3,4,5];
for(var i=0;i<arr.length;i++){
y=arr[i]*arr[i];
console.log(y);
}
// 輸出 9, 16, 25
5.遍歷 JSON, 打印里面的值
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for(prop in obj){
console.log(prop +":"+ obj[prop]);
}
//todo ...
// 輸出 name: hunger, sex: male, age:28
6.下面代碼的輸出是? 為什么 ?
console.log(a);//undefined
var a = 1;
console.log(a);//1
console.log(b);//報錯
原因var語句會被提到前面,所以a被聲明但是并沒有賦值鹉胖。
b沒有被聲明所以報錯握玛。