前端基礎

這一次，完全弄懂 JavaScript 執行機制

本文的目的就是要保證你完全弄懂javascript的執行機制，若是讀完本文還不懂，能夠揍我。 不論你是javascript新手仍是老鳥，不管是面試求職，仍是平常開發工做，咱們常常會遇到這樣的狀況：給定的幾行代碼，咱們須要知道其輸出內容和順序。由於javascript是一門單線程…

瀏覽器的渲染：過程與原理

內容說明本文不是關於瀏覽器渲染的底層原理或前端優化具體細節的講解，而是關於瀏覽器對頁面的渲染——這一過程的描述及其背後原理的解釋。這是由於前端優化是一個很是龐大且零散的知識集合，一篇文章若是要寫優化的具體方法恐怕只能作一些有限的列舉。然而…

淺談前端線上部署與運維

說到前端部署，可能大多數前端工程師在工做中都是使用的公司現成的部署系統，與SRE對接、一塊兒完成前端的部署操做。若是我如今給你一臺新註冊的雲主機，那麼你應該怎麼作才能把一個前端工程部署到一臺雲主機上，成爲一個能夠訪問的網頁呢？今天咱們就來聊聊前端的部署~ 首先，一個前端工程要變成…

給前端同窗的最後一份CDN祕籍

每位工程師都應該瞭解的CDN

前端須要瞭解的 SSO 與 CAS 知識

無論是什麼公司，只要產品數量大於一個，那麼單點登陸勢必是繞不過去的一個問題。做爲前端程序員，咱們對其雖然接觸很少，但適當的瞭解仍是必要的。本文就來談談單點登陸相關的問題。 瞭解 SSO，最好具有如下知識。固然，若是不是特別熟，也不影響閱讀。 SSO 是英文 Single Sig…

JavaScrip同步、異步、回調執行順序之經典閉包setTimeout分析

同步，異步，回調，咱們傻傻分不清楚，
有一天，你找到公司剛來的程序員小T，跟他說：「咱們要加個需求，你放下手裏的事情優先支持，我會一直等你作完再離開」。小T微笑着答應了，眼角卻滑過一絲不易覺察的殺意。
世界上的全部事情大體能夠分爲同步去作和異步去作兩種。你打電話去訂酒店，電話另…

30分鐘，讓你完全明白Promise原理

前一陣子記錄了promise的一些常規用法，這篇文章再深刻一個層次，來分析分析promise的這種規則機制是如何實現的。ps:本文適合已經對promise的用法有所瞭解的人閱讀,若是對其用法還不是太瞭解，能夠移步個人上一篇博文。 爲了讓你們更容易理解，咱們從一個場景開始講解，讓…

TCP的三次握手四次揮手

相對於SOCKET開發者,TCP建立過程和連接折除過程是由TCP/IP協議棧自動建立的.所以開發者並不須要控制這個過程.可是對於理解TCP底層運做機制,至關有幫助. 所以在這裏詳細解釋一下這兩個過程。 TCP/IP協議的詳細信息參看《TCP/IP協議詳解》三卷本。下面是TCP報…

原生 js 實現前端路由

最近一直在研究先後端分離，ajax 能夠很好的解決先後端分離的問題，可是又存在着瀏覽器沒法前進後退，這個問題比較尷尬。可是採用前端路由的方式能夠很好的解決這個問題。這篇文章主要是介紹了前端路由的兩種實現手段，並用原生的 Js 對其分別進行了實現。

談談關於前端的緩存的問題

咱們都知道對頁面進行緩存可以有利於減小請求發送，從而達到對頁面的優化。不過在我前端工做的生涯中一直覺得前端就是寫寫頁面，寫寫交互，就已經很了不得，這種沒有志向的想法發致使我往後的工做一直處於瓶頸。作人嘛總要有夢想嘛，否則跟一條鹹魚有什麼區別。最近我一直在關於前端優化的問題，原來…

把cookie聊清楚

什麼是有效期，就是圖中的Expires屬性，通常瀏覽器的cookie都是默認儲存的，當關閉瀏覽器結束這個會話的時候，這個cookie也就會被刪除，這就是上圖中的——session(會話儲存)。 Max-Age，是以秒爲單位的，Max-Age爲正數時，cookie會在Max-Ag…

Promise 必知必會（十道題）

Promise 想必你們都十分熟悉，想一想就那麼幾個 api，但是你真的瞭解 Promise 嗎？本文根據 Promise 的一些知識點總結了十道題，看看你能作對幾道。 如下 promise 均指代 Promise 實例，環境是 Node.js。 解釋：Promise 構造函數是…

