一枪汪、CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的藕筋?
css一般放在html中的head標(biāo)簽之中锅锨,一般在meta和title標(biāo)簽之后
頁(yè)面渲染首先是根據(jù)DOM結(jié)構(gòu)生成一個(gè)DOM樹(shù),然后加上css樣式生成一個(gè)渲染樹(shù)匣椰,如果將css放在最后,頁(yè)面可能會(huì)出現(xiàn)閃跳端礼、白屏或樣式混亂等禽笑。js一般放在body標(biāo)簽的最后,也就是</body>之前
js是阻塞加載的蛤奥,若是放在前面佳镜,會(huì)影響頁(yè)面的加載速度,若是js文件過(guò)大凡桥,這種影響就會(huì)更大蟀伸,可以使用異步加載的方法來(lái)解決阻塞加載的問(wèn)題。簡(jiǎn)單而言缅刽,以這種方式來(lái)放置css和js啊掏,可以讓頁(yè)面的內(nèi)容更早,更快的被加載出來(lái)衰猛。
二迟蜜、解釋白屏和FOUC
在不同瀏覽器對(duì)css和html的處理方式不同,一種是等待css加載完成后腕侄,對(duì)html
進(jìn)行渲染并顯示小泉,有的是先對(duì)html元素進(jìn)行展示芦疏,等css加載完成之后,再對(duì)html進(jìn)行樣式的設(shè)置微姊;前者會(huì)造成白屏酸茴,后者則會(huì)造成FOUC。
三兢交、async和defer的作用是什么薪捍?有什么區(qū)別?
async---異步腳本配喳,作用是:告訴瀏覽器立刻下載其指定的js酪穿,與此同時(shí)會(huì)同步加載頁(yè)面的內(nèi)容部分,不會(huì)因?yàn)閖s的存在而導(dǎo)致瀏覽器必須先下載并執(zhí)行js后再加載后面的內(nèi)容晴裹;(因此建議異步腳本不要在加載期間修改DOM)
defer--延遲腳本被济,作用是遇到j(luò)s時(shí)立即下載,但延遲到</html>之前的內(nèi)容全部加載完后再執(zhí)行涧团;這樣不會(huì)因此js的存在導(dǎo)致阻塞了后面的頁(yè)面內(nèi)容的呈現(xiàn)
區(qū)別:
1只磷、執(zhí)行時(shí)間不一樣:async的js在下載完后會(huì)立即執(zhí)行(因此腳本在代碼中的順序并不是腳本所執(zhí)行的先后順序,有可能后面出現(xiàn)的腳本先執(zhí)行)泌绣,但defer則要等待整個(gè)頁(yè)面內(nèi)容及樣式全部加載完后再執(zhí)行钮追;(HTML5規(guī)范要求腳本執(zhí)行應(yīng)該按照腳本出現(xiàn)的先后順序執(zhí)行,但實(shí)際情況下阿迈,延遲腳本不一定按照先后順序執(zhí)行元媚。
2、HTML版本不一樣:html的版本html4.0中定義了defer苗沧;html5.0中定義async刊棕;
3、瀏覽器支持情況不一樣
四崎页、簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
(1).根據(jù)URL向服務(wù)器請(qǐng)求數(shù)
(2).根據(jù)來(lái)自服務(wù)器端的HTML形成文檔對(duì)象模型鞠绰,即DOM
(3).加載并解析css樣式代碼,形成css對(duì)象模型飒焦。
(4).在DOM和css對(duì)象模型上蜈膨,創(chuàng)建一棵由一組待生成渲染的渲染樹(shù),牺荠,渲染樹(shù)反應(yīng)了文檔對(duì)象模型的結(jié)構(gòu)翁巍,其中的每一段文本字符串都表現(xiàn)為一個(gè)獨(dú)立的渲染器,每一個(gè)渲染器都包含與之對(duì)應(yīng)的DOM對(duì)象休雌,文本塊和之前所計(jì)算出來(lái)的樣式灶壶。
(5).對(duì)渲染樹(shù)上的每一個(gè)元素,計(jì)算它的坐標(biāo)杈曲,稱(chēng)為布局驰凛。
(6).最后胸懈,渲染書(shū)中所包含的內(nèi)容顯示在瀏覽器上。
(7).當(dāng)用戶(hù)與網(wǎng)頁(yè)交互恰响,或者腳本程序操作DOM內(nèi)容等趣钱,上述過(guò)程就會(huì)重新再來(lái)一次。
五胚宦、JavaScript 定義了幾種數(shù)據(jù)類(lèi)型? 哪些是簡(jiǎn)單類(lèi)型?哪些是復(fù)雜類(lèi)型?
ECMAScript中規(guī)定了7種數(shù)據(jù)類(lèi)型首有,包括6中原始數(shù)據(jù)類(lèi)型和object。
1.Boolean 布爾類(lèi)型枢劝;其中有兩個(gè)值:true false
2.Null 空值(null or an empty value);只有一個(gè)值 null
3.undefined 一個(gè)已經(jīng)被聲明井联,但沒(méi)有被賦值的變量擁有一個(gè)默認(rèn)值,就是undefined undefined(首字母小寫(xiě))是它唯一的值
4.String 字符串類(lèi)型您旁,用于表示文本數(shù)據(jù)烙常,它的索引值從0開(kāi)始。
5.Number 在ECMAScript標(biāo)準(zhǔn)中被冒,只有一種數(shù)字類(lèi)型军掂,即Number,它包括了整數(shù)
昨悼、浮點(diǎn)數(shù)、正負(fù)Infinity和NaN
6.Symbol 符號(hào)類(lèi)型跃洛,是在ECMAScript中新增的一個(gè)類(lèi)型率触,它是唯一的,也是不
可修改的汇竭。
7.object 對(duì)象類(lèi)型葱蝗,它是內(nèi)存中可以被標(biāo)識(shí)符引用的一個(gè)區(qū)域
六、NaN细燎、undefined两曼、null分別代表什么?
- NaN not a number,它是一個(gè)Number類(lèi)型的值玻驻,但是不能被表示出來(lái)悼凑,另外需要注意的一點(diǎn)是,它和自己本身并不相等璧瞬。
- undefined 一個(gè)已經(jīng)被聲明户辫,但沒(méi)有被賦值的元素有一個(gè)默認(rèn)值,就是undefined嗤锉,一個(gè)沒(méi)有傳入實(shí)參的形參的值也是undefined渔欢,如果一個(gè)被定義的函數(shù)沒(méi)有返回值,那么它的返回值也是undefined瘟忱。
- null 空值奥额,是JavaScript中的一個(gè)字面量苫幢,也是JavaScript的原始值之一
七、typeof和instanceof的作用和區(qū)別?
兩者均能判斷一個(gè)變量是否為空或者是什么類(lèi)型的變量垫挨。
typeof:用于獲取一個(gè)數(shù)據(jù)的類(lèi)型态坦,它所返回的結(jié)果一般有:boolean,number棒拂、string伞梯、function、object和undefined帚屉,它對(duì)于Array谜诫、null和其他對(duì)
象的返回值均為object,這也是它的局限性instanceof:如果希望知道一個(gè)對(duì)象是數(shù)組還是空值或者是其他的對(duì)象攻旦,就用
到了這個(gè)函數(shù)喻旷,instanceof用于判斷某個(gè)變量是否是某個(gè)對(duì)象的實(shí)例,它要求明
確確定對(duì)象為某個(gè)特定類(lèi)型牢屋,而不是籠統(tǒng)的object此外且预,typeof是一個(gè)一元運(yùn)算符,放在運(yùn)算數(shù)的前面烙无,以判斷類(lèi)型锋谐,而
instanceof則是一個(gè)二元運(yùn)算符,它的返回值是一個(gè)布爾值截酷。
代碼任務(wù)二:
console.log(1+1); //數(shù)字2
console.log("2"+"4"); //字符串24
console.log(2+"4"); //字符串24
console.log(+new Date());//轉(zhuǎn)成毫秒
console.log(+"4");//數(shù)字4
代碼任務(wù)三:
var a = 1;
a+++a; // 3 首先a++運(yùn)算后涮拗,a++依然是1,但a已經(jīng)變成2迂苛,即1+2=3
typeof a+2; //number2 typeof的優(yōu)先級(jí)高三热,所以首先判斷typeof a 結(jié)果是number,再+2三幻,完成一個(gè)字符串的拼接.
代碼任務(wù)四:
arr = [3,4,5];
for(i in arr){console.log(arr[i]*arr[i]);
代碼任務(wù)五:
var obj = {
name : 'hunger',
sex : 'male',
age : 28
}
for(i in obj){
console.log(obj[i]);
}
代碼任務(wù)六:
console.log(a); // undefined 由于變量提升就漾,所以a已經(jīng)被聲明
var a = 1;
console.log(a); // 1
console.log(b); // 報(bào)錯(cuò) b is not define