每日前端签到（第五十七天）

第五十七天（2018-09-29）

• html] 有使用过HTML5的拖放API吗？说说你对它的理解
• [css] 手动写动画最小时间间隔是多少，为什么？
• [js] 有用过HTML5的WebWork吗？它主要解决了什么问题？
• [软技能] 说说你对同构和SSR的理解

题目一：
图片默认自带拖拽功能，非图片元素设置draggable属性为true即可拖拽。
被拖拽元素的事件：
ondragstart 拖拽的一瞬间触发
ondrag 拖拽期间连续触发
ondragend 拖拽结束触发
目标元素事件（将拖拽元素释放的地方）：
ondragenter 进入目标元素触发（鼠标光标进入）
ondragover 进入离开目标元素连续触发
ondragleave 离开目标元素触发
ondrop 在目标元素上释放鼠标触发
默认状态下，一个元素不能放在另一个元素上面，需要在ondragover上阻止默认事件。
题目二：
一般浏览器的刷新频率为每秒60次，所以最小事件间隔为 1/60*1000 约 16.7ms
极简的动效，而非动画，animate.css 也能满足一定场景下的使用。
做动画嘛，大多会结合 css 的 transition 来做的，比如 clip.js 那种，或者 velocity.js / jquery.transit.js 这种。
但如果是 canvas 这类无 dom 动画，多半就是 requestAnimationFrame 了。

至于 1e3 / 60 这玩意，它与函数调用栈以及 event loop 有点关系，
最佳状态当然是它，但也会可能在两次渲染周期时才真正渲染。
具体可看下面这两个讲 event loop 的视频：
https://www.youtube.com/watch?v=8aGhZQkoFbQ
https://www.youtube.com/watch?v=u1kqx6AenYw
手写动画推荐使用 requestAnimationFrame API，他会根据浏览器性能自动使用合理的间隔，而且时间远远比自己写时间间隔要准确（如果对动画精确度要求很高，setInterval 是不准的）。

题目三：
主要解决了单线程的问题 由于js执行环境是单线程 所以当处理cpu密集型问题时就没办法了 这时候就可以使用webwork开启一个子线程进行处理
题目四：
SSR和SPA不是相对概念
SPA对应的是MPA,即多页应用,指的是多个入口的前端应用.之前php之类的基本上是多页应用,路由是交给后端处理的.
SSR是server side rendering,对应的应该就是client side rendering.这里rendering指的是将数据填入前端模板的过程(大概,我自己想的).
不用SSR的话基本上是在客户端通过Api拉取数据然后通过不同的方式(之前的JQuery操作dom,现在react,vue的绑定)将数据呈现在页面上.
SSR的话是在服务器端就将数据呈现在了页面上.