本文是系列第四篇。系列文章： 现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用 现代图片性能优化及体验优化指南 - 响应式图片方案 现代图片性能优化及体验优化指南 - # 缩

说到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋

最近leetcode专门出了一个JavaScript专栏，里面是一些和javaScript相关的题目，基本上是问一些日常使用或经典的工具函数的内部实现。感觉挺有意思,所以就刷了一遍.

效果图普通轮播图卡片式轮播图堆叠式轮播图普通轮播图普通轮播图-演示普通轮播图-源码思路：如上图所示，假设有三张图片进行轮播，绿色区域是显示区域，其它部分都是隐藏的页面渲染时,会多选择两张图片，图中数字

1. 简单换肤，提供N种配色方案供用户选择，一般只对配色进行切换，比如禅道，它提供了蓝色、粉色、绿色等方案； 2. 个性化定制，可以自己定制主要颜色、阴影、边框等样式，个性化更强；

说好的教程终于来了，第一篇文章主要来说一说在开始写实际业务代码之前的一些准备工作吧，但这里不会教你 webpack 的基础配置，热更新原理是什么，webpack速度优化等等，有需求的请自行 google，相关文章已经很多了。 如图可见模块有很多，而且随着业务的迭代，模块还会会越…

1.目标场景 有时候上完线，用户还停留在老的页面，用户不知道网页重新部署了，跳转页面的时候有时候js连接hash变了导致报错跳不过去，并且用户体验不到新功能。 2.思考解决方案 如何去解决这个问题 思

setState 是同步还是异步？ 肯定是异步的呀。 确定么？那看一下这段代码会打印什么： 在 setTimeout 里修改了两次 state，并打印了 state 的值。 如果是异步的，那应该打印的

提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理