INTERVIEW
@code-char:"```"
code:before,code:after{
concent:@code-char;
background:red;
}
- JavaScript的typeof返回的数据类型
- object number function boolean underfind string
typeof isNaN => function
- object number function boolean underfind string
- javascript的数据类型
- 5种基本数据类型: string、number、boolean、null、undefined
- 1种复杂类型:object (复杂的键控集合) 属性的容器，属性值除undefined
- object包括: Object、Function、String、Number、Boolean、Array、Regxp、Date、Globle、Math、Error以及宿主环境提供的Object类型
- 检测数组的方式
- Array.isArray(arr); -----// es5
if(typeof Array.isArray==="undefined"){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]";
};
};
+ toString.call(arr); -----// ”[object Array]”
+ arr.constructor; -----// function Array() { [native code] };
+ arr instanceof Array; -----// 判断是否是某个构造函数的实例
- 事件流
- DOM事件流： 事件捕获阶段 =>目标元素阶段=>事件冒泡阶段
- 传统事件绑定:不支持事件流;绑定多次前面的被覆盖
- w3c:addEventListener/attachEvent
- 事件冒泡：事件开始由最具体的元素接受，然后逐级向上传播
- 事件捕捉：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
- DOM事件流： 事件捕获阶段 =>目标元素阶段=>事件冒泡阶段
- Javascript创建对象的几种方式
- 1.对象字面量、Object构造函数
- 2.纯构造函数
- 3.空构造函数+原型
- 4.混合构造函数+原型
- 5.动态原型
- 6.寄生构造函数
- 7.Object.create() -----// ES5 ie9+
寄生构造函数[1]
function SpecialArray(){
var values = [];
values.push.apply(values, arguments);
values.toPipedString = function(){
return this.join("|");
};
return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"
- 构造函数继承和原型链继承有什么区别
- 在原型中的方法消耗的内存更小，因为在内存中原型只有一个，其中的方法可以被所有的实例共享，实例化的时候并不会在内存中在复制一份，而构造函数中的方法每次都要再复制一份
- 构造函数中定义的属性和方法要比原型中的优先级高，如果定义了同名称的属性和方法，构造函数中的方法将会覆盖原型中的方法
- 如何阻止事件冒泡和默认事件
- e. stopPropagation(); -----// 标准浏览器阻止事件冒泡
- event.canceBubble=true; -----// ie9之前
- 弹出索引
// 方式一、事件对象
for(var i = 0; i < dom.length; i++) {
dom[i].onclick = function(e) {
var e = window.e || e;
var target = e.target || e.srcElement;
return target;
};
};
// 方式二、闭包实现
for(var i = 0; i < dom.length; i++) {
dom[i].onclick = (function (index) {
return function () {
return index;
};
})(i);
}
- 编写一个数组去重的方法
- 法一、
- 先创建一个空数组，用来保存最终的结果
- 循环原数组中的每个元素
- 再对每个元素进行二次循环，判断是否有与之相同的元素，如果没有，将把这个元素放到新数组中
- 返回这个新数组
- 法二、数组的indexOf()方法返回给定元素能找在数组中找到的第一个索引值，否则返回-1。
- 法一、
var removeMore = function(arr) {
var newArr = [];
for(var i = 0; i < arr.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]);
}
return newArr;
};
var arr = [1,3,3,4,6,0,8,6];
//方法1
function unqiue(arr){
var json = {};
var result = [];
for(var i=0;i<arr.length;i++){
//这里会遍历json的arr[i]属性 因为json为空 理所当然返回undefined
//所以当if满足！undefined 即为true的时候 给json的arr[i]的属性的值设定为1
//然后放入结果数组里 所以当arr数组中有重复的值时 if不满足条件 就不会添加到数组了
if( !json[arr[i]] ){
json[arr[i]] = 1;
result.push( arr[i] );
}
}
return result;
}
console.log(unqiue(arr));
//方法2
Array.prototype.unique1 = function() {
var a = [];var l = this.length;
for(var i = 0 ;i< l; i++)
{
for(var j = i + 1 ;j < l; j++) {
if (this[i] === this[j]) {j = ++i}
}
a.push(this[i]);
}
return a;
}
console.log(arr.unique1());
//方法3
Array.prototype.unique3 = function()
{
var n = []; //一个新的临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
};
- 深度克隆的方法
var json = {a:6,b:4,c:[1,2,3]};
function clone(obj){
var oNew = new obj.constructor(obj.valueOf());
if(obj.constructor === Object){
for(var i in obj){
oNew[i] = obj[i];
// 递归调用
if(typeof(oNew[i]) === 'object'){
clone(oNew[i]);
}
}
}
return oNew;
}
- 数组嵌套对象的排序
// 将arr按age属性降序排列
var arr = [
{"name": "wang","age": 18},
{"name": "liu","age": 34},
{"name": "wu","age": 57},
{"name": "qiu","age": 9},
{"name": "lie","age": 14}
];
// 1.冒泡排序法
function sequence(arr) {
for(var i = 0; i < arr.length; i++) {
for(var j = 0; j < arr.length; j++) {
if(arr[i].age < arr[j].age) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
};
};
return arr;
};
// 2.数组的**sort**方法
function sequence(arr) {
var down = function(x,y) {
return (x.age < y.age) ? 1 : -1;
};
arr.sort(down);
return arr;
}
// 多属性(键值)排序
var sequence = function(name,minor) {
return function (o,p) {
var a,b;
if(o && p && typeof o === 'object' && typeof p === 'object') {
a = o[name];
b = p[name];
if(a === b) {
return typeof minor === 'function' ? minor(o,p) : 0;
}
if(typeof a === typeof b) {
return a < b ? 1 : -1;
}
return typeof a < typeof b ? -1 : 1;
} else {
throw {
name : 'error';
};
}
};
};
- while方式获取页面中所有的checkbox
var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];//返回的所有的checkbox
var len = domList.length; //缓存到局部变量
while (len--) {
if (domList[len].type === ‘checkbox’) {
checkBoxList.push(domList[len]);
}
};
- undefined会在以下三种情况下产生：
- 一个变量定义了却没有被赋值
- 想要获取一个对象上不存在的属性或者方法
- 一个数组中没有被赋值的元素
- 将字符串提取成json格式内容
var url="http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx";
var str=url.substr(url.indexOf("?")+1);
var arr=str.split('&');
var obj={};
for (var i = 0; i < arr.length; i++) {
var arri = arr[i]; //a=1
var i2=arri.split("=");//["a","1"]
obj[i2[0]]=i2[1]; //obj["a"]="1";
};
- 求一个字符串的字节长度
function countByts(str) {
if(!arguments.length || !s) return null;
if("" === s) return 0;
var len = 0;
for(var i = 0; i < str.length; i++) {
if(str.charCodeAt(i) > 255) len += 2;
else len++;
};
return len;
}
- trim函数
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^s+/, "").replace(/s+$/,"");//s匹配空白字符：回车、换行、制表符tab 空格
}
}
// test the function
var str = "
test string ".trim();
alert(str == "test string"); // alerts "true"
- Javascript中callee和caller的作用？
- arguments.callee：获得当前函数的引用;callee是返回正在被执行的function函数，也就是所指定的function对象的正文(自定义的函数 fun)。
- caller是返回一个对函数的引用，该函数调用了当前函数;如果不是由其他函数调用的，那么返回值就是null
function fn(){
console.log(arguments.callee==fn); // true
console.log(fn.caller); // fn2
}
function fn2(){
fn(); //此时fn.caller就指向了fn2这个函数
}
fn2();
- 浏览器对象模型BOM里常用的至少4个对象，window对象的常用方法至少5个
- 对象：window document location screen history navigator
- 方法：alert() confirm() prompt() open() close()
- 查询字符串
- window.location.search 返回值：?name=wang&id=mysql (问号后面的字符串)
- window.location.hash 返回值：#age (锚点及之后的字符串)
- window.location.reload() 刷新当前页面
- BOM对象 window对象
- window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
- document对象，文档对象；
- location对象，浏览器当前URL信息；
- navigator对象，浏览器本身信息；
- screen对象，客户端屏幕信息；
- history对象，浏览器访问历史信息；
- bind(), live(), delegate()的区别
- bind： 绑定事件，对新添加的事件不起作用(不支持动态添加)，方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。
- live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。
- delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上。
- 简述link和import的区别？
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
- 原生方式转换URL的search为json对象
var getJson = function(str) {
var item;
var result = [];
// 只有一个键值对
if(search.indexOf("&") < 0) {
item = str.splite('=');
result[item[0]] = item[1];
}
// 多个键值对，以&符分开
else{
var splitArr = str.split('&');
for(var i = 0; i < splitArr.length; i++){
item = splitArr[i].split('=');
result[item[0]] = item[1];
};
}
return result;
}
- readyonly和disable的区别
- readonly只针对input(text / password)和textarea有效，
- 而disabled对于所有的表单元素都有效，当表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去
- ajax的工作原理
- Ajax通过XMLHttpRequest对象来向服务器发起异步请求，从服务器获取数据，然后用JavaScript来操作DOM元素而更新页面，也就是JavaScript可以及时向服务器提出请求和处理相应，而不阻塞后续代码的执行，达到无刷新页面就可以请求的效果。XMLHttpRequest是Ajax的核心机制。
- ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用接收的数据来局部更新当前页面
- ajax交互模型：
- 同步：脚本会停留并等待服务器响应然后继续
- 异步：脚本允许页面继续其进程并处理可能的回复
- 同步ajax有什么影响
-
异步加载js的方案
- defer：只支持ie
- async：
- 动态加载script标签，加载完了回调
/* 异步加载script方案 */ function loadSctipt (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 { // 其他浏览器 script.onload = function() { callback(); }; } script.src = url; document.body.appendChild(script); };
- ajax请求(请求和响应)
- 1.请求行:
xhr.open('get','index.php');(get可以不设置) - 2.请求头:
xhr.setRequestHeader('ContentType',text/html);===>告诉浏览器以何种方式解析 - 3.请求主体:
xhr.send(null); - 1.获取行状态(包括状态码&状态信息):
xhr.status & xhr.statusText - 2.获取响应头
- 获取指定头信息:
xhr.getRequestHeader('Content-Type'); - 获取所有响应头信息:
xhr.getAllRequestHeaders();
- 获取指定头信息:
- 3.响应主体:
xhr.responseText; || xhr.responseXML;
- 1.请求行:
// 创建一个xhr实例
var xhr = new XMLHttpRequest();
// 发起http请求
xhr.open('get','index.php');
xhr.send(null);
// 接收服务器响应
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200) {
// 接收到结果
var result = xhr.responseText;
}
};
- javascript的同源策略[2]
- 协议：http,ftp https
- 主机名；localhost 127.0.0.1
- 端口名：80:
- http协议的默认端口：80
- https:协议的默认端口是8083
- 同源策略带来的麻烦：ajax在不同域名下的请求无法实现;如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决
- 跨域解决方案
- 顶级域名相同的可以通过domain.name来解决,即同时设置domain.name = 顶级域名
- document.domain + iframe
- window.name + iframe
- location.hash + iframe
- window.postMessage()
参考资料:(http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html) - JSONP ---- JSON with Padding(只能以GET方式请求)
- 原理:其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。
- jsonp跨区解决
- img等标签:支持数据发送，不能拿到服务端数据
- link标签:link[ref="stylesheet"]
- script:
var script = document.createElement('script'); script.src = 'http://localhost:3000/?start=1&count=10'; // 服务端地址 document.body.appendChild(script); // 发送请求 /* 由于脚本执行完成过后才能拿到数据 */ // 1. script.addEventListener('load',function(){ result = data; }); // 2.被动的方式 function callback(data) { result = data; };
- HTTP状态消息
- 200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
- 302：请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的
- 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
- 403：服务器已经理解请求，但是拒绝执行它。
- 404：请求失败，请求所希望得到的资源未被在服务器上发现。
- 500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
- js数组类型中的常用方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| shift() | 删除并返回数组的第一个元素 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| slice() | 从某个已有的数组返回选定的元素 |
| reverse() | 颠倒数组中元素的顺序。 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| valueOf() | 返回数组对象的原始值 |
- Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象
- 运算符遇上未定义的变量
- 如果其中一个数是NaN，则结果就是NaN
- 如果乘积超过了ECMAScript设定的范围，那么就会返回Infinity、-Infinity
- 如果参与乘法运算的某个操作数不是数值，js引擎会先调用Number()将这个数变成一个数值类型，
- POST请求使用的情形
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
- 严格模式
- 全局变量显式声明；静态绑定；禁止使用with语句；eval中定义的变量都是局部变量
- 禁止this关键字指向全局对象；禁止在函数内部遍历调用栈 arguments.callee
- 严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除
- 正常模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，将报错。
- 严格模式下，对一个使用getter方法读取的属性进行赋值，会报错。
- 严格模式下，对禁止扩展的对象添加新属性，会报错。
- 严格模式下，删除一个不可删除的属性，会报错。
- 正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
- 正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。
- 正常模式下，整数的第一位如果是0，表示这是八进制数，比如0100等于十进制的64。严格模式禁止这种表示法，整数第一位为0，将报错。
- 不允许对arguments赋值
- arguments不再追踪参数的变化
- 严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的代码块内声明函数；if else while for 无法声明函数
- 严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。
- new 操作符的作用
- 1、创建一个空对象，并且 this变量引用该对象，同时还继承了该函数的原型。
- 2、属性和方法被加入到 this 引用的对象中。
- 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
- 模块化开发
- 模块化开发模式：浏览器端requirejs，seajs；服务器端node.js；ES6模块化；fis、webpack等前端整体模块化解决方案；grunt、gulp等前端工作流的使用
- 何检测一个变量是一个String类型
- typeof str
- str.constructor
- toString.call()
- 渐进增强和优雅降级之间的不同
- 优雅降级: (graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复)
- 渐进增强: (progressive enhancement，一开始只构建站点的最少特性，然后不断针对各浏览器追加功能)
- “优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。
- 什么是FOUC？你如何来避免FOUC？
- 由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏,用link加载css文件，放在head标签里面
- 前端页面的构成
- html结构层：为页面搭建框架
- css样式层：修饰页面
- js交互层：利用脚本代码为页面增加动态效果与交互
- HTML5新添加的标签
- 音频、视频、拖放、画布、SVG、地理定位、应用缓存、表单元素
<!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base>
<basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite>
<code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt>
<em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6>
<head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <keygen> <kbd> <label>
<legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol>
<optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script>
<select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table>
<tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u>
<ul> <var> <video> <wbr>
- position的值
- absolute:相对于自身原来的位子定位
- reletive:相对于有定位的父级或以上的盒子定位
- fixed:相对于body定位
- div横向排列的方法
- 浮动
- 前面的左浮动，最后的用overflow：hidden
- 全部左浮动
- 定位
- display：inline-block；(但是不好，中间还是有边隙)
- 浮动
- 数据传输类型：GET | | POST
- 从计算机数据类型传输（即信号传输）的话，分成CRC循环冗余码传输，差错校验等
- 文件数据类型传输，大多数都是二进制的形式
- js与后台交互的传输数据类型一般用字符串，数组，但更多是json来传输数据
- 面向对象模式：
- 就是面向对象编程：
-
三大作用(封装性、面向对象编程、描述数据)
-
三大特性（多态、继承、封装）
- 封装
- 继承:基于原型链的继承(其他都是通过类的形式继承)==>即拿来主义(1.原型式继承;2.组合式继承)
// 1.组合式继承 var o = {num : 123}; var obj = {age : 18}; for (var k in o) { obj[k] = o[k] }; //应用 Object.prototype.extend = function(obj) { for(var k in obj) { this[k] = obj[k]; } } // 2.原型继承(不提倡，因为太慢) 通过修改原型对象来实现继承 多继承很难维护，提倡单继承- 多态:用设计模式来模拟实现多态;js中因为他的动态特性，本身就支持
-
原型链
-
- 面向对象是对面向过程的封装(我们仍然做的是面向过程)
- 对象的本质就是键值对的集合，值类型称之为属性，函数称之为方法
- 把复杂的东西打包(方便维护，方便代码模块化，错误调试等);在开发大型项目的时候维护的时间会比开发的时候还大
- 面向过程是用函数来封装的；
- 就是面向对象编程：
- 面向对象创建模式：
- 单例模式
- 工厂模式
- 寄生模式
- 观察者模式
- 原型链
- 对象：foo、obj、Object.prototype（其余为函数对象）
- 实例对象的 _proto_ 指向相对应的函数原型对象(.prototype)
- 函数对象
- _proto_ => Function.prototype
- prototype => 相应的原型对象
- 原型对象
- Foo.prototype._proto_ => Function.prototype
- Function.prototype => Object.prototype
- Object.prototype => null
- constructor => 各自的构造函数
| 实例对象 | 构造函数 | 原型对象 |
|---|---|---|
| 基于构造函数实例化的对象 | 自定义构造函数 | 自定义构造函数原型对象 |
| foo | Foo | Foo.prototype |
| _proto_ | _proto_ | _proto_ |
| prototype | constructor | |
| 内置 函数对象 | 内置 函数原型对象 | |
| Function | Function.prototype | |
| _proto_ | _proto_ | |
| prototype | constructor | |
| 基于Object实例化的对象 | 内置 对象 | 内置 对象原型对象 |
| obj | Object | Object.prototype |
| _proto_ | _proto_ | _proto_ |
| prototype | constructor |
- 代码的优化
- 代码的重用
- 对内：模块化；对外：继承
- 避免全局变量（命名空间，闭包，模块化MVC（数据层、表现层、控制层））
- 拆分函数，避免函数的臃肿
- 闭包
- 块级作用域:js执行
- 边解释边执行。脚本语言的特性。在执行的时候预解析已经完了，就提升了变量
- 定义的变量被函数包裹着，被外界无法访问，就是闭包
- 在js中闭包要解决的就是如何访问(沙箱模式:把需要的变量挂在到window暴露出去)
- 无限递归的时候内存不够；因为每次调用都会生成一个新的变量；用闭包解决，将需要的值用函数包裹，只调用一次外界并接收，之后只调用内部函数；缺点:每次只能返回一个值；因此我们让返回值变成对象，打包将我们要的值用对象的形式全部返回(比返回数组有优势)
- 如何解决上述只读的方式，如何写？
set_key: function(params){ key = params; }- 沙箱是一个经典的应用场景
- 使用闭包完成一些功能的时候可以隐藏一些数据的特性(createCache函数)
- _display:inline解决ie的双边距问题
- 览器的内核
- IE: trident内核
- Firefox：gecko内核
- Safari:webkit内核
- Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
- Chrome:Blink(基于webkit，Google与Opera Software共同开发)
- 利用多个域名来存储网站资源会更有效
- CDN缓存更方便
- 突破浏览器并发限制
- 节约cookie带宽
- 节约主域名的连接数，优化页面响应速度
- 防止不必要的安全问题
- 对网页标准和标准制定机构重要性的理解
- 网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。
- cookies，sessionStorage和localStorage的区别
- sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
- Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
- 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
- src与href的区别
- src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
- src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
- 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
- href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，
- px和em的区别
- px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小
- 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
- BFC
- BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
- BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用
- Doctype的作用？严格模式与混杂模式的区别
- 用于告知浏览器该以何种模式来渲染文档
- 严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
- 混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
- window.top.document.compatMode查看当前模式
-
清除浮动的方式
- 给父盒子一个高度
- 在父盒子的下面添加一个同样高度的盒子
- 在父盒子的下面添加一个没有高度的盒子,并加样式
clear:both; - 添加一个
overflow:hidden;的样式- 只 父盒子 添加:上下margin会合并(大的有效:100+20=100)
- 父盒子 及 中间没有高度的盒子添加:上下margin全部生效(100+20=120)
- 只给下面的盒子添加该属性: margin不生效;同时该法可以做向右填充的效果
- 添加一个
clearfix的类:伪元素法;
.clearfix::before, .clearfix::after{ content: "."; display: block; height: 0; line-height: 0; visibility: hidden; clear: both; }
- 让盒子居中的方式
- 图片居中:
- 1)父盒子
display:table;2)子盒子display:table-cell;vertical-align:middle; - 2)图片下加一个行内块级元素(span),设置属性:
img{vertical-align;} span{height:100%;display:inline-block;vertical-align: middle;}
- 1)父盒子
- 盒子居中:
- 定位:--> 50% --> 负向移动小盒子的50%;
position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); <!-- margin:-100px, 0, 0,-100px; --> <!-- 子盒子大小的一半 -->
- 图片居中:
- 手机端实现0.5px
border: 1px solid red;
transform: scale(0.5) translate(-50%,-50%);
- 伪类最常用于哪里
(::before,::after{content:'';display:block;})
+
- 伪元素最常用于哪里(:empty、:target)
- 样式的控制
- 匿名函数常加一个名
- 方便递归调用
- 方便在错误信息里面可以看到哪里报错(匿名函数只报行号)
- 如何获取一给函数的形参列表
function foo(id,name,age,gender) {
};
var arr = /.+((.*))/.exec(foo.toString);
var newArr = arr[1].split(',');
// newArr里存的是形参的字符
// console对象的时候默认将其打印成tostring的形式
- 接口化开发
请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能，并且严格约束了请求参数和响应结果的格式，这样前后端在开发过程中，可以减少不必要的讨论，从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口只需要进行微调。
-
遍历数组
- every要求每一个元素都满足条件
- some要求某个元素满足条件
return arr.some(i => i>5) // 条件为真时候返回 - each
- forEach
- 不能在循环中删除或新增数组元素
// 定义一个空数组 var newArr = []; arr.forEach(i => { if(arr[i] !== m){ newArr.push(arr[i]); } })
- 后台传输的XML和JSON有什么区别？如何解析及优缺点
- XML使用DTD(document type definition)文档类型定义来组织数据，
- 优点:格式统一，符合标准；容易与其他系统进行远程交互，数据共享方便
- 缺点:文件庞大，格式复杂；解析繁琐，不易维护；客户端服务器解析方式不一致
- JSON轻量级数据交互(javascript object notation)
*
- XML使用DTD(document type definition)文档类型定义来组织数据，
- FF下实现outerHTML
function getOuterHtml(id) {
var ele = document.getElementById(id);
var newNode = document.createChild('div');
document.appendChild(newNode);
var clone = ele.cloneNode(true);
newNode.appendChild(clone);
return newNode.innerHTML;
}
- 多浏览器检测通过什么
- navigator.userAgent //"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36"
- 不同浏览器的特性 // addEventListener();
- Flash和ajax各自优缺点
- ajax: 可搜索性；开放性；费用；易用性；易于开发
- flash: 多媒体处理；兼容性；矢量图形比SVG，canvas优势好；客户资源调度好(麦克，摄像头)
- promise与异步回调的方法
- 必须按照接口规定的严格的方法编写处理代码。也就是说在(then或catch)以外的方法都不可以使用。不像回调函数可以自由定义回调的参数。这样可以将复杂的异步处理轻松的模块化。
- 怎么注入事件
- node的执行机制
- 事件代理机制
- 不建议给js写扩展方法的原因
- ES5新特性
console.log(Array.prototype); // Array[0]
console.log(String.prototype); // String
console.log(Object.prototype) // Object
console.log(Function) // none function Function() { [native code] }
console.log(Number.prototype) // Number
dom.getElementsByTagName() // HTMLCollection[3]
dom.querySelectorAll() // NodeList[3]
var form = document.forms[0];
console.log(form.elements);
/* HTMLFormControlsCollection[2]
0:input
1:input
length:2
password:input
username:input
__proto__:HTMLCollection */