前端實(shí)用知識(shí)

luckyw 發(fā)布于2019-08-30 15:55 / 2033人閱讀

摘要：開發(fā)中的實(shí)踐盡量使用更換實(shí)現(xiàn)樣式變化。原因事件存在毫秒延時(shí)。解決方法移動(dòng)端使用事件。文本顯示省略號(hào)顯示省略號(hào)的基本條件元素定長(zhǎng)。單行顯示省略號(hào)多行顯示省略號(hào)目前只有內(nèi)核支持此屬性和手機(jī)端內(nèi)核以及瀏覽器默認(rèn)字體瀏覽器默認(rèn)字體是。

1、輸入U(xiǎn)RL到顯示網(wǎng)頁，中間發(fā)生了什么

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

2、網(wǎng)絡(luò)協(xié)議（七層）

物理層(以比特流為單位傳輸)-->數(shù)據(jù)鏈路層(封裝楨，把數(shù)據(jù)從一個(gè)MAC傳到另一個(gè)MAC)-->網(wǎng)絡(luò)層(路徑的選擇，網(wǎng)絡(luò)的轉(zhuǎn)發(fā))-->傳輸層(建立鏈接，傳送報(bào)文，TCP、UDP)-->會(huì)話層(發(fā)起會(huì)話)-->表示層(數(shù)據(jù)表示方式的轉(zhuǎn)化)-->應(yīng)用層(面向用戶,DNS、FTP、E-mail、HTTP)

3、頁面的重繪和回流

重繪(repaint):頁面元素樣式發(fā)生變化，但不引起結(jié)構(gòu)布局改變時(shí)，瀏覽器只在UI層面進(jìn)行重繪和更新，稱為重繪。

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

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

開發(fā)中的實(shí)踐：①盡量使用更換class實(shí)現(xiàn)樣式變化。②盡量減少DOM操作，把多次DOM操作，集中一次修改。

4、點(diǎn)透問題

描述：發(fā)生在z層的上下兩層DOM元素，點(diǎn)擊上層A元素時(shí)，A元素隱藏，下層B元素也觸發(fā)點(diǎn)擊事件的現(xiàn)象。

原因：click事件存在300毫秒延時(shí)。

解決方法：移動(dòng)端使用touch事件。

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

5、滑動(dòng)穿透問題（移動(dòng)端）
https://uedsky.com/2016-06/mo...

描述：在移動(dòng)端，當(dāng)彈出一個(gè)fixed浮層，滾動(dòng)浮層，下層也會(huì)跟隨滾動(dòng)。

原因：尚未知

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

body.modal-open {

position: fixed;
width: 100%;

}
如果只是上面的 css，滾動(dòng)條的位置同樣會(huì)丟失
所以如果需要保持滾動(dòng)條的位置需要用 js 保存滾動(dòng)條位置關(guān)閉的時(shí)候還原滾動(dòng)位置

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是獲取和設(shè)置文檔滾動(dòng)高度的通用方法。
document.documentElement.scrollTop可獲取PC端的滾動(dòng)高度（移動(dòng)端恒為0）
document.body.scrollTop可獲取移動(dòng)端的滾動(dòng)高度（PC端恒為0）

6、類型轉(zhuǎn)換

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

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

+：一個(gè)為字符串，另一個(gè)調(diào)用toString()方法轉(zhuǎn)成字符串；兩個(gè)數(shù)字直接相加；兩個(gè)字符串直接拼接。

7、判斷兩個(gè)值相等

==：相等，具有強(qiáng)制轉(zhuǎn)化的特點(diǎn)。
===：全等運(yùn)算符，不強(qiáng)制轉(zhuǎn)換，但對(duì)+0/-0判斷為true,NaN===NaN的判斷為false
Object.is(par1,par2)：可準(zhǔn)確判斷，-0和+0是兩個(gè)不同的值（ES6新添方法）

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

offsetTop：當(dāng)前元素距離最近父元素的高度，和滾動(dòng)條出現(xiàn)與否無關(guān)。
scrollTop：發(fā)生滾動(dòng)時(shí)，頁面滾去的高度。

9、文本顯示省略號(hào)

顯示省略號(hào)的基本條件：元素定長(zhǎng)。

單行顯示省略號(hào)：overflow：hidden; text-overflow: ellipsis; white-space: nowrap;

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

10、px、em、rem以及瀏覽器默認(rèn)字體

瀏覽器默認(rèn)字體是16px。chrom顯示的最小字體是12px，F(xiàn)irefox支持顯示更小的字體。

px是物理像素，不可自適應(yīng)大小。

em是相對(duì)大小，繼承自父元素。

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