Shadow DOM和Virtual DOM有什么区别？
- Shadow DOM 是Web Components标准，为Web组件提供了封装，Shadow DOM使得这些东西与主文档的DOM保持分离
- Virtual DOM 是 Rect/Vue等框架实现的虚拟DOM，其本质上是JavaScript对象，用于模拟DOM对象，在需要操作DOM的地方，先操作Virtual DOM，在render到真实DOM上，以达到更好的性能
meta的属性有哪些组成？说说它们的分别有什么作用？
charset
此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。
http-equiv
- content-language 指定页面使用的默认语言
- content-security-policy 它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
- default-style 这个属性指定了在页面上使用的首选样式表.
name
- author 就是这个文档的作者名称，可以用自由的格式去定义。
- description 其中包含页面内容的简短和精确的描述。 一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。
- generator 包含生成页面的软件的标识符。
- keywords 包含与逗号分隔的页面内容相关的单词。
- referrer 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。
移动端的性能优化有哪些方法？
- 首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
- 模块化资源并行下载
- inline 首屏必备的 CSS 和 JavaScript
- meta dns prefetch 设置 DNS 预解析
<!--cdn域名预解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >- 资源预加载:对于移动端首屏加载后可能会被使用的资源，需要在首屏完成加载后尽快进行加载，保证在用户需要浏览时已经加载完成
- 尝试使用 PWA 模式
- 图片压缩处理
- 使用较小的图片，合理使用 base64 内嵌图片
- 使用更高压缩比格式的图片：webp格式
- 图片懒加载
- 使用 iconfont 代替图片图标
你有使用过HTML5的output吗？说说它的作用是什么？
兼容性：Internet Explorer 8 以及更早的版本不支持 标签。
属性：for form name
用法：与input标签，form标签联合使用
作用：在form监听oninput事件绑定关联的input值计算方法，输出计算结果。
- 定义表单输出
- 它有以下属性
- for:
定义输出域相关的一个或多个元素 - form:
定义输入字段所属的一个或多个表单 - name: 定义对象的唯一名称。（表单提交时使用）
- for:
- Demo
<form id="form" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
</form>
=<output form="form" name="x" for="a b"></output>有些js库习惯在代码开头处添加分号有什么作用呢？除了分号还可以换成别的吗？
- 作用：防止压缩后，当前一个js文件末尾没有分号时，浏览器会把它们当成一条语句处理，引起错误
- 可以用
void!+~代替
举例说明js拖拽用到的事件有哪些？
传统方式
- PC：
mousedonw``mousemove``mouseup - 移动端：
touchstart``touchmove``touchend - 原理：通过计算坐标的方式来实现元素的可视化移动。
- PC：
HTML5原生拖拽
dragstart``drag``dragenter``dragover``dragleave``drop``dragend- 原理：通过对被拖动元素和拖动目标元素进行事件监听，实现拖动效果
区别
- 传统方式是实现元素的实时移动，HTML5原生拖拽事件是体现元素的拖拽结果，需要确定拖拽的目标区域，如应用于拖拽上传。
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .tra { width: 70px; height: 70px; position: fixed; background: red; } .drag { width: 80px; height: 80px; background: blueviolet; } #dragTarget { width: 200px; height: 200px; border: 1px solid; } </style> </head> <body> <!-- HTML Draggable --> <div class="drag" id="drag" draggable="true"></div> <div id="dragTarget"></div> <!-- 传统的拖拽 --> <div id="tra" class="tra"> </div>
<script>
// 传统的拖拽
; (function () {
var tra = document.querySelector('#tra');
var startPoint = Object.create(null);
var isStartMove = false;
const addUnit = num => num + 'px';
tra.addEventListener('mousedown', e => {
isStartMove = true;
startPoint = {
x: e.offsetX,
y: e.offsetY,
}
});
window.addEventListener('mousemove', e => {
if (!isStartMove) return;
tra.style.left = addUnit(e.clientX - startPoint.x);
tra.style.top = addUnit(e.clientY - startPoint.y);
});
window.addEventListener('mouseup', e => {
isStartMove = false;
startPoint = {
x: 0,
y: 0,
}
});
})();
// HTML5拖拽事件
;(function() {
var dragEl = document.querySelector('#drag');
dragEl.addEventListener('dragstart', e => {
e.dataTransfer.setData("Text",e.target.id);
e.dataTransfer.effectAllowed = 'copyMove';
});
var dragTargetEl = document.querySelector('#dragTarget');
dragTargetEl.addEventListener('dragenter', e => {
e.preventDefault();
});
dragTargetEl.addEventListener('dragover', e => {
e.preventDefault();
});
dragTargetEl.addEventListener('drop', e => {
e.preventDefault();
var id = e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(id));
})
})();
</script>
</body>