- 博客(16)
- 收藏
- 关注
RSS订阅原创 高级用法IntersectionObserver
IntersectionObserver 是前端滚动相关性能优化的核心 API，替代传统 scroll 事件方案，核心解决高频触发、主线程阻塞问题，是懒加载、无限滚动、曝光埋点等场景的最优解。其使用门槛低，浏览器原生支持，结合 polyfill 可实现全兼容，且在 Vue/React/Angular 等框架中可轻松封装为通用指令 / 钩子，提升开发效率。
2026-01-26 15:58:31
617
原创 浏览器前沿新特性
是浏览器原生的组件化方案（无需框架），由自定义元素（Custom Elements）和影子 DOM（Shadow DOM）组成，是 DOM 新特性的核心，实现原生组件隔离、复用。javascript运行// 1. 定义自定义元素：继承HTMLElementsuper();// 2. 创建影子DOM：实现样式/JS完全隔离（核心）// open=外部可访问shadowDOM，closed=完全隔离// 3. 向影子DOM添加内容（样式仅作用于组件内部，不污染全局）<style>
2026-01-23 14:08:32
896
原创 高频三大worker详解
需要单个页面做耗时计算，不想卡 UI→ 用Web Worker（专用计算线程）；需要同源多页面共享数据 / 通信，共享计算结果→ 用（跨页面共享线程）；需要实现离线访问、缓存资源 / 接口、PWA 特性→ 用（浏览器级离线代理脚本）。
2026-01-23 13:43:34
754
原创 初识webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。
2023-07-11 17:27:03
129
1
原创 git常见命令
用法：git config –global user.email “[email address]”用法：git config –global user.name “[name]”用法：git push [variable name] master。git status 查看仓库当前的状态，显示有变更的文件。用法：git init [repository name]git diff 比较文件的不同，即暂存区和工作区的差异。该命令可用于通过指定的URL获取一个代码库。用法：git clone [url]
2023-07-11 17:21:27
104
1
原创 手写算法-将多层级数组扁平化去重升序
核心思路：flat展开，Infinity属/性无限展开，然后得到set数组可以通过Array.from / [...new Set()]转成数组，接着排序用sort。
2023-07-11 09:15:23
95
1
原创 手写算法-防抖节流
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。防抖和节流都是防止某一时间频繁触发，但是原理却不一样。
2023-07-10 12:26:45
108
1
原创 高频HTML面试题，持续更新ing
总的来说，XHTML可以看作是更具严格性和规范性的HTML变种，它力求遵循XML的语法规则，并对标签的嵌套、属性的引用等有更严格的要求。使用语义化的HTML标记：使用适当的HTML标记来描述网页内容的结构和语义，如使用至标签来标记标题，标签来标记段落，标签来标记重要文本等。需要注意的是，SEO是一个综合性的工作，不仅限于HTML标记。元素和属性：XHTML必须使用有效的元素和属性，而HTML对一些元素和属性有一定的宽容性，允许使用一些已经被废弃或不合法的元素和属性。
2023-07-06 11:43:52
192
1
原创 高频CSS面试题，持续更新ing
利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大 大降低了浏览器的加载时间。link标签内的media属性，设置为不匹配的媒体类型（print/noexist），降低加载优先 级;c. 使用 link 标签内的 rel 属性，设置为可选样式表(alternate stylesheet)，结束后设置回来。d. 一般用rel='preload'进行异步加载。
2023-07-05 16:39:00
113
原创 Flex布局详解
任何元素都可以使用flex布局（弹性布局），例如：块元素可以用display:flex，行内元素用display:inline-flex;不同浏览器可以使用不同的前缀flex，比如-webkit-flex,-o-flex,-moz-flex,-ms-flex,分别对应谷歌，欧朋，火狐，ie浏览器。采用flex容器的元素，称为容器。所有子元素就变成其容器成员，即为flexItem项目。针对容器有六个属性：flex-direction属性决定主轴的方向，即flexItem项目的方向。其值有row(默认值
2021-06-11 10:28:33
698
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人