前端優化和其餘知識

1、前端性能優化

網頁的生成過程，大體能夠分紅五步。耗時的是第四步和第五步

• HTML代碼轉化成DOM
• CSS代碼轉化成CSSOM（CSS Object Model）
• 結合DOM和CSSOM，生成一棵渲染樹（包含每一個節點的視覺信息）
• 生成佈局（layout），即將全部渲染樹的全部節點進行平面合成
• 將佈局繪製（paint）在屏幕上

重排和重繪會不斷觸發，這是不可避免的。可是，它們很是耗費資源，是致使網頁性能低下的根本緣由。提升網頁性能，就是要下降"重排"和"重繪"的頻率和成本，儘可能少觸發從新渲染。

• 減小HTTP請求
• 使用CDN
• 添加Expires頭
• 壓縮組件
• 將樣式表放在頭部
• 將腳本放在底部
• 避免CSS表達式
• 使用外部的JavaScript和CSS
• 減小DNS查找
• 精簡JavaScript
• 避免重定向
• 刪除重複腳本

提升性能的九個技巧

第一條，DOM 的多個讀操做（或多個寫操做），應該放在一塊兒。不要兩個讀操做之間，加入一個寫操做。

第二條，若是某個樣式是經過重排獲得的，那麼最好緩存結果。避免下一次用到的時候，瀏覽器又要重排。

第三條，不要一條條地改變樣式，而要經過改變class，或者csstext屬性，一次性地改變樣式。

第四條，儘可能使用離線DOM，而不是真實的網面DOM，來改變元素樣式。好比，操做Document Fragment對象，完成後再把這個對象加入DOM。再好比，使用 cloneNode() 方法，在克隆的節點上進行操做，而後再用克隆的節點替換原始節點。

第五條，先將元素設爲display: none（須要1次重排和重繪），而後對這個節點進行100次操做，最後再恢復顯示（須要1次重排和重繪）。這樣一來，你就用兩次從新渲染，取代了可能高達100次的從新渲染。

第六條，position屬性爲absolute或fixed的元素，重排的開銷會比較小，由於不用考慮它對其餘元素的影響。

第七條，只在必要的時候，纔將元素的display屬性爲可見，由於不可見的元素不影響重排和重繪。另外，visibility : hidden的元素只對重繪有影響，不影響重排。

第八條，使用虛擬DOM的腳本庫，好比React等。

第九條，使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個方法調節從新渲染。

1. 頁面DOM節點太多，會出現什麼問題？如何優化？

卡頓問題

本部分參考連接：https://blog.csdn.net/u013929284/article/details/56483035

2. 如何作性能監測

Chrome瀏覽器開發者工具的Timeline面板，是查看"刷新率"的最佳工具。左上角有一個灰色的圓點，這是錄製按鈕，按下它會變成紅色。而後，在網頁上進行一些操做，再按一次按鈕完成錄製。

Timeline面板提供兩種查看方式：橫條的是"事件模式"（Event Mode），顯示從新渲染的各類事件所耗費的時間；豎條的是"幀模式"（Frame Mode），顯示每一幀的時間耗費在哪裏。

注：chrome57以後的版本timeline面板改成了performance面板

先看"事件模式"，你能夠從中判斷，性能問題發生在哪一個環節，是JavaScript的執行，仍是渲染？

不一樣的顏色表示不一樣的事件。

• 藍色：網絡通訊和HTML解析
• 黃色：JavaScript執行
• 紫色：樣式計算和佈局，即重排
• 綠色：重繪

哪一種色塊比較多，就說明性能耗費在那裏。色塊越長，問題越大。

window.requestAnimationFrame()方法。它能夠將某些代碼放到下一次從新渲染時執行。

咱們可使用window.requestAnimationFrame()，讓讀操做和寫操做分離，把全部的寫操做放到下一次從新渲染。

function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  window.requestAnimationFrame(function () {
    element.style.height = (currentHeight * 2) + 'px';
  });
}
elements.forEach(doubleHeight);

頁面滾動事件（scroll）的監聽函數，就很適合用 window.requestAnimationFrame() ，推遲到下一次從新渲染。

$(window).on('scroll', function() {
   window.requestAnimationFrame(scrollHandler);
});

動畫是最適用的場景

3. SEO和語義化

