背景

公司大屏项目有一块地方用到了 el-carousel 组件，但是数据量比较大（3000多条），导致页面卡顿，所以需要对 el-carousel 组件进行优化。

思路方案

利用虚拟列表技术，每次只渲染可视区域的数据，不可视区域的数据不渲染，这样就可以减少渲染的数据量，提高渲染性能。

具体思路是，不论自动轮播还是手动点击指示器，都会触发 el-carousel 的 change 事件，我们可以在 change 事件中获取当前可视区域的数据，然后将数据传给 el-carousel 组件，这样就可以实现虚拟列表的效果。

起因

后端表示实际生产环境下某个大屏页面经常 CPU 处于满负荷状态，页面呆太久还容易出现卡顿，需要排查下什么原因并解决。

原文链接：https://ishadeed.com/article/clip-path/

以前当我第一次学习 CSS clip-path 时，我花了比预计更多的时间，并且也很难记住它。我不知道确切的原因，可能是因为我没有经常使用它吧? 不管怎样，我会和你一起重新学习它。

转载地址：https://segmentfault.com/a/1190000023362699

1
2
3
4
5

<span style="display: inline-block;width: 50px;>
    <p style="display: inline-block;white-space: nowrap;margin-left: 50%;transform: translateX(-50%);">
    黄浦哇哈哈乐百氏777哇哈哈很好的呀区
    </p>
</span>

要点：

1. 子元素要设置不换行，并且是个内联块级元素，这样文本就拥有了实际宽度。
2. 基于父元素50%宽度向右平移，将基准点定位在父元素中心点，即margin-left: 50%。
3. 基于文本自身的宽度向左偏移一半的文本长度，即transform: translateX(-50%)。

起因

接到一个需求是实现 Chrome 浏览器自带的「Ctrl+F」搜索功能。起初想当然的以为直接正则+replace 不就搞定了么。但后边发现直接粗暴的 innerHTML + replace 会导致 Vue 的响应式以及事件绑定都失效。所以得想其他的法子。

包管理器的介绍

npm 简史

在npm@3之前,如下图：

从上面可以看到，包是一层一层的安装的。那么这样会有些问题。

最近接了个需求要实现 Chrome 的查找功能，也就是在当前页全局搜索高亮输入的关键词，可以上下翻阅，和 Chrome 自带的 Ctrl + F 功能一样。

今天创建 Vue 项目时，偶尔发现生成的默认页面能根据系统主题色做出相应改变。

介绍

这次是利用架子搭箭chrome插件，提高开发效率。这次使用到的插件是 crxjs，它能够快速、便利的帮我们搭好一个开发 chrome 插件的初始化项目。

转载自：https://www.jianshu.com/p/54cc04190252

一、前言

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。