從項目談起，爲什麼要用async / await 替代Promise？

async / await 替代Promise的幾大理由

[[譯]一個100行內的現代js路由](https://juejin.im/entry/5a051...

(這個js路由如今被放項目Navigo中。這裏還有一篇你可能會感興趣的文章Deep dive into client-side routing) 現今處處都是流行的單頁面應用（SPA）。這樣的應用須要一個堅實的路由機制。像Emberjs這樣的框架確實是在創建在一個路由類上的。我…

還擔憂面試官問閉包？

爲何咱們須要理解而且掌握閉包，且不說大道理，就問你要不要成爲JavaScript高手？不要？那你要不要面試找工做嘛。。。 再者，對於任何一個前端er或者JavaScript開發者來講，理解閉包能夠看作是另外一種意義上的重生。閉包是純函數編程語言的一個特性，由於他大大簡化複雜的操…

[[翻譯] Modern Javascript Cheatsheet 中文版](https://juejin.im/entry/59c7c...

本文檔整理了各種現代化 JavaScript 開發過程中經常使用到的腳本。
該份指南的目標並不是放在幫助初學者從零基礎到入門，而是為了幫助那些因為 Javascript 新式語法導致可能很難熟悉現代函數庫使用方式 (以 React 作為舉例) 的開發人員。

精讀《JS 中的內存管理》

我爲何要選這篇文章呢？
sessionstack最近接連發了好幾篇文章, 深刻探討JS, 以及 JS 中一些內部原理. 文中也講到了, 伴隨深刻了解 JS 中的一些工做原理, 纔有可能寫出更好的代碼和程序. 而 JS 中的內存管理, 個人感受就像 JS 中的一門副科, 咱們…

深刻貫徹閉包思想，全面理解JS閉包造成過程

寫這篇文章以前，我對閉包的概念及原理模糊不清，一直以來都是以通俗的外層函數包裹內層....來欺騙本身。並無說這種說法的對與錯，我只是不想擁有從衆心理或者也能夠說若是咱們說出更好更低層的東西，逼格會提高好幾個檔次。。。
談起閉包，它但是JavaScript兩個核心技術之一(異步…

基於 Docker 打造前端持續集成開發環境

本文將以一個標準的 Vue 項目爲例，徹底拋棄傳統的前端項目開發部署方式，基於 Docker 容器技術打造一個精簡的前端持續集成的開發環境。 1. CI（持續集成）：阮一峯老師的關於 CI 的介紹 2. Docker： Docker 快速入門 1. 代碼無需在本地構建 2. 只…

解鎖Charles的姿式

Charles，做爲mac開發的好基友，不知道你們是否對它的使用姿式瞭如指掌。相信不少童鞋只是熟悉幾種簡單的功能，今天爲你們解鎖幾種高級姿式......但願可以幫到你們。 Charles是個啥，相信你們都會知道，若是真有不知道的，請百度之... ... 還有不少場景就不一一介紹…

【譯】JavaScript 如何工做：對引擎、運行時、調用堆棧的概述

PS: 很久沒寫東西了，最近一直在準備寫一個本身的博客，最後一些技術方向已經敲定了，又能夠開心的學習了，node系列後續再開始。 隨着JavaScript愈來愈流行，愈來愈多的團隊普遍的把JavaScript應用到前端、後臺、hybrid 應用、嵌入式等等領域。 這篇文章旨在深…

你還要我怎樣的JS(2)

當你熟悉了上一篇提到的內存空間以後。咱們再來接着梳理咱們的JS軸線。JS比如是易筋經，學透徹了這門功夫，在茫茫快速迭代的前端海洋就有了本源核心，剩下的就是踩坑撿祕籍，打怪娶蕭薰兒了。
內存空間是入門心法，教會咱們怎麼運用自身的丹田來存儲氣息，下一步就應該是學會怎麼將氣息順着經脈…

一篇文章帶你熟悉 TCP/IP 協議（網絡協議篇二）

一樣的，本文篇幅也比較長，先來一張思惟導圖，帶你們過一遍。 不難看出，TCP/IP 與 OSI 在分層模塊上稍有區別。OSI 參考模型注重「通訊協議必要的功能是什麼」，而 TCP/IP 則更強調「在計算機上實現協議應該開發哪一種程序」。 1. TCP/IP 的具體含義 從字面意義…

程序員都該懂點 HTTP

HTTP 全稱是 HyperText Transfer Protocal ，即：超文本傳輸協議，從 1990 年開始就在 WWW 上普遍應用，是現今在 WWW 上應用最多的協議，HTTP 是應用層協議，當你上網瀏覽網頁的時候，瀏覽器和 web 服務器之間就會經過 HTTP 在 …

Q：你瞭解異步編程、進程、單線程、多線程嗎？

同步：一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去。 異步：進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。 進程：狹…

媽媽不再用擔憂我不會webpack了

webpack前端工程中扮演的角色愈來愈重要，它也是前端工程化很重要的一環。本文將和你們一塊兒按照項目流程學習使用wbepack，媽媽不再用擔憂我不會使用webpack，哪裏不會看哪裏。這是一個由淺入深的文章。 如今vue、react等腳手架都會自動將開發環境使用的webpac…

【JS】裝飾器讓你的代碼更簡潔

當咱們在使用JavaScript時，有時須要用到setTimeout函數來強制代碼延遲運行。好比： 我很討厭這樣寫代碼，我但願它變得簡潔，因此咱們能夠把setTimeout函數抽象成裝飾器。 這裏咱們須要傳入一個數值做爲參數（默認爲0），因此咱們須要使用裝飾器工廠模式。 接下來…

第一本 PWA 中文書

此書獻給廣大 PWA 愛好者 帶你領略 PWA 的強大與優雅
僅供你們學習使用 請勿用於任何商業用途
全書一共12章 目前已經翻譯了前6章 持續更新中 但願你們多多關注

來聊一聊瀏覽器渲染

對於web前端開發者，瀏覽器再熟悉不過了。咱們可能都知道瀏覽器含有一個渲染引擎，瀏覽器會根據 HTML文件來進行解析與渲染，最終再將頁面呈如今用戶面前。可是其具體的渲染原理和流程估計也有不少同窗不清楚。然而前端開發者頗有必要了解瀏覽器的工做工做機制。

高效使用 JavaScript 閉包

在 Node.js 中，普遍採用不一樣形式的閉包來支持 Node 的異步和事件驅動編程模型。經過很好地理解閉包，您能夠確保所開發應用程序的功能正確性、穩定性和可伸縮性。

前端本地文件操做與上傳

第一種是最經常使用的手段，一般還會自定義一個按鈕，而後蓋在它上面，由於type="file"的input很差改變樣式。以下代碼寫一個選擇控件，並放在form裏面： 能夠看到文件的路徑是一個假的路徑，也就是說在瀏覽器沒法獲取到文件的真實存放位置。同時FormData打印出來是一個空的…

HTML5 進階系列：文件上傳下載

前言 HTML5 中提供的文件API在前端中有着豐富的應用，上傳、下載、讀取內容等在平常的交互中很常見。並且在各個瀏覽器的兼容也比較好，包括移動端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操做文件的功能，先要熟悉每一個API。 FileList 對象和 file …

玩轉異步 JS ：async/await 簡明教程（附視頻下載）

在軟件開發領域，簡潔的代碼 => 容易閱讀的代碼 => 容易維護的代碼，而 ES2017 中的 async/await 特性能讓咱們編寫出相比回調地獄和 Promise 鏈式調用更直觀、更容易理解的代碼，await 關鍵字接收一個 Promise，等待代碼執行，直到 Promi…

繼microtask後，再談event loop

關於event loop的詳細理解

理解 Web 路由 - syaning

在 Web 開發過程當中，常常會遇到『路由』的概念。那麼，到底什麼是路由？簡單來講，路由就是 URL 到函數的映射。

Javascript異步編程模型進化

最近在看js的異步模型演化, 發現了一篇很好的文章, 忍不住分享

Promise 異步流程控制

然而能所有答上的不多，可以給出一個回調 + 計數版本的，我都以爲合格了。那麼接下來就一塊兒來學習總結一下基於 Promise 來處理異步的三種方法。 最簡單的，就是將異步一個個來處理，轉爲一個相似同步的方式來處理。 先來簡單的實現一個單個 Image 來加載的 thenable …

前端路由一探

比較全面的闡述了前端路由的特色和實現方式，以及和後端路由的區別

HTTP 緩存機制一二三

Web 緩存大體能夠分爲：數據庫緩存、服務器端緩存（代理服務器緩存、CDN 緩存）、瀏覽器緩存。瀏覽器緩存也包含不少內容： HTTP 緩存、indexDB、cookie、localstorage 等等。這裏咱們只討論 HTTP 緩存相關內容。 在具體瞭解 HTTP 緩存以前先來…