响应适配
@vw_fontsize: 14;
@vw_base: 375;
html {
font-size: (@vw_fontsize / @vw_base) * 100vw;
}
阴影效果
.className{
filter: drop-shadow(2px 4px 8px #3723a1);
}
Jest 单元测试
版本号中的~/^
theme: cyanosis
如果说人生是一场旅行，那一辈子会遇见很多人，每一个人都有一段故事。他叫什么我已经不记得了，太久远了，初中的时候。只记得那天是一个雨很大的早晨，被困食堂的我，看着人越来越少，没有带伞的我很是无助，突然看到那个经常捉弄我的男生跑了过来把伞给我，匆匆的跑进了雨中钻到了其他几个男生的雨伞下挤成一团。泪目，从没感受过同学的这般关怀，更不会想到会是这个调皮的同学。虽然后来我们没有什么交集，但忘不了那一幕，他跑向雨中的背影，谢谢这个带过温暖来的同学。
防抖
一直老是混淆防抖和节流，通俗的讲，防抖防抖就是防止抖动，只有你停止抖动，一段时间后才触发事件。 实现的代码：codepen.io/carrie-123/…
应用常景："点击按钮过快"， "调整浏览器窗口大小时，resize 次数过于频繁", “文本编辑保存时”
节流
在不断的触发事件情况下，它会在相同时间间隔中只触发一次，给你节约性能的流失，限流。实现代码：codepen.io/carrie-123/…
应用常景：scroll 事件（滚动），浏览器播放更新进度条 补充一句：在不间断的触发事件情况下，防抖永远不会执行相应操作，而节流会在每个相同的时间段内执行一次
promise并发接口
常见多个异步全部成功处理之后，执行其他操作使用
Promise.all(promises: []).then(fun: function);
但是如果请求过多，比如十几万的http请求，可能会造成内存溢出。 为了实现并发且限制并发数，实现一个promise的调度器 实现代码为：codepen.io/carrie-123/… ，详情参考这位大佬的解析juejin.cn/post/685457…
补充：这还有一个解决promise并发的方案： github.com/timdp/es6-p…
position:sticky
position 属性指定了元素的定位类型。
- static:默认，没有定位
- fixed: 脱离文档流，相对浏览器窗口固定位置
- relative: 相对定位，相对正常位置
- absolute：绝对定位，脱离文档流，相对最近已定位的父元素，没有就相对html
- sticky：粘性定位，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
sticky 是比较陌生的，主要说一下，当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。效果查看链接：codepen.io/carrie-123/…
div {
position: -webkit-sticky;
position: sticky;
top: 0;
}
适配. amfe-flexible
前端性能优化关注指标：
白屏时间、首屏时间、整页时间、DNS时间、CPU占用率。
浏览器请求过程
重定向→拉取缓存→DNS查询→建立TCP链接→发起请求→接收响应→处理HTML元素→元素加载完成
优化性能方法
1.图片资源优化
雪碧图：
- 手动制作：www.toptal.com/developers/…
- 使用插件： webpack-spritesmith 网址 www.npmjs.com/package/web…
字体图标 icomoon, iconfont 使用WebP
- 网络传输性能检测工具——Page Speed
常用table
vxe-table