SEO（Search Engine Optimization）翻譯爲搜索引擎優化。seo是專門利用搜索引擎的搜索規則來提升目前網站在有關搜索引擎內的天然排名的方式。

搜索引擎看網頁主要有三大標籤最爲重要：

• title標籤
• keywords 標籤 
• description標籤

3.1 網站頁面優化

• 主要優化網站的界面，佈局清晰合理，導航條醒目實用，不要使用大面積廣告佔用頁面。
• 代碼標籤優化，百度SEO優化，製做網站地圖。

3.2 內容優化

• SEO優化重點在於長尾關鍵詞，也就是內容頁的優化。一般講的28法則決定了關鍵詞的優化主次。
• 不一樣頁面需設置各異的標題（title），描述(description)以及關鍵字(keyword)。
• 標題title的定位：首頁有標題與描述，欄目頁有標題與描述，內容頁有標題，同時網站中的多個頁面標題不要相同。內容主體圖文結合，且給每一張圖片都添加alt屬性，SEO排名，圖片周邊也要有相關關鍵詞作補充。內容頁標題設置：內容頁標題名稱 – 網站名稱。內容頁標題中有須要獲取排名的關鍵字的，內容中須同時出現。
• 網站需保持有規律的更新和發佈內容，不要發佈雜亂無章的信息，由於站內原創文章標題的價值很是高。

3.3 內部連接優化

• 針對網站內全部的連接進行路徑優化，SEO網站排名，儘可能使用行間文字型連接，不要出現死鏈。

3.4 外部連接操做

 

導航是一個網站不可缺乏的部分，網站導航通常分爲主導航、副導航和分類導航。導航通常出如今網站頭部，或者網站底部，甚至也能夠在內容部分，主要是爲了方便小蜘蛛的爬取和用戶的快速定位所需板塊。以sf爲例，從SEO的角度講，導航應儘可能以文字爲主，而最好不要採起圖片，若要採用圖片的話，也應在圖片部分加上必要的title內容和alt內容。

優化能夠看看這個，寫的很好：http://dy.163.com/v2/article/detail/EAQC3QG40518ST6L.html

本部分摘自：http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

2、微信小程序

微信小程序和h5差別：

小程序與H5APP開發有必定的類似性,然而微信團隊爲小程序提供了獨特的文件格式 WXML和WXSS分別對應H5APP的HTML和CSS。

1.Javascript的限制

出於安全考慮,經過傳入字符串來執行代碼的能力都被禁用了(new Function,eval,Generator).

因爲小程序並不是運行在瀏覽器中因此,與瀏覽器相關的對象模型(BOM)相關的API都沒有,因此document,window對象不能使用,也沒有cookie,非要傳遞cookie只能經過請求Header發送.

wx.request({
    header:{cookie:''},
    url:'',
    data:{},
    success:function(){},
    fail:function(){}
});

2.小程序用storage代替了localstorage,sessionstorage.strage對每一個程序的大小是5M,支持同步和異步.

3.打開的頁面有五個的數量限制.

4.WXML,WXSS和傳統的HTML,CSS有必定差別.

3、git

1. git狀態碼轉換圖

• Git 管理代碼，保證代碼版本迭代連續性，即：向A分支merge或者push代碼時，A分支代碼必須是當前代碼的上一個版本，否則會產生衝突。（換句話說：Git確保當前的本地的代碼爲最新）
• Git有修改就有提交，就有新的代碼版本，git管理維護的是修改。
• Git分支存儲的是代碼副本。
• push ：實際上就是將本地分支合併到遠端庫分支；pull：實際就是將遠端分支合併到本地分支。

2. 本地經常使用操做指令

2.1 建立git庫

　　git init  #在當前目錄中生成一個.git 目錄（含有.git目錄的目錄便是git倉庫）

2.2 註冊git用戶

　　用於在團隊合做開發中，代表代碼做者。

　　git config --global user.name XXX  #用戶名

　　git config --global user.email XXX   #用戶郵箱

　　git config --list  #查看用戶信息

注：加--global，全局設置。

2.3 向git庫添加修改

