前端實用知識

一、輸入URL到顯示網頁，中間發生了什麼

DNS(完成域名到IP的映射)-->TCP傳輸(三次握手創建傳輸連接)-->發送請求(分析url，設置請求頭、主體)-->服務器返回請求文件(HTML文件)-->瀏覽器渲染頁面(DOM tree渲染，css tree渲染，Rander tree渲染，layout佈局，GPU完成像素渲染頁面)

二、網絡協議（七層）

物理層(以比特流爲單位傳輸)-->數據鏈路層(封裝楨，把數據從一個MAC傳到另外一個MAC)-->網絡層(路徑的選擇，網絡的轉發)-->傳輸層(創建連接，傳送報文，TCP、UDP)-->會話層(發起會話)-->表示層(數據表示方式的轉化)-->應用層(面向用戶,DNS、FTP、E-mail、HTTP)

三、頁面的重繪和迴流

• 重繪(repaint):頁面元素樣式發生變化，但不引發結構佈局改變時，瀏覽器只在UI層面進行重繪和更新，稱爲重繪。
• 迴流(reflow):頁面的結構、佈局或者操做觸發某些屬性，引發的瀏覽器從新就算、佈局，稱爲迴流。
  引發迴流的操做:①頁面的初次渲染 ②頁面尺寸的改變 ③元素的尺寸、位置發生改變 ④字體的大小改變 ⑤刪除、添加元素 ⑥激活僞類 ⑦觸發某些屬性(offsetWidth系列、clientWidth系列、scrollTop系列、getComputedStyle()、getBoundingClientRect()、scrollTo())

迴流必定引發重繪，重繪不必定引發迴流，重繪開銷較小。

開發中的實踐：①儘可能使用更換class實現樣式變化。②儘可能減小DOM操做，把屢次DOM操做，集中一次修改。

四、點透問題

描述：發生在z層的上下兩層DOM元素，點擊上層A元素時，A元素隱藏，下層B元素也觸發點擊事件的現象。

緣由：click事件存在300毫秒延時。

解決方法：移動端使用touch事件。

click事件發生的過程:mousedown->mouseup->click
觸摸屏幕上元素時：touchstart->mouseover->mousemove->mousedown->mouseup->click->touchend

五、滑動穿透問題（移動端）
https://uedsky.com/2016-06/mo...

描述：在移動端，當彈出一個fixed浮層，滾動浮層，下層也會跟隨滾動。

緣由：還沒有知

解決方法：
①禁止html，body元素滾動，浮層消失用js恢復滾動---overflow:hidden(整個文檔失去滾動，彈出框也失去滾動)
②記錄當前的滾動位置，讓整個文檔脫離文檔流，把文檔拉回記錄的位置；浮層消失時恢復以前的設置。

body.modal-open {

position: fixed;
width: 100%;

}
若是隻是上面的 css，滾動條的位置一樣會丟失
因此若是須要保持滾動條的位置須要用 js 保存滾動條位置關閉的時候還原滾動位置

JavaScript
/**

• ModalHelper helpers resolve the modal scrolling issue on mobile devices
• https://github.com/twbs/boots...
• requires document.scrollingElement polyfill https://github.com/yangg/scro...

*/

var ModalHelper = (function(bodyCls) {
  var scrollTop;
  return {
    afterOpen: function() {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px';
    },
    beforeClose: function() {
      document.body.classList.remove(bodyCls);
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');

說明：document.scrollingElement.scrollTop是獲取和設置文檔滾動高度的通用方法。
document.documentElement.scrollTop可獲取PC端的滾動高度（移動端恆爲0）
document.body.scrollTop可獲取移動端的滾動高度（PC端恆爲0）

六、類型轉換

==：發生強制類型轉換，其中undefined==null，NAN!=NAN，布爾值和0/1互轉，字符串轉布爾值(是否爲空)，字符串轉數字(數字直接轉，非數字轉爲NAN)，對象是否相等取決因而否引用同一對象(對象轉布爾值--是否爲null)。

Number()/Boolean()/toString()/

+：一個爲字符串，另外一個調用toString()方法轉成字符串；兩個數字直接相加；兩個字符串直接拼接。

七、判斷兩個值相等

==：相等，具備強制轉化的特色。
===：全等運算符，不強制轉換，但對+0/-0判斷爲true,NaN===NaN的判斷爲false
Object.is(par1,par2)：可準確判斷，-0和+0是兩個不一樣的值（ES6新添方法）

八、DOM中的高度
每一個DOM元素都會有五種高度屬性：offsetHeight、clientHeight、scrollHeight、offsetTop、scrollTop。
offsetHeight:height+padding+border+水平滾動條的高度。
clientHeight：height+padding。
scrollHeight：無滾動條時=clientHeight，有滾動條時=包含滾去高度的總體高度

offsetTop：當前元素距離最近父元素的高度，和滾動條出現與否無關。
scrollTop：發生滾動時，頁面滾去的高度。

九、文本顯示省略號

顯示省略號的基本條件：元素定長。

單行顯示省略號：overflow：hidden; text-overflow: ellipsis; white-space: nowrap;

多行顯示省略號：(目前只有webkit內核支持此屬性---Chrome、Safari和手機端內核)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-clamp: 2;
-webkit-box-orient: vertical;

十、px、em、rem以及瀏覽器默認字體

瀏覽器默認字體是16px。chrom顯示的最小字體是12px，Firefox支持顯示更小的字體。

px是物理像素，不可自適應大小。

em是相對大小，繼承自父元素。

rem是相對大小，繼承自html根元素。（IE8及更早版本不支持）