面试概念题

instanceof只有字符串、数值、布尔用new String(), new Number(),new Boolean(),声明的为true用字面量声明为false
一、输入完网址按下回车，到看到这个网站这个过程发生了什么？

1. 域名解析
2. 发起TCP的3次握手
3. 建立TCP连接后发起http请求
4. 服务器端响应http请求，浏览器得到html代码
5. 浏览器解析html代码，并请求html代码中的资源
   6.浏览器对页面进行渲染呈现给用户

二、请列举前端性能优化策略
首屏加载时减少HTTP请求
图片与组件懒加载
图片等静态资源合并
压缩JS和CSS代码
减少DOM操作
使用CSS Sprint，雪碧图

三、js有哪些内置对象
Arguments 函数参数集合
Array 数组
Boolean 布尔对象
Error 异常对象
Function 函数构造器
Math 数学对象
Number 数值对象
Object 基础对象
RegExp 正则表达式对象
String 字符串对象
Date日期对象

四、h5有哪些新特性移除了哪些元素？如何处理H5新标签的浏览器兼容性的问题，如何区分html和html5？
新特性:
(1) 语意特性,添加 header nav 等标签
(2) 多媒体， 用于媒介回放的 video 和 audio 元素
(3) 图像效果，用于绘画的 canvas 元素，svg元素等
(4) 离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
(5) 设备兼容特性 ，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连
(6) 连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验， 更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event 和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推 送”到客户端的功能
(7) 性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在 多样化的环境中更快速的工作

移除的元素:
纯表现的元素：basefont，big，center，font, s，strike，tt，u
对可用性产生负面影响的元素：frame，frameset，noframes

如何处理兼容问题：
支持HTML5新标签：IE8/IE7/IE6支持通过 document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5
新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）

如何区分：
DOCTYPE声明、新增的结构元素、功能元素

五、iframe和frame的区别
frame不能脱离frameSet单独使用，iframe可以
frame不能放在body中,否则不能正常显示
frame不能和body同时使用 iframe可以和body同时使用
嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用
frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制
iframe 可以放到表格里面。frame 则不行。
iframe是活动帧， 而frame是非活动帧

六、iframe的优缺点
iframe是一种框架，也是一种很常见的网页嵌入方式
iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

七、web storage 和cookie的区别
1、存储大小不同
cookie的大小不能超过4K；WebStorage也是有大小限制的，不过比cookie大很多，5M或更大
2、数据有效期不同
（1）、sessionStorage ：更在当前浏览器窗口关闭前有效。
（2）、localStorage ：始终有效，即使窗口被关闭也有效。需手动清除。
（3）、cookie ：在设置cookie时，设置的过期时间前都是有效的，即使关闭了浏览器。
3、作用域不同
（1）、sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面。
（2）、localStorage 和cookie ：在所有同源窗口都是共享的。
4、webStorage支持事件通知机制，可以将数据更新的通知发送给监听者
5、cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递

七、js中的定时器有哪些？他们的用法及区别？
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
clearTimeout(timer)：取消由setTimeout()设置的定时操作。
clearInterval(timer)：取消由setInterval()设置的定时操作。

八、什么是ajax
AJAX就是一种利用 JavaScript 向服务端发起请求，并获得服务端响应的技术。它的特点是异步请求，局部刷新。
通过 AJAX 技术，服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此服务端的负荷也减少了许多。

九、vue和Angular、ReactJS的相同点和不同点

十、v-if和v-show指令有什么区别？什么时候用v-show，什么时候用v-if？
1.v-if 根据条件渲染，它会确保在切换过程中条件块内的组件销毁和重建
2. v-if如果在初始渲染时条件为假，则不会渲染条件块，直到条件变为真时，才会开始渲染条件块。
3. v-show 不管初始条件是什么，元素总是会被渲染，只会根据条件的真假，在display:block 和display:none 之前切换
4. 当出现v-show 以及v-if 不生效，没有根据数组中的值的变化而变化时，请检查数组中的值的变化是否是通过Vue.set来执行修改,例如：
以下代码中

使用这种方式修改数字中的元素的值是错误的
items[0].isShow=true;
正确的写法应该如下
item=items[0]
Vue.set(item,“isShow”,true)
十一、如何阻止Vue中绑定的事件不发生冒泡
.stop
.prevent
e.cancelBubble = true; //IE浏览器取消事件冒泡
e.returnValue = false; //IE浏览器取消事件默认行为；注意：不可用return false代替的,return false只能取消元素

十二、console.log([‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘10’, ‘11’].map(parseInt));
[1, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 9, 11]

十三、0.1+0.2 === 0.3 //false
浮点数计算是不精确的
console.log((0.1 * 10 + 0.2 * 10) / 10 === 0.3); //true

十四、伪数组
1、伪数组是一个对象

• 2、这个对象必须要有length属性
• 3、如果这个对象的length不为0，那么必须要有按照下标存储的数据
  // 不是伪数组
  var obj = {};
  var obj2 = { length: 3 };
  // 是伪数组
  var obj3 = { length: 0 };
  var obj4 = { 0: ‘888’, length: 1 };
  var obj5 = { 99: ‘abc’, length: 100 }
• 如何判断数据是不是伪数组：
• 1、不是对象直接干掉
• 2、是对象，没有length属性也干掉
• 3、有length，值必须是number类型
• 4、length值是number类型，并且值不为0，这个对象还得按照下标存储数据
• • 如何判断数据是不是真数组：
• 1、数据 instanceof Array
• 2、Object.prototype.toString.call( 数据 ) === ‘[object Array]’
• /
  /
• 伪数组转标准数组：
• Array.prototype.slice.call( 数据 )
• */

十五、浏览器默认行为
在form中按回车键就会提交表单
点击超级链接跳转刷新页面
浏览器中点击右键弹出快捷菜单
阻止浏览器默认行为的方法：
//标准
event.preventDefault();
//非标准
event.returnValue = false;
//兼容写法：
event.preventDefault
? event.preventDefault()
: event.returnValue = false;