原创 響應式圖片(自適應圖片)

在這篇文章中討論的新特性 — srcset/sizes/<picture> — 都已經被新版本的現代瀏覽器和移動瀏覽器所支 持(包括Edge,而不是IE)。 解決的問題 分辨率切換問題:小屏手機屏幕上顯示網頁,那麼沒有必要在網頁上

原创 js事件循環機制(Event Loop) 以及async/await的理解

事件循環機制 理解js的事件循環機制,能夠很大程度的幫我們更深層次的理解平時遇到的一些很疑惑的問題 簡單版本 下面來看一段代碼,想想它的結果和你的結果是否一樣 setTimeout(function() { cons

原创 瀏覽器的迴流和重繪

瀏覽器的渲染過程 從上面這個圖上,我們可以看到,瀏覽器渲染過程如下 解析HTML生成DOM樹,解析CSS生成CSSOM樹 將DOM樹和CSSOM樹結合生成渲染樹renderTree Layout(迴流): 根據生成的渲染樹,進行迴流

原创 React性能提升

瞭解react如何提升性能將有助於我們更好的編寫代碼。個人認爲react中很多的性能優化,其實都是圍繞着react的核心diff算法來展開的,通過優化,減少diff算法中一些不必要的步驟,從而來提高性能。下面是我平時開發總結出來的一些經驗。

原创 javaScript中Promise深度理解

用途 用於處理異步操作,避免地獄式回調,比如ajax請求,處理起來更加簡單方便,代碼看起來也更容易理解,便於維護。 概念 Promise 對象用於表示一個異步操作的最終狀態(完成或失敗),以及其返回的值。 Promise共有三種狀態,相應狀

原创 Front-end developmenter必看,超實用的javaScript隱士類型轉換規則記憶技巧。

javaScript類型轉換規則 javaScript的類型轉換其實一直是很多前端開發人員很迷的地方,一會兒這裏要轉換,一會兒那裏又要轉換,總之就是一個大寫的迷,因爲它隱士類型轉換的地方實在是太多了。 但其實它還是有規律可尋的,只要記憶一

原创 ajax 簡介

用途 Web的傳統模型。客戶端向服務器發送一個請求,服務器返回整個頁面,如此反覆,每次請求都會導致刷新整個頁面,用戶體驗很不好。隨着技術的迭代更新,出現了一個名叫ajax(Asynchronous javascript and xml)的