1.关于if（）的数据类型转换
0false 1true
2.this的指向
this的值要等到代码真正执行时才能确定
同时this的值具体有以下几种情况：
1.new 调用时指的是被构造的对象
2.call、apply调用，指向我们指定的对象
3.对象调用，如执行obj.b()，this指向obj
4.默认的，指向全局变量window(相当于执行window.fun())
3.NOSCRIPT标签
用来定义在脚本未被执行时的替代内容
4.AMD&CMD
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
2. CMD 推崇依赖就近，AMD 推崇依赖前置。
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
5.Onload页面加载时间计算
页面的性能指标详解：
白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止
首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间
用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作
总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间
6.如何规避javascript多人开发函数重名问题。
7.解释性语言和编译性语言的定义：
计算机不能直接理解高级语言，只能直接理解机器语言，所以必须要把高级语言翻译成机器语言，计算机才能执行高级语言编写的程序。
翻译的方式有两种，一个是编译，一个是解释。两种方式只是翻译的时间不同。
解释性语言的定义：
解释性语言的程序不需要编译，在运行程序的时候才翻译，每个语句都是执行的时候才翻译。这样解释性语言每执行一次就需要逐行翻译一次，效率比较低。
现代解释性语言通常把源程序编译成中间代码，然后用解释器把中间代码一条条翻译成目标机器代码，一条条执行。
编译性语言的定义：
编译性语言写的程序在被执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件，以后要运行的话就不用重新翻译了，直接使用编译的结果就行了（exe文件），因为翻译只做了一次，运行时不需要翻译，所以编译型语言的程序执行效率高。
8.时间戳与时间日期的相互转换
将日期格式转换成时间戳： // 有三种方式获取
var date = new Date('2014-04-23 18:55:49:123');
var time1 = date.getTime(); // console.log(time1);//1398250549123
var time2 = date.valueOf(); // console.log(time2);//1398250549123
var time3 = Date.parse(date); // console.log(time3);//1398250549000
将时间戳转换成日期格式：
function timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
return Y+M+D+h+m+s;
}
timestampToTime(1403058804);
console.log(timestampToTime(1403058804));//2014-06-18 10:33:24
9.normalize&reset区别
共同点：都是重置样式库，增强浏览器的表现一致性
不同点：举个例子：ul
reset.css list-style:none ---因为需求
normalize.css 不会重置ul样式 ---本身已经在每个浏览器表现一致的元素
一句话：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素
10.v-model原理：
监听原生组件的事件,当获取到原生组件的值后把 值通过调用 $emit('input' ,data) 方法去触发 input事件
11.尽量用padding，慎用margin
12.javascript变量定义规则
第一个字符必须是一个 ASCII 字母（大小写均可），或一个下划线(_)。注意第一个字符不能是数字。
后续的字符必须是字母、数字或下划线。
变量名称一定不能是 保留字。
13.CSS Sprites
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
14元素
块级元素：div , p ,form, ul,li , ol, dl,form, address,fieldset, hr, menu, table
行内元素：span, strong, em,br,img,input, label, select, textarea,cite,
15.浏览器端：
cookie
WebStorage(localStorage、sessionStorage)
userData
indexedDB
服务器端：
session
16.dl自定义列表
<dl> <dt><dt> //自定义标题 <dd><dd> //自定义描述</dl>
17.获取被删除元素
this.splice(j, 1)[0]
18.Doctype作用 严格模式与混杂模式
（1）声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
19，Html语义化
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；
方便其他设备解析 便于团队开发和维护 有利于SEO
H5中的语义化标签<header> <section> <footer> <nav>
语义样式标签strong, em, ins, del, code
自然样式标签b, i, u, s, pre。 应该准确使用语义样式标签, 但不能滥用 , 如果不能确定时首选使用自然样式标签。
20 link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
21data-`属性
`data-`为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 `dataset` 属性获取，不支持该属性的浏览器可以通过`getAttribute` 方法获取
22.浏览器内核
主要分成两部分：渲染引擎 和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）
JS引擎则：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
23.label标签 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。提升了鼠标用户体验
24.src与href的区别
src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
25Websocket
WebSocket是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:a、事件驱动b、异步c、使用 ws 或者 wss 协议的客户端 socketd、能够实现真正意义上的推送功能
26.Alt 用于图片无法加载时显示 Title 为该属性提供信息，通常当鼠标滑动到元素上的时候显示
27.! important > <style></style> > ID > 类 > 标签 | 伪类 | 属性选择 > 继承 > 通配符
权重、特殊性计算法：
CSS样式选择器分为4个等级，a、b、c、d
(1)、如果样式是行内样式（通过Style=“”定义）1,0,0,0
(2)、b为ID选择器的总数 0,1,0,0
(3)、c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0
(4)、d为标签、伪元素选择器的数量 0,0,0,1
(5)、!important 权重最高，比 inline style 还要高
28.浏览器兼容问题
1.不同浏览器的标签默认的padding和margin。对标签的解释有些不一样
解决方案：CSS里 *{margin:0;padding:0;} 或者 引入nomallize.css
2.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
3.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
4.图片默认有间距 加了问题一中提到的通配符也不起作用。
解决方案：使用float属性为img布局
5.标签最低高度设置min-height不兼容
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
29.原型链
原型链
30.OSI模型
Http,Dns位于应用层
TCP，UDP传输层
IP网络层
31.margin标记可以带一个、二个、三个、四个参数，各有不同的含义。
margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
32.vue响应式原理
vue是采用数据劫持，并且使用发布-订阅者的开发模式。原理是观察者observer通过Object.defineProperty()来劫持到各个属性的getter setter，在数据变动的时候，会被observer观察到，会通过Dep通知数据的订阅者watcher，之后进行相应的视图上面的变化
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
vue 的响应式系统依赖于三个重要的类：Dep 类、Watcher 类、Observer 类。
Dep 类作为发布者的角色，Watcher 类作为订阅者的角色，Observer 类则是连接发布者和订阅者的纽带，决定订阅和发布的时机。
双向数据绑定
双向数据绑定就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，
数据绑定 ：发布者-订阅者模式（backbone.js）脏值检查（angular.js）数据劫持（vue.js）
虚拟dom
官网给出的概念：Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。
一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上
而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。
Virtual DOM
Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，
那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。
当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。
之后这些差别会应用在真实的DOM上。
Vue在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
React每当应用的状态被改变时，全部子组件都会重新渲染。这可以通过shouldComponentUpdate这个生命周期方法来进行控制。
33.MVVM设计思想
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
34vue生命周期的理解
创建前/后：
beforeCreate：此时的vue实例还没有挂载元素$el，数据对象data也是undefiend；
created：vue实例的数据对象data有了，但是$el还没有
载入前/后：
beforeMount：vue的实例的$el和data都初始化了，但还是挂载在之前虚拟的DOM节点上面，data.message还未替换
mounted :vue实例挂载完成，data.message成功渲染。
更新前/后 ：
在data发生变化的时候，会触发beforeUpdate和updated方法。
销毁前/后：
在destory之后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
errorCaptured 2.5.0+ 新增
keep-alive 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
35.vue实现按需加载配合webpack设置
webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。
不进行页面按需加载引入方式：import home from '../../common/home.vue'
进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
36.vuex的store属性值
state => 基本数据 .特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）
getters => 从基本数据派生的数据 mapgetter经常在计算属性中被使用
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
何时使用vuex 就像眼镜：您自会知道什么时候需要它。
vuex
37.前端安全问题：CSRF，XSS，SQL注入
跨站请求伪造(CSRF攻击)
CSRF攻击过程是受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到 B网站,然后B网站携带着的用户cookie信息去访问A网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是交易转账.
防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。
参考CSDN博客：CSRF的原理及防御措施
跨站脚本攻击(XSS攻击)
恶意攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击.
防御 XSS 攻击：1.输入过滤，2.对所有要动态输出到页面的内容，进行相关的编码和转义 3.白名单机制，开发者明确告诉客户端(浏览器)哪些资源可以加载并执行
38.caller和callee
caller 是返回一个对函数的引用，该函数调用了当前函数；
function a(){
b();
};
function b(){
alert(b.caller);
};
a(); //结果就是弹出函数a，b的属性caller调用当前函数b的函数引用a（就是指向当前函数b的父函数a）
callee是返回正在被执行的 function 函数，也就是所指定的 function 对象的正文
function chen(x){
if (x<=1) {return 1;
}else{
return x*arguments.callee(x-1);
};
};//arguments.callee相当于chen
39.浅拷贝和深拷贝
基本数据类型有哪些，number,string,boolean,null,undefined五类。
引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数等。
a.基本类型--名值存储在栈内存中
b.引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值
40.Promise
Promise 是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
Promise对象有以下两个特点。
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
promise
.then(function(data){ // success})
.catch(function(err){ // error});
参考:阮一峰es6文档
41.URL
url
案例
1.依次弹出4，4，4，4。当加载JS代码时for循环就开始了，onclick之前循环结束，i=4，所以点击都是弹出4
杂项
1.任何函数执行完一次，如果没有 return 返回值和声明变量接受返回值，都会立即消失，永远找不到值！
2.注意各种返回的东西是什么
3.js函数调用时加括号和不加括号的区别.不加括号相当于把函数代码赋给等号左边,加括号是把函数返回值赋给等号左边.
4.js中this的用法,this总是指向调用它的对象,倒数第二行的getColor为windows调用的,倒数第一行的getColor是test4399对象调用的
5.只有IE浏览器支持defer延迟加载方式（w3c）
6.DNS协议运行在UDP协议之上，使用端口号53，默认缓存为一天
网友评论