原创 一文梳理z-index和層疊上下文
前言 最近參與某前端項目架構改造，發現項目中濫用z-index，設置的值有幾十種並且不統一。在對項目的z-index進行梳理和統一過程中也深入學習了一下z-index，並撰寫成文，希望也能幫助到陌生的你。 1、z-index z-index
2023-05-08 13:35:44
原创 Glob模式匹配
前言 在本文中我將以glob是什麼，glob的語法，glob與正則表達式的差異等幾個方面對glob模式匹配進行一個梳理，希望也能對讀者起到一定的幫助。 glob 是什麼 glob是用於文件名的一種模式匹配，全程global，起源於貝爾實驗室
2022-11-25 13:37:30
原创 頁面卸載前（用戶關閉頁面）向服務器發送請求
廢話不說，直接進正題。 最近項目有個需求需要在用戶關閉頁面時將頁面存留的統計數據發送到後端。該需求有兩個關鍵點： 監聽頁面卸載 在卸載時發送數據 如何監聽用戶關閉頁面 首先我們需要明確，哪些場景屬於用戶關閉頁面： 關閉瀏覽器 關閉/刷
2022-11-21 13:35:27
原创 推薦算法之基於用戶的協調過濾
基於用戶的的協調過濾算法是推薦統統最古老的算法，簡稱UserCF。該算法的誕生一定程度上標誌着推薦系統的誕生。本文將對UserCF算法原理進行講解，並且基於Movielens數據集給出實現代碼供大家交流學習。 基本原理 在一個在線個性化推薦
2022-02-15 13:36:44
原创 學習Promise異步編程
JavaScript引擎建立在單線程事件循環的概念上。單線程（ Single-threaded ）意味着同一時刻只能執行一段代碼。所以引擎無須留意那些“可能”運行的代碼。代碼會被放置在作業隊列（ job queue ）中，每當一段代碼準備被
2020-12-31 13:10:40
原创 一文梳理Web存儲，從cookie，WebStorage到IndexedDB
前言 HTTP是無狀態的協議，網絡早期最大的問題之一是如何管理狀態。服務器無法知道兩個請求是否來自同一個瀏覽器。cookie應運而生，開始出現在各大網站，然而隨着前端應用複雜度的提高，Cookie 也漸漸演化爲了一個“存儲多面手”，承載了
2020-07-08 19:21:32
原创 一文梳理同源策略與跨域技術
1.同源策略 同源策略是一個重要的安全策略，它用於限制一個origin的文檔或者它加載的腳本如何能與另一個源的資源進行交互。它能幫助阻隔惡意文檔，減少可能被攻擊的媒介。 1.1何謂同源？ 如果兩個 URL 的 protocol、port
2020-07-06 14:06:02
原创 一文梳理JavaScript中的this
最近零零碎碎看了許多關於this的文章，本着“好記性不如爛筆頭”的思想，特在這裏整理一下this有關的知識點。【長文警告！！！】 接下來，筆者將按照以下目錄對this進行闡述： this是什麼？ this指向 this在全局範圍內 th
2020-06-20 13:39:49
原创 簡單梳理JavaScript垃圾回收機制
JavaScript具有自動垃圾回收機制，即執行環境會負責管理代碼執行過程中使用地內存。 這種垃圾回收機制的原理很簡單：找出那些不再繼續使用的變量，然後釋放其佔用的內存。爲此，垃圾收集器會按照固定的時間間隔（或代碼執行中預定的收集時間）週期
2020-06-18 13:39:50
原创 一文梳理JavaScript 事件循環(Event Loop)
事件循環（Event Loop），是每個JS開發者都會接觸到的概念，但是剛接觸時可能會存在各種疑惑。 衆所周知，JS是單線程的，即同一時間只能運行一個任務。一般情況下這不會引發問題，但是如果我們有一個耗時較多的任務，我們必須等該任務執行完畢
2020-06-18 13:39:50
原创 一文梳理JS事件
JavaScript與HTML的交互是通過事件進行的。事件，就是文檔或瀏覽器窗口發生的一些特定的交互瞬間。 事件流 事件捕獲 事件冒泡 事件處理程序 事件委託 1. 事件流 如果單機頁面上的某個按鈕，認爲單擊事件不僅僅發生在按鈕上
2020-06-18 13:39:50
原创 深入理解CSS定位—浮動模型
前面我們講到了絕對定位，在這篇文章中，我們將講到3種定位模型中的浮動模型。主要參考 張鑫旭在慕課網的 深入理解float 那些年我們一起清過的浮動---by 一絲絲涼 精通CSS 注意：第二小節基本參考一絲絲涼的內容，看過這篇就可以略過
2020-05-13 13:23:01
原创 src與href
src與href這兩個標籤內屬性大家應該不陌生，但是兩者有何區別呢？可能很多初學前端的人沒有思考過這個問題，本文將講述一些關於兩者的知識點，提高大家對其的認知，不停留在表面。 1. src與href的區別 在頁面上，一般我們用href加載c
2020-05-13 13:23:01
原创 深入理解CSS絕對定位
CSS中有3種定位機制：普通流，浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。顧名思義，普通流中元素框的位置由HTML元素的位置決定。塊級框一個接一個地垂直排列，框之間的垂直距離由框的垂直外邊距計算出。在本文中，我們主要講解3種
2020-05-10 13:22:51
原创 CSS選擇器與最佳實踐
有效且結構良好的文檔爲我們要應用的樣式提供了一個框架，但將CSS樣式應用於特定的HTML元素，需要找到該元素。在CSS中，執行該任務的樣式規則稱爲選擇器。在本文，你可以學習到： CSS選擇器 CSS層疊和特殊性 CSS繼承 CSS實踐
2020-05-06 13:27:23