我的前端學(xué)習(xí)筆記14——js基礎(chǔ)

1纯路,CSS和JS在網(wǎng)頁中的放置順序是怎樣的?

  • css放在 <head> 標(biāo)簽里族操,js放在 <body> 標(biāo)簽最后面鸠窗。
  • 原因:
  1. css放在前面是因為瀏覽器在加載過程中妓羊,會現(xiàn)根據(jù)html生成DOM樹,然后再加上css形成渲染樹稍计,如果css過大還被 放在了后面躁绸,會導(dǎo)致出現(xiàn)閃屏、白屏的現(xiàn)象。
  2. 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 腳本的時候:
  1. <script src="script.js"></script>
    沒有 deferasync驾诈,瀏覽器會立即加載并執(zhí)行指定的腳本缠诅,“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前,也就是說不等待后續(xù)載入的文檔元素乍迄,讀到就加載并執(zhí)行管引。

  2. <script async src="script.js"></script>
    async,加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行(異步)闯两。

  3. <script defer src="myscript.js"></script>
    defer 褥伴,加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行(異步),但是 script.js 的執(zhí)行要在所有元素解析完成之后漾狼,DOMContentLoaded 事件觸發(fā)之前完成重慢。

  • 從實用角度來說呢,首先把所有腳本都丟到 </body>之前是最佳實踐邦投,因為對于舊瀏覽器來說這是唯一的優(yōu)化選擇伤锚,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析擅笔。
藍(lán)色線代表網(wǎng)絡(luò)讀取志衣,紅色線代表執(zhí)行時間,這倆都是針對腳本的猛们;綠色線代表 HTML 解析

此圖告訴我們以下幾個要點:

  • deferasync 在網(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ù)類型:
  1. number數(shù)據(jù)類型 —— var num=123;
  2. string(字符串)數(shù)據(jù)類型 —— var str=“abcd”;
  3. boolean數(shù)據(jù)類型 —— var bool=ture;
  4. 浮點數(shù)數(shù)據(jù)類型——var float=.89;
  • 特殊數(shù)據(jù)類型:
  1. 未定義undefined —— var a;
  2. 空 null —— var a=null
  • 復(fù)雜數(shù)據(jù)類型:
  1. 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ū)分


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市像棘,隨后出現(xiàn)的幾起案子稽亏,更是在濱河造成了極大的恐慌,老刑警劉巖缕题,帶你破解...
    沈念sama閱讀 218,451評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件截歉,死亡現(xiàn)場離奇詭異,居然都是意外死亡烟零,警方通過查閱死者的電腦和手機(jī)瘪松,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锨阿,“玉大人宵睦,你說我怎么就攤上這事∈睿” “怎么了壳嚎?”我有些...
    開封第一講書人閱讀 164,782評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長末早。 經(jīng)常有香客問我烟馅,道長,這世上最難降的妖魔是什么荐吉? 我笑而不...
    開封第一講書人閱讀 58,709評論 1 294
  • 正文 為了忘掉前任焙糟,我火速辦了婚禮,結(jié)果婚禮上样屠,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好痪欲,可當(dāng)我...
    茶點故事閱讀 67,733評論 6 392
  • 文/花漫 我一把揭開白布悦穿。 她就那樣靜靜地躺著,像睡著了一般业踢。 火紅的嫁衣襯著肌膚如雪栗柒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,578評論 1 305
  • 那天知举,我揣著相機(jī)與錄音瞬沦,去河邊找鬼。 笑死雇锡,一個胖子當(dāng)著我的面吹牛逛钻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锰提,決...
    沈念sama閱讀 40,320評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼曙痘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了立肘?” 一聲冷哼從身側(cè)響起边坤,我...
    開封第一講書人閱讀 39,241評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谅年,沒想到半個月后茧痒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,686評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡融蹂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,878評論 3 336
  • 正文 我和宋清朗相戀三年文黎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片殿较。...
    茶點故事閱讀 39,992評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡耸峭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出淋纲,到底是詐尸還是另有隱情劳闹,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評論 5 346
  • 正文 年R本政府宣布洽瞬,位于F島的核電站本涕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏伙窃。R本人自食惡果不足惜菩颖,卻給世界環(huán)境...
    茶點故事閱讀 41,336評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望为障。 院中可真熱鬧晦闰,春花似錦放祟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至声滥,卻和暖如春眉撵,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背纽疟。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評論 1 270
  • 我被黑心中介騙來泰國打工憾赁, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留污朽,地道東北人缠沈。 一個月前我還...
    沈念sama閱讀 48,173評論 3 370
  • 正文 我出身青樓膘壶,卻偏偏與公主長得像,于是被迫代替她去往敵國和親洲愤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,947評論 2 355

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

  • 第一章: JS簡介 從當(dāng)初簡單的語言亡问,變成了現(xiàn)在能夠處理復(fù)雜計算和交互,擁有閉包肛宋、匿名函數(shù)州藕, 甚至元編程等...
    LaBaby_閱讀 1,670評論 0 6
  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined、Nul...
    極樂君閱讀 5,517評論 0 106
  • 概念 1床玻、CSS和JS在網(wǎng)頁上的放置順序是怎樣的沉帮? 將CSS放在head標(biāo)簽中:CSS放在后面會造成白屏或者FOU...
    周花花啊閱讀 443評論 1 1
  • 目錄 1、談?wù)勀銓jax的理解穆壕?(概念、特點喇勋、作用) 2、說說你對延遲對象deferred的理解? 3川背、什么是跨...
    w_zhuan閱讀 990評論 1 28
  • 重構(gòu)已經(jīng)完成并發(fā)布,在原項目地址壮不,有空之后再寫新版本的說明 之前曾經(jīng)寫過一個爬取人人貸交易數(shù)據(jù)的爬蟲皱碘,主要用到了u...
    科斯莫耗子閱讀 1,633評論 0 2