JS入門(mén)知識(shí)

一枪汪、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ù)一

代碼任務(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市念搬,隨后出現(xiàn)的幾起案子抑堡,更是在濱河造成了極大的恐慌,老刑警劉巖锁蠕,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件夷野,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡荣倾,警方通過(guò)查閱死者的電腦和手機(jī)悯搔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人妒貌,你說(shuō)我怎么就攤上這事通危。” “怎么了灌曙?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵菊碟,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我在刺,道長(zhǎng)逆害,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任蚣驼,我火速辦了婚禮魄幕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘颖杏。我一直安慰自己纯陨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布留储。 她就那樣靜靜地躺著翼抠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪获讳。 梳的紋絲不亂的頭發(fā)上阴颖,一...
    開(kāi)封第一講書(shū)人閱讀 49,821評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音赔嚎,去河邊找鬼膘盖。 笑死,一個(gè)胖子當(dāng)著我的面吹牛尤误,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播结缚,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼损晤,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了红竭?” 一聲冷哼從身側(cè)響起尤勋,我...
    開(kāi)封第一講書(shū)人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎茵宪,沒(méi)想到半個(gè)月后最冰,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡稀火,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年暖哨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凰狞。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡篇裁,死狀恐怖沛慢,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情达布,我是刑警寧澤团甲,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站黍聂,受9級(jí)特大地震影響躺苦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜产还,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一匹厘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧雕沉,春花似錦集乔、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至倔叼,卻和暖如春汗唱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背丈攒。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工哩罪, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人巡验。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓际插,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親显设。 傳聞我的和親對(duì)象是個(gè)殘疾皇子框弛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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

  • * 基礎(chǔ)知識(shí) * js的輸出方式 * js的組成 * js的命名規(guī)范 * 數(shù)據(jù)類(lèi)型 * number數(shù)據(jù)類(lèi)型 * ...
    web前端ling閱讀 997評(píng)論 0 2
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • <a name='html'>HTML</a> Doctype作用捕捂?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)瑟枫、<...
    clark124閱讀 3,462評(píng)論 1 19
  • 1. 簡(jiǎn)介 毫無(wú)疑問(wèn),Java 8是Java自Java 5(發(fā)布于2004年)之后的最重要的版本指攒。這個(gè)版本包含語(yǔ)言...
    javaBoy_hw閱讀 294評(píng)論 0 0
  • 晴空萬(wàn)里慷妙,清邁難得的沒(méi)有下雨。 “小敏允悦,我們出去找點(diǎn)樂(lè)子吧” “走......” 所謂的樂(lè)子就是漫無(wú)目的的在清邁古...
    JJGreamgirls閱讀 381評(píng)論 0 0