整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前端开发来说，通过动画来提升交互效果是很常见的。在很早以前，做web动画主要通过javascript或者jquery或者flash这样的手段，非常麻烦，自打有了ccs3，做动画就太方便了，只需几行css代码就可以搞定。
这里我们就演示一个常见的循环滚动效果，任务是这样：先准备一个图片，平铺到页面上充满整个屏幕，然后就让画面一直向上循环滚动，形成无边无际的感觉。
虽然可以从网上搜到一些类似的代码，但是鱼龙混杂，无关紧要的代码非常多，不够纯粹。如果要弄明白动画的原理，只有自己动手做一遍才能真正消化吃透。所以我们来一步步原创这个代码，排除所有不必要的基础样式，只说要点，3个步骤你就可以完全掌握其精髓！
第一步：布局
首先，滚动的图片需要放在一个容器里，一行html代码即可完成：
第二步：把图片放进容器
css中body的边界设为0，把容器设高度100%以充满屏幕，再调用背景图pic.png
第三部：让画面动起来
咱不做标题党，循环滚动靠的就是3行css动起来的。
先是1行 -webkit-animation属性：4个参数分别表示：动画名称scroll，1秒时长，移动速度为线性的，无限循环。
然后是对应的关键帧 @-webkit-keyframes 属性，这是自己定义的动画规则，只需写2行规则即可：
原理：动画就是画从一个地方动到另一个地方。对普通滚动效果来说，有起点和终点这两个节点的位置就够了。所以我们用0%和100%分别表示起点和终点，指定2个背景图的xy位置坐标即可。图片会在规定时间内从起点移动到终点，并循环下去，数值是负表示是向上移动。320px正好是图片的高度，这样循环的时候是无缝衔接的。
好了，最终完整的代码如下，是不是很精练呢？保存成 index.html 即可
代码写完了，还要记得在当前目录要有pic.png这个图片哦，我随便画了几笔，绝无观赏性，建议自己找个好看点的图片来代替。
现在用浏览器打开index.html即可看到效果，比较魔性的地方在于，如果你盯着看久了，关闭窗口以后会出现幻觉，仿佛整个显示器都在向上飞，哈哈！
最后我们来说说浏览器兼容性问题：
大家可能注意到了，前面那2个古怪的 -webkit-animation, @-webkit-keyframes 这里的-webkit-其实是一个前缀，animation和@keyframes才是CSS的标准属性。
当加上-webkit-后，就形成了一个针对特殊浏览器的专有属性，表示用在谷歌的chrome和苹果的safari浏览器上。此外还有-moz前缀代表针对firefox浏览器的私有属性。
所以我们在用到css3的一些特性的时候，经常使用一大堆的重复性的代码，比如我们今天的这个代码，有人会写成这个样子：
一个简单的动画就要写这么多冗余的代码，为的只是支持一些旧的浏览器，有必要吗？为什么在这个例子中我们仅仅采用了-webkit-而没有使用其它专有属性呢？
因为现在已经是2019年了！谷歌苹果的浏览器是主流，占据了绝大部分，而其它小众浏览器也大多能够兼容他们，在版本上，大部分人安装浏览器是直接下载新版本安装使用，而非找出家里陈年的老软盘、老光盘去安装，家中的老电脑也早已升级不知多少回了，所以也几乎没有机会使用低版本的浏览器了！
至于微软的IE，就更别提了，IE9以前不支持动画的，只能用js或者jquery来写动画，直到IE10才支持css动画，随后IE被放弃，主推Edge，搞了几天越来越头大干脆也放弃，现在直接使用chrome内核了，所以针对ie的兼容性除非有特殊要求已经无需考虑。
你在网上能看到的范例代码，如果有写成那么复杂臃肿的，估计也都是3-5年前发的老文，或者抄来抄去不做思考的搬砖工留下的“初学者”笔记。
我们不仿测试一下几款主流浏览器的情况看看，结论：
测试结果表明，-webkit-的写法在4款不同内核的浏览器上都能正常使用，所以我们的代码因此能得以简化。
当然，这个例子也有局限性，比如你看，只有苹果safari不支持标准写法，万一将来他改邪归正了呢？毕竟标准写法才是众望所归不是？使用针对个别浏览器的私有属性写法，虽可用但毕竟有些怪怪的，将来怎么样还很难说呢。这样看来，如果使用古老的处理办法，重复N次为每个专属浏览器各写一份代码，除了辣眼睛也真没什么错。
浏览器的兼容问题涉及面实在是非常广，三言两语还真说不完，以后会专门来讲。
览器内核中有一个渲染进程，又名Renderer进程，我们页面的渲染，js的执行，事件的循环都在这一进程内进行，也就是说，该进程下面拥有着多个线程，靠着这些现成共同完成渲染任务。这个进程里面主要有一下几个线程：
1、 图形用户界面GUI渲染线程
2、JS引擎执行线程
3、定时触发器线程
4、异步HTTP请求线程
5、事件触发线程
浏览器Event Loop图：
示例代码：
1. 初始化状态都为空，浏览器控制台是空的的，调用堆栈也是空的
2. console.log(‘Hi’)添加到调用堆栈中
3. 执行console.log(‘Hi’)
4. console.log(‘Hi’)从调用堆栈中移除。
5. setTimeout(function cb1() { … }) 添加到调用堆栈。
6. setTimeout(function cb1() { … }) 执行，浏览器创建一个计时器计时，这个作为Web api的一部分。
7. setTimeout(function cb1() { … })本身执行完成，并从调用堆栈中删除。
8. console.log(‘Bye’) 添加到调用堆栈
9. 执行 console.log(‘Bye’)
10. console.log(‘Bye’) 从调用调用堆栈移除
11. 至少在5秒之后，计时器完成并将cb1回调推到回调队列。
12. 事件循环从回调队列中获取cb1并将其推入调用堆栈。
13. 执行cb1并将console.log(‘cb1’)添加到调用堆栈。
14. 执行 console.log(‘cb1’)
15. console.log(‘cb1’) 从调用堆栈中移除
16. cb1 从调用堆栈中移除
快速回顾：
在JavaScript中，任务被分为Task（又称为MacroTask,宏任务）和MicroTask（微任务）两种。它们分别包含以下内容：
MacroTask: script(整体代码), setTimeout, setInterval, setImmediate（node独有）, I/O, UI rendering
MicroTask: process.nextTick（node独有）, Promises, Object.observe(废弃), MutationObserver
需要注意的一点是：
在同一个上下文中，总的执行顺序为同步代码—>microTask—>macroTask
具体来说，浏览器会不断从task队列中按顺序取task执行，每执行完一个task都会检查microtask队列是否为空（执行完一个task的具体标志是函数执行栈为空），如果不为空则会一次性执行完所有microtask。然后再进入下一个循环去task队列中取下一个task执行，以此类推。
示例代码：
主程序和和settimeout都是宏任务，两个promise是微任务
第一个宏任务（主程序）执行完，执行全部的微任务（两个promise），再执行下一个宏任务（settimeout），所以结果为：
正确答案是
script start, script end, promise1, promise2, setTimeout
1. 进程：程序的一次执行, 它占有一片独有的内存空间
2. 线程： CPU的基本调度单位, 是程序执行的一个完整流程
3. 进程与线程
* 一个进程中一般至少有一个运行的线程: 主线程
* 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
* 一个进程内的数据可以供其中的多个线程直接共享
* 多个进程之间的数据是不能直接共享的
4. 浏览器运行是单进程还是多进程?
* 有的是单进程
* firefox
* 老版IE
* 有的是多进程
* chrome
* 新版IE
5. 如何查看浏览器是否是多进程运行的呢?
* 任务管理器==>进程
6. 浏览器运行是单线程还是多线程?
* 都是多线程运行的
1. 如何证明js执行是单线程的?
* setTimeout()的回调函数是在主线程执行的
* 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
2. 为什么js要用单线程模式, 而不用多线程模式?
* JavaScript的单线程，与它的用途有关。
* 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
* 这决定了它只能是单线程，否则会带来很复杂的同步问题
3. 代码的分类:
* 初始化代码（同步代码）
* 回调代码
4. js引擎执行代码的基本流程
* 先执行初始化代码: 包含一些特别的代码
* 设置定时器
* 绑定监听
* 发送ajax请求
* 后面在某个时刻才会执行回调代码
同步 同步执行完成才会去执行异步
异步 只要是异步的任务都会有自己的管理模块进行托管
异步任务： （分为：微任务 、宏任务）
回调
事件
定时器
ajax
生命周期回调函数
常见的微任务有：
常见的宏任务有：
注意：在微任务执行之后再执行宏任务。
1. 所有代码分类
* 初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
* 回调执行代码(异步代码): 处理回调逻辑
2. js引擎执行代码的基本流程:
* 初始化代码===>回调代码
3. 模型的2个重要组成部分:
* 事件管理模块
* 回调队列
4. 模型的运转流程
* 执行初始化代码, 将事件回调函数交给对应模块管理
* 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
* 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
理解：JavaScript事件执行队列：
将所有js事件依次放在一个执行队列里：
1.首先放入同步（事件）
2.再放入异步微任务（事件） 如：.then .catch 里的回调
3.再放入异步宏任务（事件） 如： 点击事件、setTimeout定时器
4.执行完以上事件 会进行一次GUI渲染。
GUI渲染线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时，该线程就会执行。
5.事件循环:
执行到异步微任务的时候 里面的回调一样会按顺序执行：
1.同步（事件）
2.异步微任务（事件）
3.再异步宏任务
4.再进行一次GUI渲染。
再执行到异步宏任务的时候 里面的回调一样会按顺序执行
1.同步（事件）
2.异步微任务（事件）
3.再异步宏任务
4.再进行一次GUI渲染。
最终完成事件的循环。
setTimeout(() => {
// 异步宏任务代码
console.log(`执行定时器setTimeout`);
}, 0)
new Promise(resolve => {
console.log(`执行Promise的resolve`); // 同步代码1
resolve(1)
}).then((val) => {
// 异步微任务代码
console.log(`执行Promise的then-${val}`);
})
for (let index = 0; index < 10; index++) {
// 同步代码2
console.log(`执行for循环${index}`);
}最终执行结果：
1 Promise的resolve 同步代码1 先执行
2 for循环 同步代码2 再执行 （无论循环多少次 都是同步代码就会比异步先执行）
3 then的回调 再执行 异步微任务代码 （异步中微任务 比 宏任务 先执行）
4 setTimeout 再执行 异步宏任务代码
欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。
在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
#2023年度创作挑战#
*请认真填写需求信息，我们会在24小时内与您取得联系。
