現代前端技術解析 Web 前端技術基礎

2021-08-25 02:43:04 字數 910 閱讀 5173

對 dom 操作進行封裝

dom 文件物件模型:指 html 內容通過瀏覽器解析後建立的具有節點父子關係的樹形物件

模組化 & 元件化

非同步載入 保證盡快展示頁面

webp 格式的 更高壓縮比

瀏覽器快取檔案

304 狀態碼:客戶端傳送了乙個帶條件的 get 請求且該請求已被允許,而文件的內容並沒有改變,則伺服器返回 304 狀態碼。

移動端頁面應盡量簡潔

koa 框架:乙個基於 node.js 的 web 框架,使 js 在伺服器端也能高效的開發

瀏覽器開啟乙個執行緒處理這個請求,解析 url 位址,如果是 http 協議就按照 http 方式處理

呼叫瀏覽器引擎中對應的方法,如 webview 中的 loadurl 方法,分析並載入這個 url 位址

通過 dns 解析獲取 url 位址對應的 ip 位址,並向該 ip 傳送 get 請求(包含瀏覽器的 cookie、useragent 等資訊)

進行 http 協議會話,瀏覽器客戶端向 web 伺服器傳送報文

進入**後台 web 伺服器處理請求

進入部署好的後端應用,找到對應的請求處理邏輯

伺服器處理請求並返回相應

有快取,返回 304

無快取,返回 200 以及對應內容

頁面開始渲染 dom,css 根據規則解析並結合 dom 文件樹進行網頁內容布局和繪製渲染,js 根據 dom api 操作 dom,並讀取瀏覽器快取、執行事件繫結等

解析 html 構建 dom 樹

構建渲染樹(根據 css 檔案)

渲染樹布局階段(固定節點在頁面中的位置)

繪製渲染樹(使元素的樣式資訊生效)

webkit 核心渲染時 html 與 css 解析可並行,gecko 核心先解析 html 生成 sink 後再解析 css

現代前端技術解析 3

手動觸發指令繫結是比較直接的實現方式,主要思路是通過在資料物件上定義get 方法和set 方法,呼叫時手動觸發get 或set 函式來獲取 修改資料,改變資料後會主動觸發get 和set 函式中view層的重新渲染功能。我們來看乙個栗子 q value value type text id inpu...

web 前端技術點

prototype為類定義的方法要先定義後使用,跟js執行原理有關 prototyp只能在類中進行方法和變數的定義,例項中沒有這個屬性 例項對prototyp定義的屬性進行直接賦值是在例項中生成乙個新的屬性,而不是改變prototyp裡的屬性,如果是資料push進去就是各例項共享的。所以protot...

Web前端學習 移動Web加速技術

移動裝置已經成為當下使用頻率最高的電子裝置,而移動web依然是移動裝置中使用頻率最高的應用場景。站點頁面效能提公升可以使得使用者瀏覽站點時的體驗得到良好改善,作為其中一條技術分支,移動web加速技術的方法和技術方案在近幾年得到了不斷發展。無論是內容分發平台 瀏覽器提供商 網路提供商還是web站點,都...