- 博客(393)
- 收藏
- 关注
RSS订阅原创 响应式布局&注意事项
4，rem配合vw，比如说我们的设计稿的750像素，我们可以设置我们根元素的font-size为100/7.5vw，然后我们的一个单位就一直使用rem。文字的点点点需要3个前提，设置不换行，设置元素宽度，设置overflow为hidden，需要注意的是，元素的宽度为单位使用百分比的话会失效，gap（间歇）这个属性需要chrome84以上的版本，兼容性不好，尽量不要使用，flex-29，grid-57，proxy-49。1，流式布局，宽度使用百分比，高度直接写定值。3，使用视口单位vh,vw。
2025-03-21 16:41:07
272
原创 window错误捕获
window.onerror和window.addEventListener('error')都是用来捕获全局的错误，都捕获不到promise相关的错误。window.onerror是一个全局的事件处理函数，window.addEventListener('error')是通过事件监听来捕获错误。通过unhandledrejectionn来捕获promise相关的错误。
2025-03-21 14:56:36
308
原创 前端性能核心指标（TTFB、FP、FCP、LCP、TTI、DCL）
Performance和骗PerformanceObserver都行，都是获取first-contentful-paint这个元素的时间。文档被完全加载和解析完成就会触发（就是HTML解析完毕，图片样式可能未加载完成），反映HTML文档的解析速度和DOM树的构建效率。responseStart：http开始接收响应的时间（获取第一个字节），包括从本地读取缓存。FP（数据上白屏时间，非肉眼）first-paint的starttime。FCP 首次内容绘制（白屏时间）// 开始渲染第一个节点的时间。
2025-03-20 19:20:31
248
原创 getBoundingClientRect ，IntersectionObserver，MutationObserver
getBoundingClientRect 和 IntersectionObserver为异步 是前端开发中用于处理元素位置和可见性的两个重要 API。getBoundingClientRect为同步，IntersectionObserver为异步，兼容性方面getBoundingClientRect好于IntersectionObserver。MutationObserver 可以用来监听 DOM 的任何变化，为异步操作。不过IntersectionObserver从谷歌51版本开始就支持了。
2025-03-20 18:41:05
104
原创 HTTP1,1.1,2.0
1.1增加了缓存的请求头，catch-control，etag，last-Modified，更加精确的判断资源是否发生变化。2，多路复用：允许多个请求和响应在一个链接上并行，相对HTTP1.1，一个链接只能处理一个请求，浏览器这边限制一个域名。最多维持六个链接，那么链接多的情况下可能会在造成阻塞问题；3，服务器推送，使用http2_push,可以将浏览器所需要的文件提前发送，节省浏览器的一个请求时间。4，头部压缩，header字段压缩，重复的头部字段，使用索引值替代，节省带宽。
2025-03-20 18:26:03
147
原创 前端优化资源加载与执行顺序
defer->用于script标签，下载不会阻塞页面渲染，在DomConnectLoaded事件触发前执行。prerender->让浏览器在后台提前加载整个页面，当用户访问时，基本上可以瞬间加载。preload->尽早加载，优先级略高于prefetch，也不会阻塞页面的渲染。async->用于srcipt，下载不会阻塞页面渲染，下载完成后立即执行。prefetch->浏览器空闲时间加载。
2025-03-20 18:12:38
69
原创 打造高性能的react
useMemo其实就是更细致话的memo，React.memo 控制是否需要重渲染一个组件，而 useMemo 控制的则是是否需要重复执行某一段逻辑。为了解决这类问题，引入了Immutablejs，持久性数据的库，只要这个数据被创造出来，就不能被更改，更改的话就会返回一个新对象。shouldComponentUpdate触发的条件是只要父组件更新了，就会被触发，在里面判断传入的pros是否改变，基本数据类型会判断其是否相等，引用数据类型会判断其对象地址是否变化，带来的问题就是，引用数据类型。
2025-03-14 13:27:43
313
原创 text-overflow: ellipsis不生效问题
使用text-overflow: ellipsis时有三个前提。1，必须确定div的宽度（注意，百分比宽度无效）对于内联元素还必须将其转化。
2025-03-05 17:55:10
122
原创 前端白屏优化
DNS查询（域名转化为IP地址的过程）优化：DNS预解析（dns-prefetch），App打开的时候，首字符展示优化：骨架屏或者是一个loading页面。让端上打开一个不可见的html预解析所需要的域名。影响其主要因素是DNS查询和首字符展示。
2025-02-24 13:37:09
119
原创 性能瓶颈点：从 URL 输入到页面加载整过程分析
（chrome-41，Firefox-36，edge—win10，safari-版本9，浏览器需要支持&服务器同时需要配置支持）浏览器输入 URL 后，为了把 URL 解析为 IP 地址，浏览器会向 DNS 服务器发起 DNS 查询，获取 IP 地址。性能下降，变化较大的话甚至会出现页面抖动现象，对应的就是cls指标（如果宽高没法定义，可以给个最小值，减少抖动）chrome的话是为6个，其实一般也就是图片的请求优化，在建立连接后，浏览器就可以发起 HTTP 请求，而服务端接收到后，对请求进行响应。
2025-02-19 14:37:35
366
原创 前端性能与交互指标
例如，首屏时间的 P99 是 8 秒，说明在 99% 的用户中，首屏加载时间都在 8 秒以内，只有极少数（1%）用户会面临更长的加载等待。比如，首屏时间的 P90 是 5 秒，意味着 90% 的用户首屏加载时间在 5 秒及以内，只有 10% 的用户会遇到更长的加载时间。在首屏时间分析中，它表示有一半的用户首屏加载时间小于这个值，另一半大于这个值。例如，若首屏时间的 P50 是 3 秒，说明一半用户的首屏加载时间在 3 秒以内。也就是说，有 90% 的数据小于等于这个值，只有 10% 的数据大于这个值。
2025-02-18 16:46:46
355
原创 react生命周期
为啥这么说呢，getDerivedStateFromProps是一个静态方法，在这里面访问不到this，第一个参数是接受到的props，第二个参数是组件本身的state，getDerivedStateFromProps需要返回一个对象，更新state，其对state并不是覆盖的更新，而是针对某个属性的定向更新，个人理解其实限制我们不要在这做太多事情，this直接访问不到，只能够基于props更新state，避免生命周期的滥用，更耦合。
2025-02-12 01:07:20
258
原创 JSX的本质
jsx代码通过babel编译为React.createElement这个方法的调用，在这个方法里面，接受三个参数，type元素类型，config雨伞的属性，children元素的子元素or内容，会该三个参数进行指定数据的格式化，传递给ReacrElement这个方法，调用该方法，创建一个element的js对象，将接受的参数赋予该对象的属性，这个对象其实就是虚拟dom，最后虚拟dom就是通过reactDOM.render这个方法转化为真实的dom。1，element，需要渲染的元素，虚拟dom。
2025-02-11 00:58:26
106
原创 前端图片选择
webp：同时具备了jpg和png的优点，并且体积能够更小，浏览器兼容性不如这两者。jpg：比较通用的图片格式，相同情况下比png小，不支持透明。gif：最知名的就是支持动图了。pbg：无损压缩，支持透明。
2025-01-24 15:15:20
77
原创 为啥react要用jsx
jsx其实就是React.createElement的语法糖，让我们能够写类似于原生HTML和js的代码来替代React.createElement这个方法，让代码能够变得更加简洁，结构更加清晰，可读性更强。react本身并不强制使用jsx，在没有她之前，react实现组件依赖于使用 React.createElement 函数，代码写起来会非常奇怪。官方：JSX是一个js语法的拓展。vue的模版语法对比，
2024-12-04 21:47:55
401
原创 JWT是 啥
第三部分叫做签名，是为了防止篡改的， 他是用自己的秘钥把头部和负载进行加密，服务器获取到JTW后会解密签名，两者进行对比，判断是否有修改了。jwt其实就是一段字符串，是明文，这段字符串分为3个部分，分别是头部，负载和签名，他使用逗号分隔。jwt头部和负载是没有加密的，一般是用base64字符串来加解密，不要在里面存储敏感信息！
2024-12-04 00:44:02
94
原创 chrome最小字号
我们还需要格外设置其在原点缩放，tramsform-origin为lefrt center。可以使用transform的scale方法来缩小其进行实现。不过需要注意，transferm这个属性只针对块级元素生效。chrome默认的最小字体为12px。并且默认是基于中心缩放。
2024-12-01 23:42:09
151
原创 css粘性定位
有时会失效就是因为你在其祖先元素设置了overflow，其就不会基于根元素来定位了。其上下左右相对的元素是设置的overflow的祖先元素。其实是相对定位和绝对定位的语法糖《不是固定定位》粘性定位必须设置其上下左右的阈值才能生效。
2024-12-01 01:50:23
93
原创 componentReceiveProps&react class生命周期
componentReceiveProps（父组件触发）=》shouleComponentUpdate（组件自身触发）=》componUpdate=》render=》ComponentDidUpdate。父组件导致组件重新渲染，即使props没有更改，也会调用componentReceiveProps这个方法；如果只想处理更改，确保当前值与变更值比较--官方。constructor=》componentWillMount=》render=》componentDidMount（初始化，父组件）
2024-11-26 01:07:59
736
原创 1，JSX 代码是如何“摇身一变”成为 DOM 的？
jsx通过babel转化为React.createElement()，React.createElement这个方法基本上都是在格式化数据，接受三个参数type，config，children，二次处理她定义好的key，ref，self，cource四个属性，作为参数，发起对ReactElement调用,创建虚拟Dom，在再调用ReactDOM.render将其转化为。ReactElement其实就是根据传入的参数按照一定的规范创建了一个js对象（描述真实Dom），其实就是虚拟Dom。
2024-11-22 18:58:50
167
原创 scope样式隔离&穿透
scope 在style标签里面设置 会为template里面定义的html元素添加一个 data-v-{唯一的hash值} 的属性选择器 在style标签中所写的css样式都会在在样式选择器最后加上 data-v-{唯一的hash值} 对于其子组件，只会在其根元素添加data-v-{唯一的hash值}，其子元素不会添加 就是通过在html标签和class里面添加一个唯一的属性选择器，从而来实现样式隔离 样式穿透 在根组件修改其后代组件的样式 使用dee
2024-09-10 15:31:14
245
原创 react&webpack老项目开发环境增加vite
/ 对应webpack的loader，转译的时候将process.env转化为import.meta.env。console.error(`${htmlPath}路径没有html`);console.log(`${outPath}成功创建外层html`);// exists弃用，existsSync不使用回调。//支持前缀REACT_APP_// 路径相关配置项。// 存在的话就返回。
2024-09-09 18:48:57
1244
原创 meta元素
meta http-equiv="cache-control" content="no-cache">或者重定向，刷新属性都有。1，meta元素有4个全局属性。
2024-09-09 18:34:59
405
原创 react脚手架项目，启动时不清空控制台
找到node_modules/react-dev-utils/clearConsole.js这个文件。将clearConsole这个方法里面给注释掉就行了。
2024-09-05 16:12:28
217
原创 scope样式隔离&穿透
scope 在style标签里面设置 会为template里面定义的html元素添加一个 data-v-{唯一的hash值} 的属性选择器 在style标签中所写的css样式都会在在样式选择器最后加上 data-v-{唯一的hash值} 对于其子组件，只会在其根元素添加data-v-{唯一的hash值}，其子元素不会添加 就是通过在html标签和class里面添加一个唯一的属性选择器，从而来实现样式隔离 样式穿透 在根组件修改其后代组件的样式 使用dee
2024-08-08 15:13:09
209
原创 浏览器自动播放策略
2，先设置视频为静音（可以自动播放了），然后创建一个音频上下文，判断能否自动播放，可以的话就让视频不要静音（b站的做法）：用户在访问网页时，如果视频或音频内容是静音的，可以自动播放。这意味着内容不会干扰用户的浏览体验。1，判断能否自动播放(try-catch)，不能的话就暂停视频（或者加个蒙层），让用户点击（抖音）在桌面设备上，用户的媒体参与度阈值已经超过，意味着用户之前播放过有声视频（媒体参与度无法改变）：用户可以通过浏览器的设置来管理自动播放选项，包括允许或阻止特定网站的自动播放。
2024-07-25 00:28:38
460
原创 页面可见度（页面切换）-visibilitychange
通过监听该visibilitychange，配合document.hidden(返回一个布尔值），判断用户是否切换了页面。
2024-07-25 00:12:03
146
原创 webpack&vite
一开始就要同一模块化代码，所以他需要把所有依赖读取一遍，并且转化为对应的代码，然后再去开启开发服务器。两者侧重点不一样，webpack更加关注兼容性，vite更加关注浏览器端的开发体验。vite只支持es-module：只跑在浏览器端，直接开启开发服务器。（ast抽象语法分析工具，分析你写的文件有啥导入导出）webpack支持多模块化：可以跑在服务端。
2023-09-07 01:13:06
210
原创 vite预构建解决了三个问题
3，解决了网络多包传输的性能问题（也是esmodule不支持node——module的原因），有了依赖构建后，无论每个依赖里面存在多少个export或者import都能够集成为一个或者几个模块，减少请求的次数。1，不同第三方包不同的导出格式。2，对路径上的处理直接使用。
2023-09-07 01:07:01
221
原创 一个构建工具承担了什么累活
4，优化代码开发体验：监听文件变化，变化后调用对应打包工具对代码进行重新打包，然后让浏览器重新运行（热更新）2，处理代码兼容性：比如babel语法降级，ts（将这类工具进行集合自动化处理）1，模块化开发的支持：允许直接从node——module引入代码。3，提高项目的性能：压缩文件，代码分割。
2023-09-06 23:30:25
167
原创 Git拉取远程其他分支
fetch到远程仓库test分支的最新commit记录到 ./git/FETCH_HEAD文件中,本地切换到test分支，没有的情况下会自动创建一个并且与远程关联。本地创建新分支test，拉取远程分支test，缺点会把新拉取的分支会与test分支合并；切换并且拉取远程test，创建一个分支test。假如是要拉取test分支。
2023-08-30 17:16:34
340
原创 Pnpm,npm,yarn
node_modules第一层还有一个axios，他里面也有node_modules，是软连接，指向.pnpm（硬连接就是同一个文件的不同引用，而软链接是新建一个文件，文件内容指向另一个路径）ps:路径过长的限制本质上是不能有太深的目录层级，现在都是各个位置的目录的 link，并不是同一个目录，所以也不会有长度限制。当使用 npm 或者yarn时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么， 你在硬盘上就需要保存 100 份该相同依赖包的副本（yarn，拷贝了缓存的包）。
2023-08-30 16:43:23
1284
原创 mac，nvm管理node版本，使用use切换node版本不成功
Nvm list 里面有个system 就是你之前下载node的版本号，并且默认为它，nvm修改不了版本号。使用nvm切换node版本失败的原因在于你在下载nvm之前就下载了node。使用nvm alias default v18.16.1。这时你再看，终端node的版本就为18.16.1了。给nvm默认版本设置为18.16.1。然后再nvm use 18.16.1。
2023-07-20 14:26:08
1775
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人