摘要： 性能優(yōu)化是前端開發(fā)無法避免的點，給客戶帶去良好的訪問體驗也是開發(fā)人員必須關(guān)注的問題。 前端性能優(yōu)化大體分為兩個部分：代碼優(yōu)化、資源及其他優(yōu)化，本文主要記錄資源及其他優(yōu)化要怎么做。 1、CSS樣式文件在頁面頭部引入，Javascript文件在頁面尾部引入 頁面加載單線程可能會阻塞頁面的加載。 2、服務(wù) 閱讀全文

摘要： Fetch API是一個 JavaScript 接口，用于訪問和操縱 HTTP 管道的一些具體部分，例如請求和響應(yīng)。Fetch API提供了一個全局 fetch() 方法，一種簡單，合理的來跨網(wǎng)絡(luò)異步獲取資源的方式。 一個基本的 fetch 請求： fetch("http://localhost:4 閱讀全文

摘要： 有的時候，我們從后端獲取了文件數(shù)據(jù)，需要在前端組合成指定格式的文件，并下載。 組合文件，除了數(shù)據(jù)，還需要規(guī)定格式，才知道組合成什么格式的文件。 主要代碼如下： /* * responseText 后端獲取的文件數(shù)據(jù) * 這里以 pdf 格式的文件舉例，設(shè)置 type 為 pdf 文件需要的類型 * 閱讀全文

摘要： 有時組件中的數(shù)據(jù)需要與外部系統(tǒng)的數(shù)據(jù)或操作同步，React提供了Hook Effect。 Effect 會在組件渲染后運行一些代碼，以便將組件與 React 之外的某些系統(tǒng)同步，包比如瀏覽器 API、第三方小部件，以及網(wǎng)絡(luò)請求等。 如以下的video播放器的簡單加載： // 聲明 Effect im 閱讀全文

摘要： 說起前端開發(fā)，Ajax請求是繞不開的技術(shù)點。然而，程序語言更新?lián)Q代越來越快，Ajax請求的方式也是各有不同。 在使用ES5開發(fā)的時候，我們還在使用最原始的XMLHttpRequest對象： // createXHR函數(shù)，返回瀏覽器支持的異步請求對象 function createXHR() { if 閱讀全文

摘要： String 對象創(chuàng)建方法： new String() var txt1 = new String("string"); var txt2 = "string"; String 對象屬性 1、constructor ：返回對 String 對象屬性創(chuàng)建的函數(shù) 返回值：函數(shù)的引用，不是函數(shù)名： 字符串 閱讀全文

摘要： 數(shù)組的創(chuàng)建方法 1、常規(guī)方式： var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW"; 2、簡潔方式： var myCars=new Array("Saab","Volvo","BMW"); 3、字面 閱讀全文

摘要： async 從字面上看就是“異步”，它放在函數(shù)定義之前，是使該函數(shù)在調(diào)用時開一個子線程，以不影響主線程的運行。 而 await 經(jīng)常和 async 組合使用，在 async 定義的函數(shù)中來等待需要時間運行的代碼（如ajax請求、Promise對象）的運行結(jié)果，以做后續(xù)的處理。 如下面的返回Promi 閱讀全文

摘要： 在前端編程中，處理一些簡短、快速的操作，在主線程中就可以完成。 但是，在處理一些耗時比較長以至于比較明顯的事情，比如讀取一個大文件或者發(fā)出一個網(wǎng)絡(luò)請求，就需要異步編程來實現(xiàn)，以避免只用主線程時造成頁面一時無法響應(yīng)的事情。 以發(fā)送網(wǎng)絡(luò)請求為例，在以往的JavaScript中，使用多個回調(diào)函數(shù)來處理請求 閱讀全文

摘要： Canvas繪圖的實現(xiàn)： <canvas>元素負(fù)責(zé)在頁面中設(shè)定一個區(qū)域，通過JS動態(tài)地在這個區(qū)域中繪制圖形。 IE9+、Firefox1.5+、Safari2+、Opera9+、Chrome、IOS版Safari以及Android版WebKit都在一定程度上支持<canvas>元素。 1、基本用法 閱讀全文