原创 關於瀏覽器resize的一些問題
谷歌瀏覽器（當前版本是：版本 92.0.4515.159（正式版本） （64 位），目前最新版也一樣有該問題）添加了resize監聽時，在縮小窗口時，如果寬度和高度都發生了變化，就會觸發兩次，而放大時，不論是否寬度高度都改變，都只會觸發
2024-03-26 14:19:48
原创 動態尺寸加載libpag文件白邊問題解決方案
加載pag文件時，最理想的情況是canvas的寬高和pag資源文件的寬高一致，或比例一致。否則就會出現四周白邊（頁面底色），除非是按平鋪的樣式進行設置（源碼暫未找到對應方法）。 而對於頁面寬高不定的情況下，就無法保證pag文件能適配
2024-03-26 14:19:48
1
原创 MutationObserver監聽DOM結構變化
前面有IntersectionObserver觀察器實現頁面懶加載的功能，原理就是觀察dom是否進入視口。那麼如果不管是否可見或者要實現隨時監聽，則需要使用MutationObserver。 示例代碼： 1 filterObserve:
2024-03-01 14:25:31
原创 谷歌和火狐的瀏覽器表現差異（1）
作爲主流瀏覽器的谷歌和火狐，其內核在一些問題處理上有一些差異，比如一些樣式、事件。 就事件來說，監聽界面切換就是差異之一。 就原因來分析，就是二者對於document和window的範圍界定有差異，火狐認爲瀏覽器tab就是window，所以
2023-11-09 14:23:24
原创 Angular監聽頁面resize
import { fromEvent } from 'rxjs'; this._event = formEvent(window, 'resize').subscribe((e)=>{}) 同理，可以作用在任意元素上，也可以作用在任意支持的
2023-09-27 14:19:37
原创 vue常見問題彙總
來源：https://www.fly63.com/ Q1：安裝超時(install timeout) 方案有這麼些: cnpm : 國內對npm的鏡像版本/*cnpm website: https://npm.taobao.org/*/
2023-08-31 14:22:40
1
原创 前端錄製與回放
1. 背景 1.1 selenium等自動化測試工具 1.2 webRTC屏幕錄製 1.3 rrweb+rrwebplayer 2. 對比 selenium適用於自動化測試、自動運行腳本；webRTC適用於錄製視頻與上傳分析
2023-08-31 14:22:40
原创 前端文件相關總結
先引用掘金上的一個總結，將前端會遇到的文件相關的知識點間的關係串聯了起來。 前端技術提供了一些高效的解決方案：文件流操作和切片下載與上傳。 1. 文件基本操作 1.1 數據流和文件處理的基本概念 數據流是指連續的數據序列，可以從一
2023-08-31 14:22:40
原创 時間切片
1. 下次繪製交互 (INP) 下次繪製交互 (INP) 是一項新的指標，瀏覽器計劃於 2024 年 3 月將其取代取代首次輸入延遲 (FID) ，成爲最新的 Web Core Vitals（Web 核心性能指標）。 2. 時間切片-s
2023-08-31 14:22:40
原创 關於iframe的一些總結（2018）
在使用iframe的時候，會有很多莫名奇怪的問題。所有很少使用，但是有接手了一個項目，其中用了挺多的iframe 問題1： iframe內部取不到外部的元素。 表現：直接在控制檯取可以取到，但是在js實際執行的時候取不到。 控制檯輸入：$(
2023-08-30 14:37:34
原创 VUE路由（2018）
在當前的前端開發中，路由是一個很重要的概念，尤其是針對單頁面app，因爲通過路由可以實現不跳轉加載刷新。比如angular應用，vue應用。 VUE路由語法： 1.首先，安裝方法和angular路由類似，可以單獨安裝，也可以直接使用
2023-08-30 14:37:34
原创 Vue學習筆記一（2019）
1.Vuex Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 每一個 Vuex 應用的核心就是 store（倉庫）。“store”
2023-08-30 14:37:34
原创 前端埋點常用方法
1. 使用場景 主要用於數據採集，如：性能分析，用戶行爲分析，日常信息採集，測試信息採集等。指的是針對特定用戶行爲或事件進行捕獲、處理和發送的相關技術及其實施過程。. 比如用戶某個icon點擊次數、觀看某個視頻的時長等等。 2. 方法
2023-08-18 14:22:20
原创 Angular FormControl value屬性的一些事
背景：一個輸入校驗，允許輸入多行，每一行是ip或網段。寫了個校驗，將其按行拆分後單獨校驗。 1. FormControl無法深複製 使用JSON.parse(JSON.stringify(control))進行簡單深複製報錯，因爲不
2023-08-10 14:19:25
原创 webworker/瀏覽器空閒狀態/不引入單獨js
想必大家都遇到過瀏覽器頁面最小化、非當前聚焦頁面（鎖屏暫時沒有嘗試，按理是一樣的）這些場景時，再次打開目標頁面時，頁面自動刷新了一下，或者重新加載了一次，明顯可以看到卡頓了一下等等現象（不同瀏覽器策略有所不同）。體會最明顯的就是比如我們
2023-07-11 14:19:48