摘要：當頁面中元素樣式的改變并不影響它在文檔流中的位置時例如等，瀏覽器會將新樣式賦予給元素并重新繪制它，這個過程稱為重繪。

無限期更新前端的一些坑，一些記錄，一些冷知識
https://github.com/ssshooter/...

大概從 17 年的六月份開始記錄吧，也已經一年了，其中也包含了一些很簡單的知識，以前還覺得挺難的，現在看起來有點謎之感慨...

所有對象都有 __proto__ 屬性，都指向創造對象的函數對象的 prototype。

上傳文件要使用 formdata 包裝。

Promise.prototype.catch 方法是 .then(null, rejection) 的別名。

同一個 EventTarget 注冊了多個相同的 EventListener，那么重復的實例會被拋棄。所以這么做不會使得 EventListener 被調用兩次，也不需要用 removeEventListener 手動清除多余的EventListener，因為重復的都被自動拋棄了。

當使用 addEventListener() 為一個元素注冊事件的時候，句柄里的 this 值是該元素的引用。其與傳遞給句柄的 event 參數的 currentTarget 屬性的值一樣,而 target 是直接接受事件的子元素。

scrollIntoView() 使 div 底部滾動到視窗。

使用 const 的對象和數組的內容是可以被修改的，但數據結構不可變。

在 webpack 里，所有的文件都是模塊。loader 的作用就是把文件轉換成 webpack 可以識別的模塊。

關于事件循環，執行下一個 task 之前總會清空 microtask。

npm 新舊版本覆蓋可能會造成迷之問題，這個時候可以試試 node_module 整個刪掉重裝。

*、/ 和 - 操作符都是數字運算專用的。當這些運算符與字符串一起使用時，會強制轉換字符串為數字類型的值。

document.title 可以直接修改當前 html 的標題。

利用對象淺拷貝修改對象，指向同一對象的兩個變量修改對象的效果一樣。

腦洞題：1 和 2 只用一次的情況下怎么得到 4 答案：1<<2。

連等賦值從右到左。

compositionstart 事件觸發于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。

void 0（void后面加任何東西）用于生成一個絕對的 undefined（不會被重定義），但跟函數會有副作用

注意 localStorage 保存的只能是字符串，所以是沒有 null 的。

坑一個

typeof [] === "object" // true
typeof null === "object" // true

import 同步，require異步（待補充）

new() 做了些什么？

var obj = new Base();
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

stage 0 到 4 的含義：

stage 0 is "i"ve got a crazy idea",    
stage 1 is "this idea might not be stupid",    
stage 2 is "let"s use polyfills and transpilers to play with it",    
stage 3 is "let"s let browsers implement it and see how it goes",    
stage 4 is "now it"s javascript".

Object.getOwnPropertyNames(obj).length === 0 判斷 obj 是不是空對象。

getBoundingClientRect() 用于獲取元素寬高以及距離頁面邊框距離，十分方便。

&& 的使用場景：左邊為真繼續執行右邊，如 isDog && bark()。

|| 的使用場景：左邊為假繼續執行右邊，如 let i = value || defalutValue。

v-model 會自動 bind 一個值，其變量名為 value。

多個特性的元素應該分多行撰寫，每個特性一行。以下為 vscode 里 vetur 的設置：

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force" 
    }
  }

組件 destroy 時觸發自定義指令的 unbind，destory 的時機：diff 之后的 patch,如 v-if，v-for（key不同時，先銷毀原來的，再掛載新的（推測））

自定義組件 v-model watch 自動匹配（存疑

組件的 data 屬性要用函數返回的原因：創建實例時如果 data 是一個對象的話，所有實例都會引用同一個對象，而對象返回不會有此問題。在瀏覽器中可以這么做是因為根實例只有一個。

.vue 文件中使用 /deep/ 覆蓋子組件 css

從 commit 關閉 issues 的方法：commit 信息寫 Fixes #33，其他關鍵字還有 close closes closed fix fixes fixed resolve resolves resolved

git reset --soft HEAD^ 回退一次 commit

