内容有點多，也請你靜下來，慢閱讀，今後多多關照。
說到web前端開發進階，必須要掌握的是HTML和css代碼的優化，前端優化很重要，這是成功你進階的道路上需要重視的知識點，面對代碼優化，首先我們要學習的就是前端命名規範，HTML代碼優化，和css代碼優化。
前端命名規範是很重要的，一直說很重要，當你用過别人的代碼進行重構時，你會知道，如果你看到一長串代碼，不了解之前的人是怎麼寫的，開局全靠猜，結局就是不斷地浪費時間。
掌握前端優化目錄的學習
前端命名規範，前端結構的組織，檔案的命名規範，在一個項目中代碼的組織結構要清晰易懂，同類型檔案可以歸類到到相同的檔案夾中，檔案命名規則需要統一且命名要有意義。這裡要有意義是指命名要通俗易懂，英文單詞可以寫縮寫，不必故步自封，寫那麼長的單詞。
命名規範在前端領域，涉及HTML，css，JavaScript，在HTML代碼所有的标簽名和屬性應該都為小寫，屬性值應該用引号括起來。元素的id和class都要按照規定命名，代碼縮進時要縮進，進行格式化，讓代碼美觀，有時可以給HTML代碼添加必要注解。
對于css命名的規範，盡量使用class選擇器進行樣式的定義，類命名時取父元素的class名作為字首，使用-符号進行連接配接。類名與樣式之間以空格進行分割。
對于JavaScript命名規範，變量名是區分大小寫，第一個字元是不允許為數字的，不允許是空格，不允許其他标簽符号，盡量使用有意義的命名，不要使用JavaScript的關鍵詞，或者是保留字。
進行前端代碼的優化，優化HTML代碼為了能夠使網站更好的搜尋，讓使用者更快速搜尋到我們的網站，寫好HTML代碼使用正确的閉合HTML标簽，進行HTML代碼層級間的合理縮進，屬性值需要使用雙引号，結構與樣式進行有效的分離，結構與行為進行有效的分離。
進行HTML語義化标簽，HTML5提供的一些新的語義化元素來明确一個web頁面的不同部分，有：
優化前端效果，可以删除多餘容器元素，讓代碼層次少，避免使用table進行頁面的布局，換成用div+css的樣式布局。
css代碼優化，在各個浏覽器中，相同元素解析的結果不同，就需要手動重置一些樣式。
去除标簽的預設樣式，如p，li，input等。 HTML5新标簽設定為display:block。 重置一些元素的樣式如超連結，字号等樣式。
css樣式選擇器的優先級
對于css樣式選擇器，優先級高的會覆寫優先級低的。
第一，id選擇器的權重為100，第二，類選擇器的權重為10，第三，标簽選擇器的權重為1。
注意，css樣式中盡量不要使用id選擇器，會降低代碼的複用性，盡量不要使用!important，會降低代碼的複用性，盡量減少子選擇器的層級。
css樣式多餘樣式去除，和結構優化
定義簡潔的css樣式規則，合并相關css樣式規則，定義簡潔的屬性值，合并相同的，删除無效的。
sprite拼合圖
css sprite，也叫 css 精靈，雪碧圖。
是一種将雪散的背景圖合并成一張大圖，再次利用css的background-position屬性進行背景的定位進而達到減少圖檔請求數量達到加快加載速度的網頁應用處理方式。
background屬性
background-color，描述規定要使用的背景顔色
background-position，描述規定背景圖檔的位置
background-size，描述規定背景圖檔的尺寸
background-repeat，描述規定如何重複背景圖像
background-origin，描述規定背景圖檔的定位區域
background-clip，描述規定背景的繪制區域
background-attachment，描述規定背景圖檔是否固定或者随着頁面的其餘部分滾動
background-image，描述規定要使用的背景圖像
background-position屬性
top，left，center，right，center等等，top表示垂直位置最頭部，bottom表示垂直位置最底部，left表示水準位置最左邊，center表示水準位置居中，right表示為水準位置最右邊。
css sprite的制作工具
css sprite制作工具，photoshop和打包工具webpack來制作。
打包工具，現在流行的很多前端打包工具都有支援css sprite的內建，如
webpack中隻要安裝webpack-spritesmith依賴，然後在配置檔案中引用依賴var SpritesmithPlugin = require('webpack-spritesmith'),最後在配置檔案中添加代碼。
代碼壓縮，打包工具
前端優化，壓縮JavaScript和css是非常重要的。目前最常用的壓縮JavaScript代碼的工具之一有UglifyJS，它會分析JavaScript代碼文法樹，了解代碼含義，進而能做到諸如去掉無效代碼，去掉日志輸出代碼，縮短變量名等優化。
在webpack中接入UglifyJS需要通過插件的形式，UgllifyJsPlugin是比較常用的插件，通過在webpack的配置檔案webpack.config.js中加入以下代碼即可。
壓縮css代碼常用的是CSSNANO，是基于PostCSS的，可以讓我們的代碼達到提升加載速度和代碼混淆的作用。
圖檔的預加載
預加載簡單來說就是将所有所需的資源提前請求加載到本地，這樣需要用到時就可以直接從緩存中取資源了。
圖檔的懶加載
首屏的加載，就是用圖檔懶加載技術，即是到可視區域再加載。
圖檔懶加載，使用jquery.lazyload.js，該js是一個基于Jquery的懶加載插件，裡面封裝了懶加載用到的方法以及實作，第二種是echo.js，它是一款非常簡單實用輕量級的圖檔延時加載插件。
JavaScript代碼優化
JavaScript代碼可維護性
什麼是代碼與結構分離呢
代碼與結構分離，就是把HTML代碼和JavaScript代碼進行分離，第一在HTML中分離JavaScript，第二，在JavaScript中分離HTML。
什麼是樣式與結構分離呢
樣式與結構分離，就是把css代碼和HTML代碼進行有效分離。
什麼是資料與代碼分離呢
資料與代碼分離，也可以認為是前後端分離的表現，後端接口隻負責傳回json格式的資料，不會傳回帶标簽甚至是帶樣式或者帶JavaScript的組合資料。
JavaScript的代碼可調式性
代碼可調式性，可以用console.log，debugger，alert，try...catch捕獲異常來進行JavaScript的調試。
console.log，即通過在JavaScript中添加console.log(msg)
msg為需要列印的資訊，可以是變量，字元串，變量類型可以是數組，對象，數字等等。
debugger關鍵字用于停止執行JavaScript，并調式函數，這個關鍵字與調式工具中設定斷點的效果是一樣的。
alert和console.log一樣，alert通過在JavaScript中添加alert(msg)，Msg為需要彈窗的資訊，值得一提的是這個彈框是強制阻塞的，隻要關閉該彈窗才能解除阻塞，是以要謹慎使用。
try...catch，用于try...catch...finally來進行異常的捕獲，try代碼塊表示可能發生異常的代碼，catch表示捕獲異常對象，finally無論是否發生異常都執行。
JavaScript dom的優化
提升檔案的加載速度，合并JavaScript代碼，盡量少用script标簽，無堵塞加載JavaScript，通過給script标簽增加defer屬性或者是async屬性來實作
動态建立script标簽來加載，JavaScript dom操作優化，dom通路和修改，都說通路dom耗性能，用循環通路也是如此，是以要減少dom的通路。
重排和重繪
用cssText改變樣式，批量修改dom。
JavaScript dom 腳本加載優化
學習前端進階層次，掌握webpack入門
modules with dependencies webpack static assets
webpack是一個module bundler子產品建構工具，由于JavaScript應用程式的複雜性不斷增加，建構工具已經成為web開發中不可或缺的一部分。
它幫助我們去打包，編譯和管理項目需要的衆多資源檔案和依賴庫。webpack支援CommoonJS,AMD和ES6子產品系統，并且相容多種JS書寫規範，可以處理子產品間的依賴關系，是以具有更強大的JS子產品化的功能，它能壓縮圖檔，對css, js 檔案進行文法檢查，壓縮，編譯打包。
建構工具沒有标準
現在開發者可以用的構造建構工具有
webpack,gulp,bowserify,npm scripts,grunt等。
缺點有，不适合web開發的初學者，對于css，圖檔，以及其他非Js資源檔案時，需要先混淆處理，文檔不夠完善，變化很大，不同版本的使用方法存在較大的差異。
安裝
全局安裝，用于全局使用指令行打封包件
建立項目檔案夾
進入項目檔案夾，打開cmd指令行視窗
基本應用
SPA是什麼，它是單頁應用程式。
single page web application，是webpack打包的典型應用，一個典型的SPA應用，主要由以下幾個部分組成。
index.html主檔案，js檔案，有多個js檔案，可以通過webpack合并打包為一個檔案，css檔案，可以多個css檔案，可以通過webpack合并打包為一個檔案。圖檔可以通過webpack壓縮優化。
建立src檔案夾，該檔案夾存放開發用的檔案，在src目錄下建立檔案。
建立dist檔案夾
該檔案存放打包後的檔案，可以先不建立，打包時可以自動建立。
打包，webpack-mode development，經過打包後，已經根據三個js依賴關系，打包合并為dist/main.js。
webpack --output檔案名，輸出檔案路徑
webpack --config檔案名，用于指定其他配置文
預設為webpack.config.js
webpack --mode模式，打包模式 production，生成模式，developement開發模式。
webpack --watch 監聽檔案變化并自動打包
webpack -p 壓縮混淆腳本
webpack -d 生成Map映射檔案
webpack --progress 顯示進度，列印出編譯進度的百分比值
webpack --color 用不同顔色标記不同的資訊
webpack --profile 顯示每一步編譯的具體時間，可幫助優化建構性能
webpack --hot 熱替換
webpack --bail 如果編譯過程出現error，立馬停止編譯
配置檔案入門
通過定義配置檔案進行複雜操作，檔案名webpack.config.js
一個配置檔案的基本結構：
entry，入口定義入口檔案，預設檔案./src/index.js
output，輸出定義出口檔案，預設檔案./dist/main.js
resolve，解析路徑映射，省略字尾名等
module，子產品定義不同loader，讓webpack能夠處理非JavaScript子產品
plugins，插件擴充webpack功能
devServer，開發伺服器用于配置webpack-dev-server選項
簡單的配置檔案
hello wrold例子：
修改webpack.json檔案
配置詳細entry和output
entry入口配置是指頁面中的入口檔案，預設入口檔案./src/index.js
output出口配置是指生成的檔案輸出到哪個地方去，./dist/main.js
path，輸出路徑，filename，輸出檔案名
module，webpack隻能打包js檔案，無法識别其他文法的檔案，如果要讓webpack打包其他檔案，首先需要讓webpack識别不同的檔案。
loader分類
<col>
分類
說明
轉換編譯
script-loader，babel-loader，ts-loader，coffee-loader
處理樣式
style-loader，css-loader，less-loader，sass-loader，postcss-loader
處理檔案
raw--loader，url-loader，file-loader
處理資料
csv-loader，xml-loader
處理模闆語言
html-loader，pug-loader，jade-loader，markdown-loader
清理和測試
mocha-loader，eslint-loader
常用loader
loader
css-loader
解析css語句
style-loader
将css-loader解析後的文本，添加<style>标簽
babel-loader
将ES6+、JSX文法轉成ES5低版本文法
url-loader
url-loader對未設定或者小于limit byte設定的圖檔以base64的格式進行轉換<br />對于大于limit byte的圖檔用file-loader進行解析
file-loader
解析項目中的url引入（包括img的src和background的url）<br />修改打包後檔案引用路徑，使之指向正确的檔案
less-loader
less編譯器
vue-loader
Vue也推出了自己的vue-loader，可以友善的打包 .vue檔案 的代碼。<br />在vue-cli（快速建構單頁應用的腳手架）中得到應用。
babel loader
babel是一個js編譯器，它是通過文法轉換器支援最新版本的JavaScript，這插件允許你使用新文法，無需等待浏覽器支援。
使用babel首先要配置.babelrc檔案，該檔案用來設定轉碼規則和插件，存放在項目的根目錄下。
在linux系統中，rc結尾的檔案通常代表運作時自動加載的檔案、配置等等。
在.babelrc配置檔案中，主要是對預設和插件進行配置。
配置項
presets
預設 對js最新的文法糖進行編譯，并不負責轉譯新增的api和全局對象。例如：let/const可以被編譯，而String.includes、Object.assign等對象新增方法并不能被編譯。<br />常用轉譯器：babel-preset-env、babel-preset-es2015（2016、2017）、babel-preset-latest等
plugins
插件 控制如何轉換代碼，babel預設隻轉換新的js文法，而不轉換新的API，比如 Set,，Maps，Symbol，Promise 等全局對象，transform-runtime 用來解決以上問題
插件可以擴充webpack的功能，Loader不能做的處理都能交給plugin來做。
resolve配置webpack如何尋找子產品對應的檔案，webpack在啟動後會從配置的入口子產品觸發，找出所有依賴的子產品，預設會采用子產品化标準裡約定号的規則去尋找。
屬性
alias
（譯：别名）通過别名将原來導入路徑映射成一個新的導入路徑
extensions
（譯：擴充）數組 導入子產品時，可以省略的檔案字尾名
其他配置
devtool
是否生成以及如何生成sourcemap
devserver
開啟一個本地開發伺服器
watch
監聽檔案變化并自動打包
watchoption
用來定制watch模式的選項
performance
打包後指令行如何展示性能提示，如果超過某個大小是警告還是報錯
webpack-dev-server
它是一個小型的web伺服器，可以自動監視項目檔案的變化，自動重新整理浏覽器，其HMR方式隻替換更新的部分，而不是重載頁面，大大提高了重新整理效率
預設值
inline
自動重新整理<br />當我們對業務代碼做了一些修改，儲存（ctrl+s）後，頁面會自動重新整理，所做的修改會直接同步到頁面上，不需要手動重新整理頁面或重新開機服務
true
hot
熱子產品替換<br /> 不用配置（通常是通過指令行 --hot 選項啟動，會自動加載webpack.HotModuleReplacementPlugin插件）
host
主機位址
open
自動打開浏覽器，可以指定浏覽器，例如：--open 'Chrome'
false
port
端口
預設8080
overlay
編譯出錯的時候，在浏覽器頁面上顯示錯誤
stats
用來控制編譯的時候shell上的輸出内容<br />stats: "errors-only" 隻列印錯誤<br /> 還有"minimal"，"normal"，"verbose"
compress
true：對所有伺服器資源采用gzip壓縮
contentBase
指定了伺服器資源的根目錄，<br />如果不寫入contentBase的值，那麼contentBase預設是項目的目錄
"./"
historyApiFallback
它使用的是HTML5 History Api，任意的跳轉或404響應可以指向 index.html 頁面
例子：
運作
npm start
運作後，webpack-dev-server将開始運作，打開浏覽器，直接輸入127.0.0.1:8080/index.html，打包後的頁面已經可以使用了
注意： index.html内無需引入main.js檔案，打包後的index.html檔案中會自動引入該檔案。 webpack-dev-server運作後，浏覽器中輸出的頁面，都是運作在記憶體中的，隻有build以後，才會在dist目錄中得到最終的結果檔案。
ES6基礎
ECMAScript和JavaScript到底是什麼關系？
ECMAScript是JavaScript語言的國際标準，JavaScript是ECMAScript的實作。ESMAScript6的簡稱為es6是JavaScript語言的下一代标準。
symbol資料類型，Symbol是一種唯一辨別符，可以用作對象的唯一屬性名，這樣就不會有人改寫或覆寫你設定的屬性值了。
Symbol作為對象屬性名
Symbol永遠不相等，建立它們的時候傳入相同值的參數，也不相等，是以，可借助此特性解決屬性名的沖突問題，也是該資料類型存在的主要用途。
Symbol 值不能與其他類型的值進行運算，可以顯式轉為字元串。
使用場景
為某個對象添加屬性，新添加屬性與原有屬性重名，新添加的屬性僅作為标記使用，不需要用周遊器周遊處理。
let與const
用var聲明的變量會造成全局污染。
let用來聲明變量，要先聲明後使用
const
const聲明一個隻讀的常量，一旦聲明，常量的值就不能改變。
特性
var
let
作用域級别
函數級
塊級
初始值
否
聲明時必須指派
變量提升
是
重複聲明
變量的解構指派
set與Map
js原有的2種資料結構，array和object；es6新增兩種資料結構，set和map
set資料結構
set類似于數組，成員的值都是唯一的，沒有重複的值。
主要用于資料的去重。
set本身就是一個構造函數，用來生成set資料結構。set執行個體時一個類數組的對象。
方法
add(value)
添加某個值，傳回：Set結構本身
delete(value）
删除某個值，傳回：bool（删除是否成功）
has(value)
表示該值是否為Set的成員 傳回：bool
clear()
清除所有成員，傳回：無
map資料結構，map也是一個資料集合，與資料類似。
它是對object的一個補充，map的key可以是任意類型，而傳統對象的key必須是字元串。
周遊object得到的結果是無序的，周遊Map得到的結果是有序的
clear
從Map中移除所有元素
delete
從Map中移除指定的元素
forEach
對Map中的每個元素執行指定操作
get
傳回Map中的指定元素
has
如果Map包含指定元素，則傳回 true
set
添加一個建立元素到Map
toString
傳回Map的字元串表示形式（序列化）
valueOf
傳回指定對象的原始值
array set map
類别
Array
Set
Map
長度
arr.length
set.size
map.size
增
arr.push(新增值)
set.add(4)
map.set('t', 1)
删
arr.splice(索引,删除數量)
set.delete(2)
map.delete('t')
改
arr.splice(索引,删除數量,[新增值])
周遊
map.set('t',2)
查
set.has(1)
map.has('t')
清空
arr = []
set.clear()
map.clear()
共同變量方法
keys()
傳回鍵名的周遊器
values()
傳回鍵值的周遊器
entries()
傳回鍵值對的周遊器
forEach()
使用回調函數周遊每個成員
箭頭函數，匿名函數
參數格式
箭頭函數中的this
函數的擴充
對象的擴充
在es6中允許向對象直接寫入變量和函數，作為對象的屬性和方法。
es6中允許使用表達式作為對象屬性，并且函數名稱定義也可以采用相同的方法。
setter和getter。
方法名稱
方法描述
Object.is()
比較兩個值是否相等
Object.assign()
用于将對象進行合并
Object.getOwnPropertyDescriptor
傳回對象屬性的描述
Object.keys()
傳回一個數組，包括對象自身的所有的可枚舉屬性
數組的擴充
copyWithin(target，start，end)
在目前數組内部，将指定位置的成員複制到其他位置（會覆寫原有成員），然後傳回目前數組。也就是說，使用這個方法，會修改目前數組。參數說明：<br />target（必需）：從該位置開始替換資料。負值:倒數。<br />start（可選）：從該位置開始讀取資料，預設:0。負值:倒數。<br /> end（可選）：到該位置前停止讀取資料，預設等于數組長度。負值:倒數。
find()
數組執行個體的find方法，用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個傳回值為true的成員，然後傳回該成員。如果沒有符合條件的成員，則傳回undefined。
findIndex()
findIndex方法的用法與find方法非常類似，傳回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則傳回-1。
fill()
fill方法使用給定值，填充一個數組,fill方法用于空數組的初始化非常友善。數組中已有的元素，會被全部抹去，如果填充的類型為對象，那麼被指派的是同一個記憶體位址的對象，而不是深拷貝對象。
includes()
該方法傳回一個布爾值，表示某個數組是否包含給定的值，與字元串的includes方法類似。
ES6進階操作
promise對象
JavaScript本身就是單線程的，是以為了解決單線程帶來的問題，在異步程式設計中，許多操作都會放在回調函數中，同步與異步的混雜，過多的回調嵌套都會讓代碼變得難以維護。
promise對象用于處理異步操作的，異步處理成功了就執行成功的操作，異步處理失敗了就捕獲錯誤或者是停止後續操作。
一個promise代表是一個任務結果，這個任務有可能完成沒完成。promise模式唯一需要的一個接口是調用then方法，它可以用來注冊當promise完成或者失敗時調用的回調函數，可以把promise對象看成一條工廠的流水線。
promise是一個類，需要New執行個體化：
then方法
then方法是promise原型上的方法，它把原來的回調寫法分離出來了。
iterator方法
Iterator周遊器是一種接口，為各種不同的資料結構提供統一的通路機制，任何資料結構隻要部署Iterator接口，就可以完成周遊操作。
array，set，map，string都是可疊代對象
它們原型中都有一個symbol.iterator方法，通過調用symbol.iterator方法來擷取預設疊代器。
generator是es6提供的一種異步程式設計解決方案。
執行函數後，傳回的是一個指向内部狀态的指針對象，yield表達式是暫停執行的标記，next方法可以恢複執行。
yield表達式在Generator中是作為一個暫停标志，當碰到yield時，函數暫停執行，等到下一次next()執行時，函數才從目前yield位置開始執行。
Class，在傳統的JavaScript中隻有對象，沒有類的概念，它是基于原型的面向對象語言，原型對象特點就是将自身的屬性共享給新對象。我們可以通過class關鍵字可以定義類。