Vue—可拖拽排序的虚拟滚动列表
背景 在工作中，有时候会遇到单个列表渲染成百上千条数据的情况，并且不能使用分页减少渲染的数据量。这种情况下网站的性能肯定会大打折扣，导致页面频繁出现卡顿。所以我们有必要了解对于一次性插入大量数据，如何提升渲染效率。 大数据列表渲染分析 数据渲染的方式 一次性全部渲染 时间分片 虚拟列表 优化思路 将列表数据使用Object.freeze()处理。一般来说列表...
Vue2 与 Vue3
生命周期 Vue2.x Vue3.x beforeCreate setup created setup beforeMount onBeforeMount mounted ...
Vue—依赖收集原理
响应式系统 每个组件实例都有相应的 Watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 Watcher 重新计算，从而使它关联的组件得以更新。 这里有三个重要的概念 Observe、Dep、Watcher： Observe 类主要给响应式对象的属性添加 getter/setter 用于依赖收集与派发更新 Dep...
Vue—slot 跨组件传递
父组件 Parent.vue <template> <div class="parent"> <Child> <span #slot1="{ item, index }"></span> <span #slot2="{ item, index }"></span> ...
前端安全
XSS XSS(Cross-site scripting) 是一种网站应用程式的安全漏洞攻击，是代码注入的一种。它允许恶意使用者将程式代码注入到网页上，其他使用者在观看网页时就受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言 XSS 攻击分为三种：反射型，存储型，DOM-based 攻击方式 XSS 通过修改 HTML 节点或者执行 JS 代码来攻击...
前端性能优化
从 URL 输入，到页面完全展示，整个过程性能消耗 HTTP 层面优化 DNS 解析 DNS 实现域名到 IP 的映射，通过域名访问站点，每次请求都要做 DNS 解析。一般采用 DNS Prefetch，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样当用户点击网页中的链接时就无需进行 DNS 解析，减少用户等待时间 <!-- 只有部分浏览器支...