div 的默認寬度是父元素寬的 100%

逐幀動畫 animation: animate-name 3s steps(每次循環的幀數) infinite;

@keyframes animate-name{
    from{
    
        background-position: 0 0; 
    }
    to{
    
        background-position: -1540px 0 ;
    }
}

"Break out" of a parent"s containing width to take the full screen of a page w/this nice utility class:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

行內元素與下一個元素中間有空格（正常排版）,會引起一些詭異的縫隙，常見的例如元素之間有間隔，或看起來空了一行（像加了padding）

pre 標簽設置自動換行 white-space: pre-wrap;

隱藏一個元素，同時讓這個元素的寬度可獲取：設置 overflow: hidden 可以根據元素高度裁剪視區，設置 height: 0; overflow: hidden 雖然文檔流中占用了位置，由于高度為 0，最終表現特征達到了我們期望的 display: none。此時該元素 clientHeight、offsetHeight 為 0，但是 scrollHeight 是有值的。scrollHeight 是一個元素沒有滾動條時的所有內容高度,當一個元素沒有滾動條時 scrollHeight === offsetHeight。

當 Render Tree 中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為回流。

當頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素并重新繪制它，這個過程稱為重繪。

回流必將引起重繪，重繪不一定會引起回流。

移動端優化常用 CSS 屬性：

user-select: none; // 禁止文字被選中
outline:none; // 去除點擊外邊框,點擊無輪廓
-webkit-touch-callout: none; // 長按鏈接不彈出菜單
-webkit-tap-highlight-color: rgba(0,0,0,0); // 去除點擊高亮

@keyframes 的屬性要前后對應，否則不形成動畫

img 元素圖像自適應居中，與 background-size 效果一樣

object-fit: cover; 

標簽千萬記得寫寬高，不然會花式塌陷

flex-grow 所在元素如果未定寬度的話，寬度會被子元素撐開

一個英文單詞默認不換行，無論多長，所以要設置 word break

多行文字居中

.mulit_line{ 
    border:1px dashed #cccccc; 
    padding-left:5px;
}
.mulit_line span{ 
    display:inline-block; 
    line-height:14px; 
    vertical-align:middle;
}

safari 中控制慣性滾動 -webkit-overflow-scroll

滾動條樣式可能使滾動條強制顯示（未確定）

flex 布局不換行加 flex-shrink: 0; 實現 div 不壓縮無限并排，可以用于 swiper 等場景。

巧用貓頭鷹選擇器 +

float 自帶 display: inline-block

鼠標禁用 .disabled { pointer-events: none; }

注意 :last-child 與 :last-of-type 的區別

::after 表示法是在 CSS3 中引入的，:: 符號是用來區分偽類和偽元素的。支持CSS3的瀏覽器同時也都支持 CSS2 中引入的表示法 :after。

父元素如果存在 transform 屬性，子元素的 position: fixed 屬性無效

less 中的 calc 問題：height: calc(~"100% - 50px");

vh 在部分瀏覽器中包含地址欄部分，小心使用。

alt + shift + 鼠標點擊 縱向選擇

vetur 分號問題: 安裝 prettier，然后配置 "prettier.singleQuote":true,"prettier.semi": false

可以使用插件 document this 方便寫注釋

html tag 屬性分行 wrap_attributes:force

選定變量后按 F12 找到定義位置

魔法隧道用 webpack 代理會 502

在組件化編程中，悼念被同名組件浪費了幾個鐘的 debug 時間[蠟燭]

局域網連不通的話，先試試，開共享，關閉防火墻

局域網連不通的話，還可以試試，在 webpack.config.js 文件的 devServer 里加上host:"0.0.0.0"。

iOS 的回彈效果，動的是 body 部分，html 是不動的

學習一個語言之前先看規范

safari 的 formdata 只支持 append，其他方法需要 polyfill

rc 的意思是 run commands

導航欄高度 88px，標簽欄高度 98px（iphone5和6常用）

關于 HTTP 304 Not Modified，簡單來說，請求內容沒有發生變化的時候，根據設置，服務器可能直接取緩存返回