css和js 在網(wǎng)頁中的放置順序
js在網(wǎng)頁的放置順序
對于外部js的文件放置時(shí)丽啡，應(yīng)該全部放在<head>標(biāo)簽內(nèi)。但是這樣的話驻仅，意味著必須等著全部的js代碼都被下載其徙、解析唯灵、執(zhí)行完成后丰泊，才能呈現(xiàn)頁面的內(nèi)容（瀏覽器在遇到<body>標(biāo)簽時(shí)才開始呈現(xiàn)內(nèi)容）薯定。對于那些需要很多js 的頁面來說，這無疑會導(dǎo)致瀏覽器在呈現(xiàn)頁面時(shí)出現(xiàn)明顯的延遲瞳购，而延遲期間的瀏覽器窗口中將是一片空白话侄，為了避免這個(gè)問題，有時(shí)候會把外部的js文件放在<body>元素中頁面內(nèi)容的后面学赛。
css在文件中的放置順序
CSS一般放置在head標(biāo)簽內(nèi)满葛，要是頁面在無CSS渲染的情況下先下載html的話將會面目全非，樣式先行的話在加載html內(nèi)容的時(shí)候可以同時(shí)渲染樣式罢屈，避免fouc。
當(dāng)css樣式表和js外部文件同時(shí)在head標(biāo)簽中時(shí)篇亭，css樣式表應(yīng)該放置在js外部文件的上面
白屏和FOUC
當(dāng)把css樣式表放在底部或者使用@import方式引入樣式缠捌、或?qū)s放在頭部造成其他內(nèi)容阻塞加載時(shí)：
一些瀏覽器例如chrome和ie，它的加載和渲染機(jī)制是等頭部的js 和底部的CSS全部加載解析完成后再渲染展示頁面译蒂，而這個(gè)等待的時(shí)間就是白屏曼月。
另一些瀏覽器例如firefox，它會在CSS未加載前先展現(xiàn)頁面柔昼，等CSS加載后再重繪一次哑芹，這就造成了無樣式內(nèi)容閃爍（逐步加載無樣式的內(nèi)容，等CSS加載后頁面突然展現(xiàn)樣式）
解決方法就是在head中運(yùn)用css樣式表捕透。
async和defer的作用及其區(qū)別
加載
即獲取資源文件的過程聪姿，不同的瀏覽器以及不同的版本在實(shí)現(xiàn)這一過程中會有不同的實(shí)現(xiàn)效果碴萧。
加載過程中遇到外部的CSS文件，瀏覽器另外發(fā)出一個(gè)請求來獲取CSS文件末购。
遇到圖片資源瀏覽器也會發(fā)出另外的一個(gè)請求來獲取圖片資源這是異步請求破喻，并不會影響html文檔進(jìn)行加載，但是當(dāng)文檔加載過程中遇到j(luò)s 文件盟榴，html文檔會掛起渲染（加載解析渲染同步）的線程曹质，不僅要等待文檔中js文件加載完畢，還要等待解析執(zhí)行完畢擎场，才可以恢復(fù)html文檔的渲染線程羽德。
延遲腳本
html4.01為<script>標(biāo)簽定義了defer屬性，這個(gè)屬性的用途就是腳本會被 延遲到整個(gè)頁面都被解析完畢后再運(yùn)行迅办，因此宅静，defer屬性告訴瀏覽器立即下載但是延遲執(zhí)行。在現(xiàn)實(shí)中礼饱，兩個(gè)延遲腳本的話坏为，不一定按照順序執(zhí)行，因此最好只包含一個(gè)延遲腳本镊绪。
defer屬性只適用于外部腳本文件匀伏。ie4~ie7還支持對嵌入腳本defer屬性的支持，但是ie8及之后的版本則只適用于外部腳本的文件蝴韭。
在xhtml文檔中够颠，要把defer屬性設(shè)置為defer="defer"。
異步腳本
html5為<script>元素定義了async屬性榄鉴，這個(gè)屬性與defer屬性類似履磨，都用于改變處理腳本的行為。同樣與defer類似庆尘，async只適用于外部腳本文件剃诅，并告訴瀏覽器立即下載文件。但與defer不同的是驶忌，標(biāo)記為async的兩個(gè)腳本并不保證按照指定的它們的先后順序執(zhí)行矛辕。第二個(gè)腳本可能會在第一個(gè)腳本之前執(zhí)行。指定async屬性的目的就是不讓頁面等待兩個(gè)腳本下載和執(zhí)行付魔，從而異步加載頁面的其他內(nèi)容聊品。
簡述網(wǎng)頁的渲染順序
如何渲染一個(gè)網(wǎng)頁
- 在瀏覽器輸入要訪問的網(wǎng)頁的url；
- 瀏覽器開始解析url几苍，找尋其所屬的協(xié)議翻屈，主機(jī)所在，所用的端口以及對應(yīng)的路徑妻坝；
- 瀏覽器通過進(jìn)行dns查詢將域名轉(zhuǎn)為ip地址伸眶；
- 瀏覽器開啟對應(yīng)的通信端口并與解析出來的ip地址相連（通常會使用80端口）惊窖；
- 當(dāng)建立鏈接后，就會向主機(jī)地址發(fā)送一個(gè)http請求赚抡，包含了一些瀏覽器的基本屬性和網(wǎng)頁參數(shù)等爬坑。
- 主機(jī)將請求接收并轉(zhuǎn)發(fā)給監(jiān)聽對應(yīng)端口的服務(wù)器；
- 服務(wù)器解析請求路徑涂臣，并根據(jù)設(shè)定的配置將其轉(zhuǎn)交給對應(yīng)的處理器處理（具體會根據(jù)不同語言而有所區(qū)別：php,pyhton等）
- 處理器接收請求盾计，并著手準(zhǔn)備回應(yīng)請求；
- 根據(jù)具體情況赁遗，處理器可能會需要鏈接數(shù)據(jù)庫獲取數(shù)據(jù)來構(gòu)建回應(yīng)的內(nèi)容（鏈接數(shù)據(jù)庫-》執(zhí)行查詢-》獲取并解析數(shù)據(jù)-》關(guān)閉數(shù)據(jù)庫鏈接）署辉；
- 將所有的數(shù)據(jù)整合構(gòu)成回應(yīng)主體（對于網(wǎng)頁而言是html字符串），加上必須要的元信息（http的header）岩四，以同樣的協(xié)議返回給用戶的瀏覽器哭尝；
- 瀏覽器接收回應(yīng)的內(nèi)容，根據(jù)回應(yīng)的狀態(tài)剖煌，如果有錯(cuò)誤則進(jìn)行處理材鹦，若無則進(jìn)行解析。
- 瀏覽器會根據(jù)獲得的內(nèi)容（多數(shù)情況下為html）生成一個(gè)dom樹耕姊；
- 然后針對其內(nèi)引用的外部資源逐個(gè)發(fā)出請求獲取桶唐，比如圖片，樣式茉兰，js等尤泽，此刻重復(fù)上述請求步驟；
- 瀏覽器獲得返回的樣式后開始解析其內(nèi)容规脸，將css構(gòu)建cssom坯约，而根據(jù)具體的屬性來執(zhí)行js的解析和執(zhí)行；
- 針對更新后的dom和cssom莫鸭，生成render tree即包含了視覺展現(xiàn)信息的樹闹丐，瀏覽器根據(jù)render tree 來進(jìn)行渲染，即你看到的頁面被因；
- 根據(jù)css來對render tree進(jìn)行布局妇智、定位，然后再對定位好的部分進(jìn)行painting氏身，然后你就看到了呈現(xiàn)在你面前的頁面。
css和js加載順序
js
- 默認(rèn)下惑畴，js的加載時(shí)同步的蛋欣，即遇到<script>標(biāo)簽后立刻就會開始解析js，如果js本身是外部資源如贷，則還會先去請求獲取后再解析陷虎，同時(shí)dom的解析也會因此而暫停到踏，一直等待js解析執(zhí)行后才會繼續(xù)。
- 對于外部引用的js尚猿，開發(fā)者可以通過給script標(biāo)簽增加defer屬性來使js滯后加載窝稿，這樣就不會影響到dom的解析了，其也會在dom解析后執(zhí)行凿掂，但這種情況下伴榔，務(wù)必要保證js中不會用到document.write()這種直接創(chuàng)建dom node的語句；
- 除了defer庄萎，h5中新引入了async屬性踪少，可以讓js 保持異步加載，如此js的解析執(zhí)行就是在另一個(gè)線程中進(jìn)行了糠涛。就和dom的解析互不影響了援奢，當(dāng)然，同樣的忍捡，這種情況下集漾，js中也不能有類似document.write()的函數(shù)；
- 同時(shí)砸脊，引擎方面目前也有一定的優(yōu)化具篇，一般來說，webkit或者firefox所用的引擎都會在執(zhí)行某個(gè)腳本的同時(shí)脓规，開啟另一個(gè)線程繼續(xù)處理下面的文檔并請求所需的外部資源栽连。
CSS
雖然css不會影響dom的結(jié)構(gòu)，但是因?yàn)閖s對css有獲取權(quán)限侨舆，所以css加載也會因?yàn)閖s的不同而有所不同秒紧。
firefox會在保證css加載后才會加載js;
webkit則智能些，它只會延遲加載那些會因?yàn)閏ss未加載而受到影響的js挨下。
即css的執(zhí)行要優(yōu)先于js熔恢。
js關(guān)鍵詞
js
操作網(wǎng)頁內(nèi)容，實(shí)現(xiàn)功能或效果臭笆。是客戶端（瀏覽器（pc/app嵌入瀏覽器/手機(jī)上））腳本語言
標(biāo)識符
是指變量叙淌、函數(shù)、屬性的名字或者函數(shù)的參數(shù)愁铺。
特征：區(qū)分大小寫鹰霍；
第一個(gè)字符必須是字母、下劃線茵乱、或者是$茂洒。
后面的可以是字母、數(shù)字瓶竭、下劃線督勺、$渠羞。
命名規(guī)約：使用有實(shí)際意義的單詞。
變量使用駝峰規(guī)則智哀，第一個(gè)單詞首字母小寫次询，后面的單詞首字母大寫。變量使用名詞瓷叫，方法函數(shù)使用動詞開頭屯吊，常量全部用大寫字母，函數(shù)創(chuàng)建對象首字母大寫赞辩。
變量
在js中變量是用來保存值的占位符雌芽，定義變量的時(shí)候要使用var運(yùn)算符，后面跟一個(gè)作為名稱的標(biāo)識符即可辨嗽。
弱類型
強(qiáng)類型：在聲明變量的時(shí)候就要標(biāo)識其類型世落。
弱類型：一個(gè)變量用來保存任何類型的數(shù)據(jù)、變量的類型糟需。不是由聲明時(shí)決定（聲明時(shí)只是用了var運(yùn)算符）而是在程序執(zhí)行階段由其值的類型決定的屉佳，隨著程序運(yùn)行其值類型改變，變量類型也會發(fā)生改變洲押。
語句是為了完成某種任務(wù)而進(jìn)行的操作武花。比如：var a=1+2這條語句先用var運(yùn)算符，聲明了變量a杈帐，然后將1+2的運(yùn)算結(jié)果賦值給變量a体箕。js中語句以;結(jié)束，一行可以包含多條語句挑童，如果省略分號不會產(chǎn)生語法錯(cuò)誤累铅，解釋器會自動判斷語句結(jié)束。
注釋
//單行注釋
/**/ 多行注釋
