原创 瀏覽器如何執行JS
作爲JS系列的第一篇，內容當然是瀏覽器如何執行一段JS啦。 首先通過瀏覽器篇我們可以得知，JS是在渲染進程裏的JS引擎線程執行的。在此之後還要了解幾個概念，編譯器（Compiler）、解釋器（Interpreter）、抽象語法樹（AST）
2020-07-18 13:04:55
原创 渲染進程裏的線程
首先我們來看一下瀏覽器的各個進程以及其中對我們前端來說最重要的渲染進程。爲什麼說渲染進程對我們前端來說最重要呢，因爲頁面的渲染,JS的執行,事件的循環都是在渲染進程內進行。請參考下圖（⚠️下圖僅僅爲一般狀態下的進程示意圖，由於Chrome
2020-07-14 13:01:17
原创 瀏覽器常見攻擊方式（XSS和CSRF）
常見的瀏覽器攻擊分爲兩種，一種爲XSS（跨站腳本攻擊），另一種則爲CSRF（跨站請求僞造）。 XSS（跨站腳本攻擊） 定義 XSS 全稱是 Cross Site Scripting，爲了與“CSS”區分開來，故簡稱 XSS，翻譯過來就是“
2020-07-13 13:01:13
原创 HTTP前世今生
HTTP 是瀏覽器中最重要且使用最多的協議，是瀏覽器和服務器之間的通信語言。隨着瀏覽器的發展，HTTP 爲了能適應新的形式也在持續進化。已經歷經0.9，1.0，1.1，2.0等幾個階段, 以及未來的3.0。 開頭先講個小故事，看完你可能滿臉
2020-07-08 13:01:26
原创 重排重繪與合成
前端有個很經典的問題是說下重排和重繪的區別，一般我們會說重排性能低，而重繪性能高。但其實我們可以深入探究一下其中但原因。 重排（迴流） 定義 當通過JS或者 CSS 修改元素的幾何屬性，例如改變元素的寬度、高度等，那麼瀏覽器會觸發重新佈局，
2020-07-06 14:33:11
原创 從按下url到顯示頁面
從按下url到渲染頁面流程圖 處理輸入信息 檢查用戶輸入 當用戶在地址欄中輸入一個查詢關鍵字時，地址欄會判斷輸入的關鍵字是搜索內容，還是請求的 URL。如果是搜索內容，地址
2020-06-03 14:35:11
原创 垃圾回收技術
發展史 2011 年，V8 從 stop-the-world 標記切換到增量標誌。 2018 年，GC 技術又有了一個重大突破，這項技術名爲併發標記。在Chrome 64和Node.js v10中已啓用。他將標記時間縮短了60
2020-05-08 13:54:34
原创 import和require區別
相同點： 作用和行爲上基本一致，都是以阻塞的方式載入模塊 區別： require import 加載 運行時加載(即動態加載) 在編譯時加載(即靜態加載) 導入 導入整個模塊對象，不能僅
2020-05-06 13:58:29
原创 TCP基礎概念
定義 傳輸控制協議（TCP，Transmission Control Protocol）是一種面向連接的、可靠的、基於字節流的傳輸層通信協議 特點 TCP是一種面向廣域網的通信協議，目的是在跨越多個網絡通信時，爲兩個通信端點之間提供一條具
2020-04-22 13:42:18
原创 OSI 七層模型以及TCP/IP模型
OSI 七層模型 定義 OSI（Open System Interconnection）即開放式系統互聯通信參考模型。該模型是國際標準化組織（ISO）制定的一個用於計算機或通信系統間互聯的標準體系，一般稱爲OSI參考模型或七層
2020-04-20 13:42:27
原创 Chrome瀏覽器架構
通用瀏覽器架構 它可以是一個具有許多不同線程的進程，也可以是具有幾個通過IPC進行通信的多個線程的進程。 一個具有許多不同線程的進程 通過IPC進行通信的多個線程的進程
2020-04-18 13:42:55
原创 DNS(域名系統)
定義 域名系統（Domain Name System）是互聯網的一項服務。它作爲將域名和IP地址相互映射的一個分佈式數據庫，能夠使人更方便地訪問互聯網 端口 DNS使用TCP和UDP的53端口。 限制 限制每一級域名長度的限制是63個字符，
2020-04-06 14:13:50
原创 如何實現一個既簡單又漂亮的列表
相信大家對列表展示早已不陌生了，工作中也經常會有這樣的需求。那我們如何實現一個既簡單又美觀的列表展示呢？ 首先讓我們來看一下效果： 上面是普通的展示列表，而下面則是我們處理過的展示列表，是不是感覺美觀了很多啊。 實現： 核心屬
2019-12-25 14:06:21
原创 假如React沒了JSX
如題，想必React大家早已不陌生，而React裏面的JSX都是玩的得心應手了，但是假如說React裏面沒有了React那會是一種什麼樣的情形呢，我們來簡單的看一下。 首先我們來實現一個簡單的list列表。 好，現在我把他的代碼貼出
2019-12-24 14:12:04
原创 React一鍵複製
如題，我們怎麼在React或者其他的框架中實現一鍵複製呢，實際上實現一鍵複製的代碼與框架無關，因爲他是用的是原生的API，下面我們用React來實現一下 效果： 核心代碼： 直接將紅框處改爲需要複
2019-12-20 14:09:42
18