原创 高級之路篇十八：setTimeout、Promise、async、await
setTimeout setTimeout函數用來指定某個函數或某段代碼，在多少毫秒之後執行。它返回一個整數，表示定時器的編號，以後可以用來取消這個定時器。 var timerId = setTimeout(func|code, del
2019-05-11 09:24:01
1
原创 高級之路篇十七：javascript異步機制
傳送門： 徹底弄懂 JavaScript 執行機制、javascript執行機制 javascript是一門單線程的語言，本身不可異步。但是js的宿主（比如瀏覽器、node）卻是多線程的。宿主環境通過某種方式（事件驅動，下文會講）使得
2019-05-11 09:24:01
原创 高級之路篇十六：web存儲模仿微信小程序的緩存api
模仿微信小程序數據緩存的api，對h5本地存儲的封裝，支持sessionStorage與localStorage function Storage(){ this.getDataType = function(data){
2019-05-10 08:23:37
2
原创 高級之路篇十五：ES6之箭頭函數
MDN定義：箭頭函數表達式的語法比函數表達式更簡潔，並且沒有自己的this，arguments，super或 new.target。這些函數表達式更適用於那些本來需要匿名函數的地方，並且它們不能用作構造函數。 與普通函數的區別： 1、表面
2019-05-09 16:53:21
原创 高級之路篇十四：Ajax
function Ajax(){ var xmlHttp = null; var createXmlHttp = function(){ if(window.XMLHttpRequest) {
2019-05-07 16:55:19
原创 高級之路篇十二：全面解析web安全及防禦方法
web安全常見的8大板塊： 老生常談的XSS跨站腳本攻擊 警惕iframe帶來的風險 別被點擊劫持了 錯誤的內容推斷 防火防盜防豬隊友：不安全的第三方依賴包 用了HTTPS也可能掉坑裏 本地存儲數據泄露 缺失靜態資源完整性校驗 X
2019-05-01 00:52:19
3
原创 高級之路篇十三：構造函數、原型、原型鏈以及如何實現繼承
構造函數，原型，實例 每創建一個函數，該函數就會自動帶有一個 prototype 屬性。該屬性是個指針，指向了一個對象，我們稱之爲 原型對象。 三者之間的關係：每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都
2019-05-01 00:52:19
原创 高級之路篇十一：前端看http協議以及http協議上能做的事情
http協議其實就是超文本傳輸協議。 通信流程： 用戶輸入url地址，發送一個request ----- > 從離自己最近的ip地址開始向外尋找（這就是外國網站比較滿的原因之一），找到服務器 ------> 服務器處理完成後reques
2019-04-29 13:43:27
1
原创 高級之路篇十：高性能動畫
前端領域，時常會與動畫打交道，現盤點一下囉！ 1、@keyframes，需要注意的是需要兼容處理，優點在於能夠創建循環動畫。 animation: name duration timing-function | delay | it
2019-04-28 09:49:14
原创 高級之路篇七：webpack打包性能優化
1、只加載與首屏相關的資源文件。如在vue或react框架中採用路由懶加載、按需加載的方式，減少首頁需要載入的資源。 2、延遲加載或按需加載。script標籤上加上async、defer async： 1）使得
2019-04-27 09:56:20
原创 高級之路篇五：瀏覽器之通信
先說下，時下兼容性較好的，需求量較大的同瀏覽器同源打開的兩個不同tab標籤頁的通信： 1、window.postMessage 適用情形：A頁面中通過JavaScript的window.open打開B頁面，或者B頁面通過iframe嵌入至
2019-04-26 09:50:04
原创 高級之路篇六：Object.defineproperty、Proxy與Reflect
1、Object.defineproperty 屬於es5範疇。該方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。 Object.defineProperty(obj, prop, des
2019-04-26 09:50:04
原创 高級之路篇二：高性能css
前言：能被瀏覽器快速解析和匹配的css選擇器，我認爲就是高效的選擇器。就是優美的樣式文件。 一些原則： 1、避免使用通配符 2、避免使用標籤選擇器和單個屬性選擇器作爲關鍵選擇器 3、不要在id選擇器前加標籤名 4、儘量不要在選擇符定義過多
2019-04-25 09:38:29
原创 高級之路篇四：高性能html
1、避免使用Iframe 在頁面加載過程中iframe元素會阻塞父文檔onload事件的觸發，即使是空的iframe，其開銷也是非常昂貴的，鑑於iframe的高開銷，我們應儘量避免使用。尤其是對於移動設備，對於目前大部分還是
2019-04-25 09:38:29
原创 前端工程化代碼規則
編輯器： tab鍵，統一設置成4個空格 css規則篇： 1、全小寫，符合語義化 2、長名稱或詞組採用中橫線“-”鏈接 3、小於1的去掉小數點前的0 4、萬不得已不能出現id選擇器 5、僞類選擇器用一個冒號“：”，提高兼容性 6、可繼承的屬
2019-03-10 03:29:18