HTML相關的複習記錄-持續更新

一：如何進行網站性能優化

　　1.頁面級優化：

　　減小HTTP請求：減小文件請求的數據而不是質量，好比合並文件，圖片整合成雪碧圖，用background-position進行定位。

　　壓縮JS，css： 這個是比較常見的辦法，節省很多空間。

　　HTTP緩存： 使訪問過的資源，從緩存讀取，而不是從新從服務器請求，返回304，而不是200，可以有效的節省帶寬。

　　將css放到Head中： 使瀏覽器先構建css tree。如將css放到body中，瀏覽器可能先渲染dom tree 後渲染css tree，致使瀏覽器渲染時間推遲

　　避免重複利用資源： 因爲頁面是多個模塊拼接的，可能存在每一個模塊請求的資源是相同的

　　2.代碼及優化：

　　代碼中，儘可能不要直接使用直接操做DOM的操做，由於操做DOM是最耗性能的。

　　在JS查找DOM時，返回的HTML DOM時，返回的是 HTML Collection，如何要遍歷他的話，最好先轉成數組在訪問，使用某一節點，也最好先保存爲局部變量。由於每次訪問該集合的時候，他都會從新查詢，他返回的是一個動態的結果，而不是一個靜態的數組。

　　儘可能不使用eval 和Function,由於經過字符串構建的方法，不會預先編譯，只有執行到的時候進行解析。

　　若是想要修改全局變量的話，若是有大量計算，最好先放到局部變量進行緩存，在出結果的時候賦值給全局變量，由於每次調用全局變量是經過查詢獲取的

二：HTTP狀態碼含義

　　200： 成功處理了請求，並提供的返回

　　204： 成功處理了請求，但沒有任何返回。

　　301：請求的網頁發生了變化（地址欄最後不要寫 / 服務器會進行一次重定向），地址欄保存新的url

　　302:  請求的網頁臨時移動到了新位置。地址欄保存原來的url

　　303：次請求與上次的請求沒有發生變化，至關於從瀏覽器緩存中獲取的、

　　400： 服務器沒法解析的請求

　　401：認證失敗（請求攜帶的認證信息，未經過）

　　403： 服務器拒絕的請求

　　404：服務器找不到的請求。

　　500： 服務器遇到了錯誤，沒法完成請求。

　　503： 服務器目前沒法使用，相似於維護。

三：如何理解HTML5的語義化

　　應該正確的標籤展現對應內容建立頁面結構，而不是濫用idv。 優勢是 代碼結構清洗，利於開發和維護。 方便其餘設備進行解析。有利於SEO引擎搜索優化。

　　結構級：section(區域的章節描述)、header(頭部)、footer(底部)、nav(菜單導航)、acticle(文字的主體內容)

　　塊級：aside(補充主體)、figure(多個元素組合並展現與ficaption)、code(表明代碼塊)、dialog(表達人與人之間對話包含dt和dd)

　　行內級:  mete(特定範圍的數值)、time(表示時間)、progress(進度條)、video(視頻元素)、audio(音頻元素)

　　交互級： details、datagrid、menu、command、

四:HTML5的離線儲存

　　新建一個.appcache的文件緩存機制，網絡在線會更新文件，當網絡離線狀態下，會經過儲存的數據進行展現。ttps://www.jianshu.com/p/aaa8971cd6c8

五：cookies，sessionStorage和localStorage的區別

　　localStorage 用於長期儲存，瀏覽器關閉不丟失。

　　sessionStorage在瀏覽器關閉後自動刪除。

　　cookie會在同源的http請求中攜帶，多用於表示用戶信息。 數據大小不會超過4K。能夠設置過時時間。

六：web標準和W3C標準

　　網頁展現由：結構（html）、表現（css）、行爲(交互，dom與js)。獨立分開

　　W3C標準對web標準提出規範化要求。 標籤要閉合，標籤要小寫，注意嵌套關係。

七：DocType做用？嚴格模式與混雜婚事如何區分，意義何在？

　　<!DocType> 生命位於文檔最上方，Html以前，告知瀏覽器以何種模式來渲染。

　　嚴格模式也成爲了標準模式。瀏覽器按照W3C標準解析執行代碼。

　　混雜模式則是使用瀏覽器本身的方式執行代碼。

　　html5 不急於smgl 由於不須要對DTD進行引用，可是須要doctype來規範瀏覽器行爲，。

八：瀏覽器緩存

　　把已請求到的web資源，copy到瀏覽器緩存中。

瀏覽器每次發起請求，都會先在瀏覽器緩存中查找該請求的結果以及緩存標識

瀏覽器每次拿到返回的請求結果都會將該結果和緩存標識存入瀏覽器緩存中

　  根據緩存新鮮度，判斷是否使用緩存。 如使用則狀態爲304. 如不適用，則爲200.

  　新鮮度可根據mate進行設置

九：瀏覽器渲染原理及流程

　　地址欄輸入url   => DNS解析 =》 創建tcp鏈接 =》 客戶端發送http請求 =》 服務處理，響應請求=> 瀏覽器渲染HTML

　　首先要知道，瀏覽器Firefox、Chrome和Safari是基於兩種渲染引擎構建的，Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit。

　　先解析dom結構。在解析css結構。而後將dom和css結構成Render結構，隨後在頁面上構建render結構，而後構建render佈局，在頁面上繪製render結構。

　　頁面構建是以8K分塊的形式進行的。 以局部佈滿全局，相似於全頁面多線程的異步加載、

十：ajax的底層原理

　　說到ajax不得不說其核心XMLHttpRequest。

　　axjax的原理，其實就是XMLHttpRequest的處理過程。

　　發送請求是由open 和send 等進行。

　　根據返回狀態。 也就是onreadystatechange。根據每次狀態發生變化時觸發。

　　ajax返回的信息，其實就是responseText和responseXML取的返回值。

十一：什麼是CDN和CDN的好處

　　CDN是將源站內容分發至最接近用戶的節點，使用戶可就近取得所需內容，提升用戶訪問的響應速度和成功率。解決因分佈、帶寬、服務器性能帶來的訪問延遲問題，適用於站點加速、點播、直播等場景。

　　瀏覽器都會對單個域名下的併發請求數（文件加載）進行限制，一般最多有4個，那麼第5個加載項將會被阻塞，直到前面的某一個文件加載完畢。由於CDN文件是存放在不一樣區域（不一樣IP）的，因此對瀏覽器來講是能夠同時加載頁面所需的全部文件（遠不止4個），從而提升頁面加載速度。

　　其餘網站，獲取過同IP同名文件，便會利用到緩存