面试题整理（更新中）

浏览器兼容性类
css类
1.a标签中的img标签在IE7,8浏览器中有蓝色边框

img{border:0 none},

2.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同
解决方案：css里增加通配符*{margin：0；padding：0}

3.IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题
解决方案：设置display：inline；

4.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度

5.图片默认有间距
解决方案：使用float为img布局

6.IE9以下浏览器不能使用opacity
解决方案：

opacity：0.5；
filter：alpha（opacity=50）；
filter：progid：DXlmageTransform.Microsoft.Alpha(style=0,opacity=50);

7.css中的width和padding
在IE7和FF中width宽度不包括padding，在IE6中包括padding.

8.FF和IEBOX模型解释不一致导致相差2px
box.style{width:100;border1px;}
ie理解为box.width =100
ff理解为box.width =100 + 1*2 = 102 //加上边框2px

解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

也可以通过修改盒模型解决：box-sizing:border-box;

9.属性前缀法(即类内部Hack)：

body { background: rgba(243,243,243) ; } /* 所有浏览器都支持这样的写法*/
body { _background: rgb(243,243,243) ; } /* 只有IE6才支持这样的写法*/
body { background: rgb(243,243,243) ; } / 所有IE浏览器都支持这样的写法*/
body { +background: rgb(243,243,243) ; } /* 只有IE6和IE7浏览器能支持这样的写法*/
body { -background: rgb(243,243,243) ; } /* 据说也只有IE6浏览器能支持，我没测试过*/
body { +background: rgb(243,243,243) ; } / IE7和IE10浏览器能支持*/
body { background: rgb(243,243,243) \0; } /* \零 的写法只有IE8及以上浏览器可以支持*/

10.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

11.选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。

12.cursor: hand VS cursor: pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer

13.标签最低高度设置min-height不兼容
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：

{
	min-height:200px; 
	height:auto !important; 
	height:200px; 
	overflow:visible;
} 

JS类
1.const问题：Firefox下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。

2.两个块级元素，父元素设置了overflow：auto；子元素设置了position：relative；且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position：relative

3.事件绑定

• 低版本IE:dom.attachEvent();
• 其他浏览器：dom.addEventListener();

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。

4.操作tr的html：在ie9以下，不能操作tr的innerHTML

5.ajax略有不同

• IE：ActiveXObject
• 其他：xmlHttpReuest

6.innerText在IE中能正常工作，但在FireFox中却不行.
需用textContent。
解决方法:

if(navigator.appName.indexOf("Explorer") > -1){
	document.getElementById('element').innerText = "my text";
} else{
	document.getElementById('element').textContent = "my text";
}

其他
1.web的安全色种类为216种

2.jquery中 attr() 和 css() 的区别

• attr()主要是针对元素的属性进行操作，如img的src属性和alt属性，a链接的href属性等等;
• css()修改的是样式里面的属性，即是style里面的属性

3.初始化css的作用

• 兼容浏览器：因为不同浏览器的默认样式兼容不同
• 节约代码和网页下载时间（假如我们不初始化CSS样式属性，将会增大CSS代码量）
• 如果不初始化CSS我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性，是否和前面的CSS属性相同，是否统一整个网页的风格和样式。

4.什么是闭包？

简单理解成：定义在一个函数内部的函数
闭包本质：将函数内部和函数外部连接起来的一座桥梁
最大用处：

• 可以读取函数内部变量
• 就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在

5.如何添加HTML事件

• 直接在html标签的属性上添加
  <div οnclick="alert('div')">div</div>
• 用dom的on…方法添加
  document.getElementById(‘div’).onclick = function () {alert(‘div’)};
• 用事件监听addEventListener或attachEvent（IE）添加
  document.getElementById(‘div’).addEventListener(‘click’, function () {alert(‘div’)}, false);

6.前端常规开发优化策略？

• 请减少HTTP请求
• 请正确理解 Repaint 和 Reflow
• 请减少对DOM的操作
• 使用JSON格式来进行数据交换
• 高效使用HTML标签和CSS样式
• 使用CDN加速（内容分发网络）
• 将CSS和JS放到外部文件中引用，CSS放头，JS放尾
• 精简CSS和JS文件（压缩）
• 压缩图片和使用图片Sprite技术

7.如何控制网页在网络传输中的数据量？

• 分页加载
• 瀑布流
• 限制每次加载的数据量
• 减少数据量，启用GZIP 压缩
• 保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

8.JQmobile和JQ的区别

• jQuery Mobile 是创建移动 web 应用程序的框架。
• jQuery Mobile 适用于所有流行的智能手机和平板电脑。
• jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局
• jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
• jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
• jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。

9.选项卡的实现思路

鼠标悬浮时间，调用方法，传入this，对所有的选项卡内容部分隐藏操作，对this的进行显示操作，控制display

10.json数据格式的处理，发送一个请求删除数据里的一条数据，怎么知道删除成功了，或者说删除后 会在哪里显示？
JSON.parse() 转换为JSON对象，根据数据进行解析，放到页面中。
格式：{} 与 [] 结合拼接的JSON串
发送请求删除数据，后台会返回处理的结果，前台根据返回的结果判断是否成功，然后处理页面元素。

