baixinL

2021年6月28日

摘要： webpack4 tree sharking 基于es6的export inport 没使用到的代码，去掉不想被tree sharking 的文件，在package,json中配置 sideEffects配置注意Babel默认配置的影响， ’@babel/preset-env':{modules 阅读全文

posted @ 2021-06-28 08:24 baixinL 阅读(60) 评论(0) 推荐(0)

字体优化

摘要：字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁 flash of invisible Text(foit) 不显示--显示 flash of unstyled Text(fout) 先显示--换字体 font-display ie不支持默认值： auto 引入字体：@font-face un 阅读全文

posted @ 2021-06-28 07:41 baixinL 阅读(317) 评论(0) 推荐(0)

2021年6月27日

图片加载的优化

摘要：图片的懒加载（loading lazy）原生的：<img loading="lazy" src="xx" /> 插件：react-lazy-load-image-component （github） baseline jpeg 行扫描型图片，（自上而下的出现图片内容） progressive jp 阅读全文

posted @ 2021-06-27 21:02 baixinL 阅读(89) 评论(0) 推荐(0)

图片格式优化

摘要：合适格式，合适尺寸，智能大小，合理的压缩，懒加载，未显示的用低品质的图片格式 jpg 有损压缩，色彩保存的比较好缺点：压缩比比较大，纹理型的图不适合jpg压缩，有锯齿使用场景：色彩型图片工具:imagemin jpg压缩文件的工具（npm）, 参考：https://github.com/Kl 阅读全文

posted @ 2021-06-27 20:38 baixinL 阅读(132) 评论(0) 推荐(0)

渲染优化

摘要：性能检测工具 webpagetest：https://www.webpagetest.org/(测试功能需要fanqiang) lighthouse：npm全局安装，或直接使用chrome devtools的lighthouse performance: chrome devtools的perfor 阅读全文

posted @ 2021-06-27 09:47 baixinL 阅读(195) 评论(0) 推荐(0)

2021年6月23日

Restful API

摘要： Restful API 设计：/api/list/2 传统传参方式基本臃肿 https://xxx/getWeather?city=深圳得传两个参数给后台用RESTful方式设计接口你可能会这么设计 GET https://xxx/weathers/深圳 GET /orders/1 ：返回订单编阅读全文

posted @ 2021-06-23 15:39 baixinL 阅读(39) 评论(0) 推荐(0)

事件冒泡

摘要： e.stopPropagation(); // 阻止事件冒泡事件代理：依靠事件冒泡当给一个列表的每个元素去绑定事件监听函数时，会占用一定的内存。这时候可以把事件绑定其父元素上。 const div1 = document.getElementById('div'); div1.addEventL 阅读全文

posted @ 2021-06-23 15:02 baixinL 阅读(35) 评论(0) 推荐(0)

DOM性能

摘要： DOM操作非常"昂贵"，避免频繁的DOM操作。 1.对DOM查询做缓存。 2.将频繁操作改为一次性操作。可以使用文档片段节点处理完dom的片段变化，再添加到dom结构中： // 创建一个文档片段 const frag = document.createDocumentFragment(); // 阅读全文

posted @ 2021-06-23 14:38 baixinL 阅读(68) 评论(0) 推荐(0)

获取dom节点的所有子节点

摘要：节点： div1， div1的所有子节点：div1.childNodes 阅读全文

posted @ 2021-06-23 14:37 baixinL 阅读(464) 评论(0) 推荐(0)

获取dom节点的父节点

摘要：获取dom节点的父节点节点：div1 div1的父节点：div1.parentNode 阅读全文

posted @ 2021-06-23 14:36 baixinL 阅读(349) 评论(0) 推荐(0)

公告