原创 深入淺出FE(六)React性能優化指南

1.使用純組件pureCommponent 如果 React 組件爲相同的狀態和 props 渲染相同的輸出,則可以將其視爲純組件。 對於像 this 的類組件來說,React 提供了 PureComponent 基類。擴展 React.

原创 深入淺出FE(八)微前端初探

一. 什麼是微前端? Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaSc

原创 CSS(六)CSS動畫-animation簡介

這是一個系列的文章,你也可以查看其他文章: 0、CSS-預熱篇 1、CSS(一)詳解position 2、CSS(二)transform 3、CSS(三)flex佈局(flex彈性佈局詳解) 4、CSS(四)詳解Grid佈局 5、CSS(

原创 JS(二十)Service Worker

背景 service worker要解決的問題是用戶丟失網絡連接,換句話說使用service worker後,當用戶在離線狀態也可以獲得很好的用戶體驗。 基本概念 Service worker是一個註冊在指定源和路徑下的事件驅動worke

原创 深入淺出FE(十二)淺析websocket

目錄   一、爲什麼要有websocket? 二、關於websocket 三、websocket的請求響應過程 四、爲什麼WebSocket連接可以實現全雙工通信而HTTP連接不行呢? 五、WebSocket 的用法 六、服務端的實現 七

原创 CSS(二)transform詳解

這是一個系列的文章,你也可以查看其他文章: 0、CSS-預熱篇 1、CSS(一)詳解position 2、CSS(二)transform 3、CSS(三)flex佈局(flex彈性佈局詳解) 4、CSS(四)詳解Grid佈局 5、CSS(

原创 webpck深入淺出教程(三)webpack源碼分析

webpack入口文件: 執行npm命令後,查看node_modules\.bin目錄下是否存在webpack.sh或者webpack.cmd文件,如果存在就執行,如果不存在就拋出錯誤。 webpack實際入口文件是: node_modu

原创 CSS(零)-預熱篇

這是一個系列的文章,你也可以查看其他文章: 0、CSS-預熱篇 1、CSS(一)詳解position 2、CSS(二)transform 3、CSS(三)flex佈局(flex彈性佈局詳解) 4、CSS(四)詳解Grid佈局 5、CSS(

原创 深入淺出FE(十一)報表系統調研

報表系統開發初探 2020.6.7 總體思路 1、自研 使用web端可拖拽特性直接生成線上報表,優點是自定義樣式,缺點是維護和開發工作量較大。 2、開源系統二次開發 (1)基於BIRT報表或者iReport + JasperReports

原创 前端進階(十七)WebAssembly

一、編譯和解釋 編程語言分爲兩類: 編譯型:如C/C++ 解釋型:如Java/Python/JS 編譯型語言,代碼需要經過下面的步驟轉成機器碼: 文本 -> 彙編語言 -> 可運行機器碼 文本經過此法分析、語法分析、語義分析轉成彙編語言,

原创 CSS(一)詳解position

最近我想深入學習css知識,所以打算對css相關的內容整理下。 這是一個系列的文章,你也可以查看其他文章: 0、CSS-預熱篇 1、CSS(一)詳解position 2、CSS(二)transform 3、CSS(三)flex佈局(fle

原创 深入淺出FE(七)對象的深淺拷貝

對象的拷貝在js中比較重要,因爲js不同與C++等,沒有指針操作,基本類型都是沒有引用的,只有對象和函數纔有引用,這就造成當我們在拷貝一個對象時,可能會有深淺拷貝之分。 淺拷貝的意思就是隻複製引用(指針),而未複製真正的值。而深拷貝則是

原创 給定寬度,不用height畫出正方形

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

原创 CSS(九)垂直居中詳解

一般情況下有的需要問水平居中和垂直居中. 常見的水平居中和垂直居中有: 水平居中: 行內元素: text-align: center; 塊級元素:margin: 0 auto; absolute+ transform; flex+ jus

原创 CSS(三)flex佈局(flex彈性佈局詳解)

這是一個系列的文章,你也可以查看其他文章: 0、CSS-預熱篇 1、CSS(一)詳解position 2、CSS(二)transform 3、CSS(三)flex佈局(flex彈性佈局詳解) 4、CSS(四)詳解Grid佈局 5、CSS(