11.有没有遇到过这种情况 在ie浏览器中 后台图片数据已经改变 但是客户端没有发生改变 该怎么处理？（浏览器的缓存）

• JQuery.ajax() 方法，设置cache为false，就不会从浏览器缓存中加载请求
• 利用post方法，请求数据，不会缓存，每次都是重新请求数据

12.@import和link的区别

• 从属关系区别：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
• 加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
• 兼容性区别：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
• DOM可控性区别：可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
• 权重区别：link引入的样式权重大于@import引入的样式。

13.Promise 对象代表一个异步操作，有3种状态：Pending(进行中)、Resolved(已完成，又称Fulfilled)和Rejected(已完成)

14.js内置的可迭代对象？

1）数组Array
 
console.log([][Symbol.iterator])
  
for(let x of ['a','b'])
    console.log(x)
 
2）字符串String
console.log(""[Symbol.iterator])
for(let x of "abc")
    console.log(x)
 
3）Map
let map = new Map().set('a', 1).set('b', 2);
console.log(map[Symbol.iterator]);
for (let pair of map) {
    console.log(pair);
}
 
4）Set
let set = new Set().add('a').add('b');
for (let x of set) {
    console.log(x);
}
 
 
5）arguments
function printArgs() {
    for (let x of arguments) {
        console.log(x);
    }
}
printArgs('a', 'b');
 
6）Typed Arrays
 
7）Generators，ES6新增加

15.作为media queries的条件：设备像素比、设备类型、设备高度。
使用and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。
@media tv and (min-width: 700px) and (orientation: landscape) { … }
tv设备类型，(min-width: 700px) 设备像素比，(orientation: landscape)设备高度

16.有一个输入框，只允许输入数字或字母，如果输入不合法则将输入框的边框变为红色，写代码

var reg =/^[a-zA-Z0-9]+$/;
if(!reg.text(输入框取出的value)){
   input.style.border= “red”;
};

17.页面加载更多li时怎么处理后台返回的json数据
利用JSON.parse() 获得相应的JSON对象，循环添加li，数据放进去。

18.级联 的实现思路
一般地区数据都是利用二维数组存储，从后台获取到以后存储起来，
根据第一个下拉框的选项，找到对应的二维数组数据，循环new Option() add进下拉框

19.轮播图的实现思路

• 第一种：把图片名称按顺序取好名字，利用定时器，每隔多少秒，更换图片的路径
• 第二种：利用无缝滚动的技术，把图片都放入页面中，定时器进行scroll滚动，判断滚动距离取余(%) 图片宽度等于0，暂停定时器，多少秒后再开启定时器。

20.写一个函数，用于生产随机密码，传入的参数为密码的长度，返回生产的随机密码，要求生成的随机密码必须含有大写字母、小写字母和数字

var padArr = [
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","0","1","2","3","4","5","6","7","8","9"
];
var padStr = "";
function asd(length){
    for(var i = 0 ; i<length;i++){
        padStr += padArr[Math.floor(Math.random()*padArr.length)];
    }
}

21.编写一个方法，判断字符串是否是这样的组成，第一个必须是字母，最后一个必须是数字。

function checkStr(str){
    var diyige =str.subStr(0,1);
    var dierge =str.subStr(str.length-1,1);
	var reg = /^[a-zA-Z]$/
	if(reg.test(diyige) &&!isNAN(dierge)){
		//第一个是字母,最后一个是数字
	}
}

22.document.write，innerHTML和innertext区别是什么？

• document.write只能重绘整个页面
• innerHTML可以重绘页面的一部分(包含标签+文字)
• innertext可以重绘页面的一部分(只包含文字)

23.字符串abcdefg把de换成12，b后面接le，写出JS。

var str = “abcdefg”;
str = str.replace(“de”,”12”);
str = str.replace(“b”,”b1e”);

// 或者

var str = “abcdefg”;
str = str.split(“de”,”12”);
var str1 =str.subString(0,str.indexOf(‘b’)+1);
var str2 =str.subString(str.indexOf(‘b’)+1);
str = str1+”1e”+str2;

24.判断每个字符出现的次数：hello，最后显示： h:1,e:1,l:2,o:1.

var str = “hello”;
var o = [];
for(var i = 0 ;i<str.length;i++){
	if(str.indexOf(str[i]) == i){
		o[str[i]] = str.split(str[i]).length-1;
	}
}
console.log(o);

25.谈谈你对框架的理解
对功能进行封装，使用者直接调用，或对样式进行预设置，使用者直接起名字

26.如何实现跨域？具体怎么实现？

第一种：
JSONP，利用传递方法名的方式，告诉后台前端方法名是什么，后台取到后，在名称后面拼接（），把数据（DATA）放到小括号中，返回前端，相当于返回：方法名（data）到前端后就直接调用这个方法了。

$.get(“ULR?callback=?”,function(data){
	console.log(data);
})

第二种：
前端正常Ajax访问，后台开启同源策略限制！
“Access-Control-Allow-Origin”,”*”

24.为什么异步加载JS文件？加载方式？

平时常用的引入JS方式，是同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析。

异步加载（async）JS文件，允许页面内容异步加载，仅适用于外部脚本。

延迟加载（defer）属性规定是否对脚本执行进行延迟，直到页面加载为止。