前端實用知識

bovenson 發布于2019-08-02 14:15 / 2244人閱讀

摘要：開發中的實踐盡量使用更換實現樣式變化。原因事件存在毫秒延時。解決方法移動端使用事件。文本顯示省略號顯示省略號的基本條件元素定長。單行顯示省略號多行顯示省略號目前只有內核支持此屬性和手機端內核以及瀏覽器默認字體瀏覽器默認字體是。

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

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

2、網絡協議（七層）

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

3、頁面的重繪和回流

重繪(repaint):頁面元素樣式發生變化，但不引起結構布局改變時，瀏覽器只在UI層面進行重繪和更新，稱為重繪。

回流(reflow):頁面的結構、布局或者操作觸發某些屬性，引起的瀏覽器重新就算、布局，稱為回流。
引起回流的操作:①頁面的初次渲染 ②頁面尺寸的改變 ③元素的尺寸、位置發生改變 ④字體的大小改變 ⑤刪除、添加元素 ⑥激活偽類 ⑦觸發某些屬性(offsetWidth系列、clientWidth系列、scrollTop系列、getComputedStyle()、getBoundingClientRect()、scrollTo())

回流一定引起重繪，重繪不一定引起回流，重繪開銷較小。

開發中的實踐：①盡量使用更換class實現樣式變化。②盡量減少DOM操作，把多次DOM操作，集中一次修改。

4、點透問題

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

原因：click事件存在300毫秒延時。

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

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

5、滑動穿透問題（移動端）
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）

6、類型轉換

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

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

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

7、判斷兩個值相等

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

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

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

9、文本顯示省略號

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

單行顯示省略號：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;

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

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

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

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

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

GPU云服務器云服務器前端知識前端知識阿里云 html前端知識前端開發基礎知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53676.html

實用性前端知識 - 收藏集 - 掘金

摘要：與面向對象編程六大方向助你突破前端生涯平臺期前端掘金無論我們從事何種職業，在職業生涯的某個階段，都或多或少會遇到所謂的平臺期。目前為止，已經有個用戶通過認證登觀點年前端初學者的生存指南前端掘金逝者如斯夫，不舍晝夜。你可能聽說過函數式編程（Functional programming），甚至已經使用了一段時間。但是，你能說清楚，它到底是什么嗎？網上搜索一下，你會輕松找到好多答案...

Honwhy 2019-08-20 17:58 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
前端實用知識

摘要：開發中的實踐盡量使用更換實現樣式變化。原因事件存在毫秒延時。解決方法移動端使用事件。文本顯示省略號顯示省略號的基本條件元素定長。單行顯示省略號多行顯示省略號目前只有內核支持此屬性和手機端內核以及瀏覽器默認字體瀏覽器默認字體是。 1、輸入URL到顯示網頁，中間發生了什么 DNS(完成域名到IP的映射)-->TCP傳輸(三次握手建立傳輸鏈接)-->發送請求(分析url，設置請求頭、主體)-...

luckyw 2019-08-30 15:55 評論0 收藏0
前端實用知識

摘要：開發中的實踐盡量使用更換實現樣式變化。原因事件存在毫秒延時。解決方法移動端使用事件。文本顯示省略號顯示省略號的基本條件元素定長。單行顯示省略號多行顯示省略號目前只有內核支持此屬性和手機端內核以及瀏覽器默認字體瀏覽器默認字體是。 1、輸入URL到顯示網頁，中間發生了什么 DNS(完成域名到IP的映射)-->TCP傳輸(三次握手建立傳輸鏈接)-->發送請求(分析url，設置請求頭、主體)-...

CoyPan 2019-08-23 15:14 評論0 收藏0
JavaScript文章

摘要：我對知乎前端相關問題的十問十答張鑫旭張鑫旭大神對知乎上經典的個前端問題的回答。作者對如何避免常見的錯誤，難以發現的問題，以及性能問題和不好的實踐給出了相應的建議。但并不是本身有問題，被標準定義的是極好的。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老...

mumumu 2019-08-22 13:50 評論0 收藏0