【每日N题】0111
1. label for 的用处？
label是为input元素服务的标签，为其定义标记，for属性规定label与哪个具体的表单元素绑定，对应input标签的id属性
示例：点击label的时候会聚焦到input上
<!DOCTYPE html> <html lang="en"> <head> <title>Label测试</title> </head> <body> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br/> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> <form> <label for="userName">姓名</label> <input type="text" name="userName" id="userName" /> <br/> <label for="psd">密码</label> <input type="password" name="psd" id="psd" /> </form> </body> </html>
2. img的data-src属性及懒加载
图片懒加载：在访问页面的时候，先把img元素或其他元素的背景图片替换成一张大小为1*1px的图片路径，（只用发送一次请求）当图片出现在浏览器的可视区域内的时候，才设置图片真正的路径，让图片显示出来。
创建一个自定义属性data-src存放真正需要显示的图片路径，src存放一张大小为1*1px的图片路径，当页面滚动到图片可视区域的时候用js取该图片的data-src赋值给src
3. HTML data-*属性
data-*属性用于存储页面或应用程序的私有自定义数据
data-*属性赋予我们所在html元素上嵌入自定义data属性的能力
存储的自定义数据能够被页面的js利用，以创建更好的用户体验（不进行ajax调用或服务端数据库查询）
4. CSS display: block inline inline-block 区别
（1）block会独占一行，多个block元素会各自新起一行，默认情况下，block元素宽度自动填满父元素宽度，block可以设置宽高属性和margin、padding属性
（2）inline不会独占一行，多个行内元素会排列在同一行，直到一行排不下才会换新的一行，宽度随元素内容的变化而变化。设置宽高无效，可以在水平方向产生边距效果，竖直方向不会
（3）inline-block呈现效果类似于inline但是可以设置宽高属性
5. 三栏纵列布局，宽度一样，怎么实现
（1）flex实现
<!DOCTYPE html> <html lang="en"> <head> <title>三栏布局宽度一样</title> </head> <body> <style> body { display: flex; } div { height: 100px; } .a { flex: 1; background-color: red; } .b { flex: 1; background-color: blue; } .c { flex: 1; background-color: green; } </style> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
（2）grid实现
<!DOCTYPE html> <html lang="en"> <head> <title>三栏布局宽度一样</title> </head> <body> <style> body { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; } div { height: 100px; } .a { background-color: red; } .b { background-color: blue; } .c { background-color: green; } </style> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
6. JS的输出顺序
考察js的单线程特性，setTimeout属于异步操作，for循环执行完毕前，每次遍历产生一个setTimeout操作，被放在队列中等待执行，直到同步过程执行结束，才执行依次setTimeout，此时i变成4了
for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); //输出：4,4,4 },0) }
如何产生1、2、3的输出结果
（1）使用ES6的let
//将var变为let for(let i=1; i<=3; i++){ setTimeOut(function(){ console.log(i); //输出的结果为1，2，3 },0); }
（2）使用立即执行函数
for(var i=1; i<=3; i++){ !function(i){ setTimeOut(function(){ console.log(i); //输出的结果为1，2，3 },0); }(i) }
7. 为什么要有虚拟DOM节点，直接操作DOM节点的问题在哪里？
虚拟DOM：对复杂的DOM结构提供便捷的工具，最小化的进行DOM操作。
虚拟DOM不会进行重绘和回流，在虚拟DOM中进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后在真实DOM中进行重绘和回流，见着过多的DOM节点重绘和回流的损耗。
真实DOM的重绘和回流效率相当低，虚拟DOM有效地降低了大面积的对真实DOM进行重绘和回流，因为通过比较差异，只渲染局部。
8. Vue 的插件怎么注册，插件接口该怎么设计？【X】
https://www.cnblogs.com/adouwt/p/9211003.html
9. 设计一个v-dom和渲染函数【X】
10. 输入一个url到显示页面会发生什么？
11. 怎么使用CDN缓存加速？
12. 浏览器怎么渲染html、css、js哪个会先渲染？
13. js同步代码要loop很久，会不会阻塞后面代码的执行？
14. d3.js和vue怎么一起用？ 【X】
https://www.cnblogs.com/wuvkcyan/p/8975105.html
