Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/qq_36251118/article/details/82801495
1. Why doctype
doctype是文档类型声它就是告诉浏览器，使用哪种规范来解释这个文档中的规范。你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式（各个浏览器在怪异模式下对各个元素渲染时有差异，因此会导致同一个样式在不同浏览器上看到的效果不同）。
浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的
标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
2.data-aname and aname What is the difference in the div element
自定义属性是H5中出现的，aname是元素属性，获取方式不同，自定义属性更语义化，便于维护
Difference 3.cookie and sessionStorage, localStorage of
区别如下：
1、保持状态：cookie保存在浏览器端，session保存在服务器端
2、使用方式：
（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。
3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)
4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。
5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。
The difference 4.on and addEventListener
onXXX与addEventListener都是为dom元素添加事件监听，使其在事件发生后执行相应的代码，操作
on会发生事件覆盖
addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
5. What is closure, bubbling, the difference between the IE and bubbling firefox
闭包:1.:函数嵌套函数，2.父层函数返回内部函数 3.保护函数内的变量安全。
作用：闭包让我们能够从一个函数内部访问其外部函数的作用域
冒泡：事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签
IE和firefox冒泡的区别:IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件
function stopHandler(event) {
//IE //firfox
window.event ? window.event.cancelBubble = true : event.stopPropagation();
}
IE采用事件机制，直接使用window.event
chrome,firefox不支持window.event,需要将event传入
var e=e||event;//兼容写法，前者使用当前传进来的，如果没有，就是用全局window.event
6. What is the scope
它是指对某一变量和方法具有访问权限的代码空间, 在JS中, 作用域是在函数中维护的。表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。
7.jquery and frames What is the difference (angular, vue)
jquery是基于操作DOM, 适用于操作DOM比较多的项目, jquery是一个库, 比较大,兼容大部分浏览器, 有丰富的插件, 可拓展性强
angular是mvc框架， angular中的双向数据绑定是基于脏检查机制
vue是mvvm框架，vue的双向邦定是基于ES5 中的 getter/setter来实现的
8.Jquery in (function ( ) And $ (function () {}) difference
(function($){})($)是将函数定义与执行写到了一起,而参数使用$符号 是为了避免不与其他库冲突
最大好处就是形成闭包 ,形成私有的概念,多用于Jquery插件开发,但是在函数内要减少Dom操作,此时还没有加载完Dom文档
而$(function(){}) ,就是加载完文档触发的函数
9. What is H5, which has new features
H5新标签
HTML5 中的一些有趣的新特性：
1）用于绘画 canvas 元素。
2） 用于媒介回放的 video 和 audio 元素。
3）语意化更好的内容元素，比如 article、footer、header、nav、section）
4）表单控件，calendar、date、time、email、url、search。
5）本地离线存储 （HTML5的离线储存）
localStorage 长期存储数据，浏览器关闭后数据不丢失；能维持在多个会话范围内
sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储，只能维持在当前会话范围内。
Under 10.ul three li, click on the pop-up sequence, respectively, 2, 3
var ulNode = document.getElementById("ul");
ulNode.addEventListener('click', function (e) {
if (e.target && e.target.nodeName.toUpperCase() == "LI") {
alert(e.target.innerHTML);
}
}, false);
11.js management tools
webpack,gulp,grunt
12. Performance Optimization
减少 HTTP 请求数
减少 DNS 查询
使用 CDN
避免重定向
图片懒加载
减少 DOM 元素数量
减少 DOM 操作
使用外部 JavaScript 和 CSS
压缩 JavaScript 、 CSS 、字体、图片等
优化 CSS Sprite
使用 iconfont
字体裁剪
多域名分发划分内容到不同域名
尽量减少 iframe 使用
避免图片 src 为空
把样式表放在 中
把脚本放在页面底部
13. What is a meta tag, which attributes and acts
一、语法：
<meta name="name" content="string">
二、参数解析：
1)name选项：Keywords(关键字)，description(网站内容描述)，author(作者)，robots(机器人向导)等等
2)http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。
3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。
1.添加对手机设备的支持
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">（禁止缩放）
2.兼容IE
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3.规定utf-8编码
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4.让搜索引擎搜索到关键字
<meta name="Keywords" content="网页关键字">
<meta name="description" content="网页描述文字" />
5.设置双核浏览器的浏览模式
<meta name="renderer" content="webkit">
<meta name=“renderer” content=“webkit|ie-comp|ie-stand”>（分别为极速模式，兼容模式，以
及IE模式）
6.产生特殊效果
< meta http-equiv="Page-Enter" content= "revealTrans(Duration=5.0,Transition=n)" >(n的取值范围为0-23)
7、标注作者：
<meta name="author" content="二度空间">
8、控制页面缓冲，如不要页面缓冲的代码这样写：
<meta http-equiv="Cache-Control" CONTENT="no-cache">
9.让网页每隔一段时间刷新一次，若要10秒刷新一次，代码这样写：
<meta http-equiv="refresh" content="10">
10.让一个页面过上一定的时间，自动转到另一个页面或者站点去，如：
< Meta HTTP-EQUIV="refresh" content="6; url=http://hi.baidu.com/tesalo/" >
content中的6表示时间，单位为秒，url=后面是你要转向的网址，若是与你当前网页在同一目录下，可以直接写上文件名，如：
< Meta HTTP-EQUIV="refresh" content="6; url=page1.htm" >