归档: 2020 | iamfugui' 小屋

分享工作，分享生活，给世界留下足迹

subtitle

2020

循循善诱长列表是什么样子什么是重绘什么是回流想图片懒加载使用addlisener scroll方法监听，图片加载完后，就不在需要监听了

2020-11-06 前端性能优化

性能优化卷

减少重绘回流: 使用变量缓存dom节点，不要频繁读取。通过DocumentFragment或innerHTML批量操作dom dom隐藏，或复制到内存中，类似vitual dom，进行修改，完成后再替换回去动画元素一定要abs

2020-11-06 前端性能优化

性能优化卷渲染优化

1.响应式图片大分辨率用大图，小分辨率用小图 .banner{ background-image: url('/static/large.jpg'); } @media screen and (max-width

2020-11-06 前端性能优化

性能优化卷图片优化

1.长列表后端返回一万条数据，使用长列表技术 2.webpack打包，项目的html、css、js、图片压缩打包，排除掉项目不需要加载的空格、回车、注释 3.服务端渲染，加载完html直接渲染，减少白屏时间（看项目情况）

2020-11-06 前端性能优化

性能优化卷首屏优化

1.keep-alive缓存组件 2.路由懒加载 3.合理使用 v-if v-show computed watch methods 4.Object.freeze：冻结对象纯展示类的接口数据，冻结就可以了在 Vue 的文档中介绍数据

2020-11-06 前端性能优化

性能优化卷 Vue优化

注意，官方并没有vue2的使用文档，以下展示的是swiper直接使用，下载5版本，Vue2对这个版本支持好 cnpm i swiper@5

2020-11-06 前端组件

卷 vue swiper vue2

            
4 / 8