　　git add [path］ #會把對應目錄或文件，添加到stage狀態
　　git add .  #會把當前全部的untrack files和changed but not updated添加到stage狀態

其實是爲修改內容添加index索引。

2.4 向版本庫提交修改

　　git commit –m 「XXXX」     #提交修改,添加註釋

注：git 提示： 未有add紅色字體，未有commit綠色字體，已提交則worktree是乾淨的

2.5 查看當前代碼庫的狀態

　　git status

2.6 查看版本信息

　　實際是查看修改提交信息

　　git log

　　git log --graph  #以圖形化（節點）展現當前git庫的提交信息。

2.7 查看指定版本信息

　　git show sdjf974654dd….  #(show後面爲每次提交系統自動生成的一串哈希值)

　　git show sdji97 #通常只使用版本號的前幾個字符便可

2.8 撤銷修改

　　git reset
　　① 撤銷總體修改
　　　　git reset --hard  #回到原來編輯的地方,改動會丟失。（一樣適用於團隊對於其餘人的修改恢復）
　　　　git reset --hard sdv143kvf…... #可回到指定的版本#(hard後面爲每次提交系統自動生成的一串哈希值)
      　　 git reset [path] 會改變path指定的文件或目錄的stage狀態，到非stage狀態。
      　　 git reset 會將全部stage的文件狀態，都改變成非stage狀態。
　　② 撤銷某次修改
       　　回退1個change的寫法就是git reset HEAD^，
    　　   2個爲HEAD^^，
    　　   3個爲HEAD~3，以此類推。

2.9 向遠端庫推送修改（提交修改）

　　git push origin 分支名

2.10 暫存修改

　　git stash能夠把當前的改動（stage和unstage，但不包括untrack的文件）暫存。

　　而後經過git stash list查看。

　　並經過git stash apply從新取出來。但apply以前要保證worktree是乾淨的。

3. Git團隊開發經常使用操做指令

3.1 獲取遠端庫項目

　　git  clone/pull

3.2 團隊開發的基本流程（多分支合併一個分支）

　　git add .   #添加改動的文件
　　git commit  #（提交至本地）
　　git pull --rebase  #（將服務器項目與本地項目合併）
　　git push    #（將本地項目上傳至遠端庫）
　　注：在提交前要git pull --rebase 一下，確保當前的本地的代碼爲最新。

4. Git 分支管理

4.1 創建分支
　　git branch AAA   #創建分支AAA
4.2 分支切換
　　git checkout AAA   #從當前分支切換到AAA分支 (若AAA分支不存在，則自動新建)
4.3 將分支與主枝master合併
　　git checkout master   #（首先切換回主枝）
　　git merge AAA    #（將分支AAA與主枝合併）

注：git merge：默認狀況下，Git執行"快進式合併"（fast-farward merge），會直接將Master分支指向Develop分支。
　　使用--no-ff參數後，會執行正常合併，在Master分支上生成一個新節點。爲了保證版本演進的清晰（保持提交曲線爲直線），建議採用這種方法。

4.4 當前分支查看
　　git branch    #默認有master（也稱爲主枝）
　　git branch -r  #查看遠端庫分支
　　git branch –a  #查看當前全部分支（包括本地分支和遠端庫分支）

4.5 刪除分支
　　git branch –d  AAA   #刪除分支AAA

4.6 切下遠端庫A分支到本地庫A分支

　　git checkout -b  A origin/A  （若本地A分支不存在，則自動新建）

注：上面只是一些基本的操做命令，更多的命令可經過幫助文檔查詢。
         幫助文檔的使用：man git- <需查詢的指令>      #（git後面有「-」）　如commit的查詢爲  man git-commit

5. 本地代碼上傳Github

• Gtthub上創建遠端倉庫，複製下載連接。
• 本地指定目錄下，Gitbash粘貼遠端倉庫下載連接拉取遠端倉庫代碼。
• 複製本地須要提交的代碼到遠端倉庫目錄。
• Git add、commit、push 提交本地代碼至Github遠端倉庫。

本部份內容摘自：http://www.javashuo.com/article/p-oujyswzl-u.html

4、移動端

1. 自適應

本部分參考連接：http://www.javashuo.com/article/p-mbpsdquf-n.html

2. pwa

PWA（Progressive Web App）, 即漸進式web應用。PWA本質上是web應用，目的是經過多項新技術，在安全、性能、體驗等方面給用戶原生應用的體驗。並且無需像原生應用那樣繁瑣的下載、安裝、升級等操做。這裏解釋下概念中的「漸進式」，意思是這個web應用還在不斷地進步中。由於目前而言，PWA尚未成熟到一蹴而就的程度，想在安全、性能、體驗上達到原生應用的效果仍是有不少的提高空間的。一方面是構建PWA的成本問題，另外一方面是目前各大瀏覽器、安卓和IOS系統對於PWA的支持和兼容性還有待提升。

Service Worker

Service Worker是PWA的核心技術，它可以爲web應用提供離線緩存功能，固然不只如此，下面列舉了一些Service Worker的特性：

• 基於HTTPS 環境，這是構建PWA的硬性前提。（LAMP環境網站升級HTTPS解決方案）

• 是一個獨立的 worker 線程，獨立於當前網頁進程，有本身獨立的 worker context

• 可攔截HTTP請求和響應，可緩存文件，緩存的文件能夠在網絡離線狀態時取到

• 能向客戶端推送消息

• 不能直接操做 DOM

• 異步實現，內部大都是經過 Promise 實現

3. 移動端手勢

本部分參考連接：https://www.jianshu.com/p/0754d5daa27e

5、附加

1. 無限滾動方案

• 首頁直接從服務器獲取數據，將此數據進行緩存。
• 而後每次滾動頁面，滾動到須要加載數據的臨界點時，直接從緩存中提取下一頁或者上一頁的數據，加載到頁面數據中。

優化--預加載

採用一種檢測手段，檢測用戶會不會繼續往下看，若是會，就進行預加載，沒必要等到用戶翻到最底部

本部分參考連接：https://www.jianshu.com/p/3125ae249058

優化--圖片懶加載

圖片進入用戶視野纔會進行加載，而不是在dom樹一構建好就進行加載

本部分參考連接：https://www.jianshu.com/p/d707565e5fa1

2. 如何處理兼容性問題

本部分參考連接：http://www.javashuo.com/article/p-qscbdels-db.html

3. ES6 class與ES5 function區別及聯繫

關於構造器

• 在function定義的構造函數中，其prototype.constructor屬性指向構造器自身 
• 在class定義的類中，constructor其實也至關於定義在prototype屬性上

重複定義

• function會覆蓋以前定義的方法
• class會報錯

原型或者類中方法的枚舉

• class中定義的方法不可用Object.keys(Point.prototype)枚舉到
• function構造器原型方法可被Object.keys(Point.prototype)枚舉到，除過constructor
• 全部原型方法屬性均可用Object.getOwnPropertyNames(Point.prototype)訪問到

均可經過實例的__proto__屬性向原型添加方法

• 推薦使用Object.getPrototypeOf()獲取實例原型後再添加方法

class沒有變量提高
class定義的類沒有私有方法和私有屬性

class靜態方法與靜態屬性

• class定義的靜態方法前加static關鍵字
• 只能經過類名調用
• 不能經過實例調用
• 可與實例方法重名
• 靜態方法中的this指向類而非實例
• 靜態方法可被繼承
• 在子類中可經過super方法調用父類的靜態方法
• class內部沒有靜態屬性，只能在外面經過類名定義。

4. vue怎麼監聽數組

普通的watch

data() {
  return {
    frontPoints: 0
  }
},
watch: {
  frontPoints(newValue, oldValue) {
    console.log(newValue)
  }
}

數組的watch

data() {
  return {
    winChips: new Array(11).fill(0)
  }
},
watch: {
　　winChips: {
　　　　handler(newValue, oldValue) {
　　　　　　for (let i = 0; i < newValue.length; i++) {
　　　　　　　　if (oldValue[i] != newValue[i]) {
　　　　　　　　　　console.log(newValue)
　　　　　　　　}
　　　　　　}
　　　　},
　　　　deep: true
　　}
}

對象的watch

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}
  }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

對象的具體屬性

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}
  }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

5. 寫過webpack loader嗎

loader就是一個node模塊，它輸出了一個函數。當某種資源須要用這個loader轉換時，這個函數會被調用。而且，這個函數能夠經過提供給它的this上下文訪問Loader API。

module.exports = function(src) {
  //src是原文件內容（abcde），下面對內容進行處理，這裏是反轉
  var result = src.split('').reverse().join(''); //edcba
  //返回JavaScript源碼，必須是String或者Buffer
  return `module.exports = '${result}'`;
}

6. 微信網頁版登陸機制思考

本部分參考連接：https://www.jianshu.com/p/cc763dd2914e