- 什么是web标准？
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。 - 请解释一下DOCTYPE的作用，有DOCTYPE和没有DOCTYPE有什么区别？
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
XHTML与HTML有什么区别
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式 呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准 模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS，如果选择了错误的DOCTYPE，那么页面就将以混杂 模式呈现，其行为就可能会有错误或不可预测。因此一定要在每个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD。写出3个使用this的典型应用
（1）在html元素事件属性中使用，如：
<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>（2）构造函数
function Animal(name, color) { this.name = name; this.color = color;}（3）input点击，获取值
<input type="button" id="text" value="点击一下" /><script type="text/javascript"> var btn = document.getElementById("text"); btn.onclick = function() { alert(this.value); //此处的this是按钮元素 }</script>(4)apply()/call()求数组最值
var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(this, numbers); console.log(maxInNumbers); // 458var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); console.log(maxInNumbers); // 458数组去重
// 方法一var norepeat = funtion(arr){ return arr.filter(function(val, index, array){ return array.indexOf(val) === index; });}norepeat()// 方法二var set = new Set(arr);数组求和
var sum = function(arr){ return arr.reduce(function(x, y){ return x + y });}sum()- 如何显示/隐藏一个DOM元素？
Display
visibility
Opacity JavaScript中如何检测一个变量是一个String类型？
function isString(str){ return (typeof str == "string" || str.constructor == String);}网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
function counter() { var date = new Date(); var year = date.getFullYear(); var date2 = new Date(year, 11, 30, 23, 59, 59); /*转换成秒*/ var time = (date2 - date) / 1000; var day = Math.floor(time / (24 * 60 * 60)) var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60)) var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60); var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60); var str = year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒"; console.log(str);}window.setInterval("counter()", 1000);补充代码，鼠标单击Button1后将Button1移动到Button2的后面.
<div><input type="button" id ="button1" value="1" onclick="moveBtn(this);"><input type="button" id ="button2" value="2" /></div><script type="text/javascript">function moveBtn(obj) {var clone = obj.cloneNode(true);var parent = obj.parentNode;parent.appendChild(clone);parent.removeChild(obj);}</script>JavaScript中如何对一个对象进行深度clone
方法一：
function deepClone(obj){ var str = JSON.sringify(obj); var newobj = JSON.parse(str); return newobj; }方法二：
//深克隆function deepClone(obj){ if (!obj) { return obj; } var o = obj instanceof Array ? [] : {}; for(var k in obj){ if(obj.hasOwnProperty(k)){ o[k] = typeof obj[k] === "object" ? deepClone(obj[k]) : obj[k]; } } return o;}鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）
<script type="text/javascript"> function elementName(evt){ evt = evt|| window.event; var selected = evt.target || evt.srcElement; alert(selected.tagName); } window.onload = function(){ var el = document.getElementsByTagName('body'); el[0].onclick = elementName; } </script>请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;function parseQueryString(argu){ var str = argu.split('?')[1]; var result = {}; var temp = str.split('&'); for(vari=0; i<temp.length; i++){ var temp2 = temp[i].split('='); result[temp2[0]] = temp2[1]; } return result;}如何点击每一列的时候alert其index?
<ul id=”test”> <li>这是第一条</li> <li>这是第二条</li> <li>这是第三条</li></ul>(function A() { var index = 0; var ul = document.getElementById("test"); var obj = {}; for (var i = 0, l = ul.childNodes.length; i < l; i++) { if (ul.childNodes[i].nodeName.toLowerCase() == "li") { var li = ul.childNodes[i]; li.onclick = function() { index++; alert(index); } } }})();- 请给出异步加载js方案，不少于两种
1）defer，只支持IE
2）async/await
3）创建script，插入到DOM中，加载完毕后callBack，见代码： 请设计一套方案，用于确保页面中JS加载完全
function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script);}loadScript('http:/xxx.min.js',function(){ alert('ok');})判断一个字符串中出现次数最多的字符，统计这个次数
方法一：利用json数据个数“键”唯一的特性
方法二、利用数组reduce()方法；同时应用一个函数针对数组的两个值(从左到右)。
方法三、利用正则表达式的replace对str的每一项进行检测
欢迎阅读：
2019年前端面试题-01
2019年前端面试题-02
2019年前端面试题-03
我是Cloudy，年轻的前端攻城狮一枚，爱专研，爱技术，爱分享。
个人笔记，整理不易，感谢阅读、点赞和收藏。
文章有任何问题欢迎大家指出，也欢迎大家一起交流前端各种问题！