面试题总结

1. HTML语义化理解：
   简述：用正确的标签做正确的事情；
   优点：
   结构更清晰，一目了然；便于理解
   利于搜索引擎的爬虫，利于SEO优化
   2.SEO中的TDK
   指的是title description keywords 标题 描述 关键词 设置在head标签中
   代码：
   title =>
   description =>
   keywords =>

3.标签上title与alt属性的区别：
title:作为标签的提示文本，alt:给搜索引擎识别，作为图像无法显示时的替换文本；
IE浏览器中alt与title作用是相同的；两者都设置上，利于浏览器的兼容；

4.DOCTYPE作用：指定html5还是html4还是xhtml
1）作用：a）告诉浏览器文档使用哪种HTML或XHTML版本
b）告诉浏览器按照何种规范解析，渲染页面，若未设置，则按BackCompat解析渲染页面
2）声明种类：
a）HTML5只有一种
b）HTML4.01有三种 strict（严格类型） transitional（过渡类型）frameset（框架类型）
c）XHTML1.0有三种 strict（严格类型） transitional（过渡类型）frameset（框架类型）

5.XHTML
1）DTD：文档类型定义（Document Type Definition）是一套关于标记符的语法规则
1）XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法
2）XHTML1.0 三种XML文档类型 strict（严格类型） transitional（过渡类型）frameset（框架类型）
3）transitional（过渡类型）是目前比较理想选择，因为这种DTD允许我们使用表现层的标识、元素和属性；如排版的表格、背景颜色标识等；

6.兼容模式 compatMode
1）标准模式strict(standars) mode 怪异模式quirks mode
2）BackCompat 对应quirks mode 标准兼容模式关闭 IE6以下版本
CSS1Compat 对应strict mode 标准兼容模式开启 IE7及以上版本
3）如何获取浏览器的兼容模式：window.top.document.compatMode => BackCompat/CSS1Compat

7. 显示英文格式 显示中文格式

8.常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

9.SEO优化
1）TDK title description keywords
2）图片+alt
3）友情链接：在其他网站中，添加本网站的链接，进行合作；
4）站点地图：sitemap 设置在根目录下，便于搜索引擎爬取；

10.tt标签呈现类似打字机或者等宽的文本效果

11.css盒子模型
两种盒子模型：IE盒子模型和W3C盒子模型
W3C盒子模型：设置的width只是包含content =》IE6及其以上版本
1）占据空间位置：width+padding+border+margin
2）盒子实际大小：width+padding+border
IE盒子模型：设置的width包含padding和border和content =》IE6以下版本
1）占据空间位置：width+margin
2）盒子实际大小：width
总结：IE5.5及更早的版本使用的是IE盒模型；IE6及其以上版本在标准兼容模式下使用的是W3C标准盒模型；
解决：只要为文档设置一个DOCTYPE，就会使IE遵循标准兼容模式方式工作；
属性：css3中的box-sizing属性可以选择盒模型解析方式，W3C盒模型方式被称为“content-box”，IE的被称为“border-box”；

12.css选择符
1）通配符选择器（*）
2）属性选择器（a[rel="extend"]）
3）伪类选择器（a:hover,li:nth-child()）
4）相邻选择器（p+li）

13.哪些属性可以继承
可继承的样式： font-size font-family color line-height UL LI DL DD DT;
不可继承的样式：border padding margin width height

14.css定义的权重：标签： 1，class：10，id：100，!important：无敌

15.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
答：多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

16.元素设置的行高值为百分比，即根据自己的字体大小进行计算赋值；

17.display:none跟visibility:hidden区别：
display:none 不占位；visibility:hidden 占位

18.为了兼容ie6和ie7，代表是专给ie6/7；如 li{display:inline}

19.让IE6/IE7支持display:inline-block属性的方法
ul li{ display:inline-block; zoom:1;display:inline;} /推荐:IE67/

20.在使用display:inline-block时，inline-block元素会有4px左右的空隙，这是什么原因导致的以及解决方法
（1） 取消换行和空格
（2） 设置父元素的font-size为0，在给子元素设置自身的字体大小

21.三种代码的区别
1）*height{} : IE7及其以下，+height{}：IE7，_height{}：IE6

22.vertical-align

1. baseline 基线对齐；
2. top: 元素的顶端与行中最高元素的顶端对齐；
3. text-top：元素的顶端与父元素字体的顶端对齐；与相邻元素没有关系；
4. middle：把元素放置在父元素的中部；

23.inline-blok设置的垂直对齐，默认为baseline;

24.link和@import的区别
代码：
代码：@import url("./style.css") 放在中
不同：link为xhtml标签，除了加载css外，还可以定义RSS等； @import只能加载css文件
link引用css时，在页面载入时，同时加载；@import需要页面网页完全载入以后加载
link是xhtml标签，无兼容问题；@import是在css2.1提出的，低版本的浏览器不支持；

25.JS的数据类型：
基本数据类型：number string null boolean undefined
引用数据类型：object Array
typeof执行的结果："number" "string" "boolean" "undefined" "object" "function" 结果均为字符串类型
typeof(2)==="number" 为真；
26.引用数据类型中如何判断变量为数组类型
作用：instanceof 判断xx是否属于哪一类
arr instanceof Array 是否为true；
{} instanceof Object 为真；
fn instanceof Function 为真； fn为函数；

27.null,undefined的区别：
1）null 表示一个对象被定义了，值为“空值”；
2）undefined 表示不存在这个值；

28.怎么判断一个变量没有定义： typeof(变量名)==="undefined" 是否为true

29.JSON对象上的两个方法
1）JSON.stringify(obj) JSON对象转换为JSON字符串
2）JSON.parse(objStr) JSON字符串转换为JSON对象
用途：转化响应数据，对象的克隆

30.事件委托：事件目标自身不处理事件，而是把处理任务委托给其父元素或祖先元素，甚至根元素（document）
触发：事件目标触发该事件后，通过事件冒泡，触发父元素身上的同一事件，事件函数中通过事件对象，获得事件源，然后进行行为操作；

31.随机数知识
Math.random() => 获取的是0-1之间的随机数，小数点后面16位
1）获取[2,10]之间的随机整数： Math.round(Math.random()(10-2)+2) 四舍五入，包含2和10
2）获取[2,10)之间的随机整数： Math.floor(Math.random()(10-2)+2) 向下取整，包含2，不包含10
3）获取(2,10)之间的随机整数：a)可以获取[3,9] 四舍五入 b)可以获取[3,10) 向下取整 c)可以获取[2,9) 向上取整

32.去除字符串空格
1）去除前后空格，中间空格保留 => 正则配合replace方法
var reg=/(^\s+)|(\s+$)/g; 开头或结尾 小括号分组 | 或 +1到多
2）去除所有的空格
var reg=/\s+/g;
3）字符串方法：str.replace(reg,"") => 不改变原字符串，生成新的字符串

33.检测浏览器的类型
navigator方式： navigator.userAgent 获取浏览器的详细版本号

34.原型和原型链
instance.constructor.prototype===instance._ proto _ 结果为true

35.eval是做什么的？
作用：将字符串转换为JS代码执行；
弊端：避免使用，非常耗性能（2次，一次解析成js语句，一次执行js语句）
使用：JSON格式的字符串转化为JSON格式的对象的兼容处理；
低版本IE浏览器中JSON属性不存在时，需要通过eval()来兼容处理；
兼容代码：
jsonParse: function(strJson){
return "JOSN" in window?JSON.parse(strJson):eval("("+strJson+")");
}

36.数组map()方法
[].map(callback) 返回一个数组，数组元素为每个callback的返回值；
callback中存在三个形参 item 数组元素 index索引值 array原数组
37.parseInt(string,radix)方法
string为被解析的字符串
radix表示要解析的数字的基数； radix为2-36之间的整数；
如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或者大于 36，或者是其他参数，则 parseInt() 将返回 NaN。
注：如果radix值为2，则以二进制转化string，若string没有合法的二进制数(0-1组成的数)，则返回NaN; 如“3”则返回NaN;
例子：["1", "2", "3"].map(parseInt) 的结果是：[1,NaN,NaN]

38. 事件委托：ul中
    ("ul").children("li").click(function(){alert($(this).html())})

function add(num){
if(argument.length===1{
reutrn funciton(num2){
return num+num2;
}
}else{
var sum=0;
for(var i=0;i sum+=argument[i];
}
return sum;
}
}

Array.prototype.copy=function(){
return this.concact(this);
}

$.ajax({
type: "post",
url: "http://xxx.com",
data: {username: "abc"}
dataType: "json"
success: function(val){
console.log(val.concat(val));
},
error: function(err){
console.log(err);
}
)}
倒排：numberArray.reverse()
降序：numberArray.sort(function(a,b){return b-a})

39.(window).load(function(){})

40. 请写一个正则，匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字或下划线构成，长度5-20
    var reg=/^[A-Za-z_]\w{4,19}$/;

41.JS中原型链最上层的对象是 object 的原型对象，该对象的proto指针指向 null 的原型对象。

42.JS中使用 Object 对象的 defineProperty 函数定义对象属性的访问器。

43.如何对一篇文章进行敏感词替换？假如有几千个敏感词
答：将这篇文章以字符串的形式赋给一个变量。定义一个正则表达式，以全局匹配的方式查找所有敏感词，并用replace方法替换掉，最后在赋值给原内容；

44.appendChild removeChild replaceChild(newNode,oldNode) insertBefore

45.闭包方式写一个方法：第一次执行返回999，第二次执行返回1000
function aa(){
var n=999;
return function(){
return n++;
}
}
var fn=aa(); 匿名函数
fn();
fn();

46.现在有一个数组[1,4,5,8,100],请写一个方法，每秒输出数组的第一个元素，知道整个数组输出完毕
1）用serInterval设置定时器
var ary={1,4,5,8,100]
var n=0;
var timer;
loopTimer();
function loopTimer(){
if(n clearInterval(timer);
timer=serInterval(function(){
console.log(ary[n++]);
},1000)
}else{
clearInterval(timer);
}
}
注：开启定时前，必须关闭所有定时器
2）用setTimeout设置定时器
var var ary={1,4,5,8,100]
var n=0;
var timer;
loopTimer();
function loopTimer(){
if(n clearTimeout(timer);
timer=setTimeout(function(){
console.log(ary[n++]);
loopTimer();
},1000)
}else{
//停止定时器
clearTimeout(timer);
}
}
3）用splice和setTimeout实现
var arr=[];
var timer=null;
loopTimer();
function loopTimer(){
clearTimeout(timer);
timer=setTimeout(function(){
console.log(arr.splice(0,1)[0]);
if(arr.length>0){
//自执行
looTimer();
}else{
//关闭定时器
clearTimeout(timer);
}
},1000)
}

47.数组去重
//遍历，每一个跟后面的每一项比较
Array.prototype.delRepeat=function(){
//数组去重
for(var i=0; i for(var j=1;j if(this[i]===this[j]){
//删除
this.splice(j,1);
j--;//避免塌陷
}
}
}
return this;
}
//遍历：相邻两个比较
Array.prototype.delRepeat=function(){
for(var i=0; i if(this[i]===this[i+1]){
this.splice(i,1);
i--;
}
}
return this;
}

//利用对象的不重名特性来去重
Array.prototype.delRepeat=function(){
var obj={};
for(var i=0; i if(obj[i]!=="undefined"){
this.splice(i,1);
i--;//避免塌陷
}
}
return this;
}

48.前端优化常用技巧
1）压缩js,css,图片
2）图片使用sprites，一张背景图，减少图片的http请求；
3）使用必要的事件委托
4）使用无cookie的域名请求
5）使用CSN，引入文件
6）图片懒加载
7）减少dom元素的数量和访问
8）样式表置顶，脚本置底

49.前端性能优化：分为两大类
最终达到的效果：为了能让用户更快的看到页面并进行下一步操作，但却不必将宝贵的资源浪费在没有必要的重复请求，不看的内容上；
1）页面级别的优化：http请求数以及内联脚本位置优化
a）减少http请求数：什么会发送http请求：外部JS，CSS文件引入，图片src引入，都会发送请求，响应数据；所以要解决这些问题；
1）合理的设置http缓存，尽可能地让资源能够在缓存中待的更久；
2）资源合并与压缩，尽可能的将外部的脚本、样式进行合并，合并为一个，并压缩；
方法：minify/compress等对内容进行多余空格、空行、注释的整体和压缩的技术；
3）CSS Sprites，css精灵，将多个图片合并为一个图片，通过背景图的引入，backgroundPosition的位置设置，进行不同图片的使用；
使用场景：小局部布局小图标背景、小导航背景等DIVCSS布局
b）内联脚本的位置：尽可能将脚本往后挪，减少对并发下载的影响。
1）原因：浏览器时并发请求的，而外链脚本在加载时却常常阻塞其他资源；若脚本放在比较靠前的位置，它后面的图片、样式以及其他脚本都处于阻塞状态，直至脚本加载完成后才会开始加载；
2）代码级别的优化：DOM操作优化，CSS选择符的优化以及图片的优化等
a）DOM操作优化
1）要避免在document上直接进行频繁的DOM操作；
2）可以使用classname代替大量的内联样式修改；
3）对于复杂的UI元素，设置position为absolute或fixed，尽量使用css动画
4）适当使用canvas尽量减少css表达式的使用；
5）事件处理：事件委托
b）图片优化
1）图片的压缩和css sprites，减少http请求和图片大小

50.开发完一个web应用用于手机端访问，请问需要在哪些方面优化页面？
1）按需加载；如mint-ui中的按需加载引入；
2）静态资源压缩；
3）动画能用css3实现尽量用css3使用；
4）移动端事件优化（fastclick）
a）fastclick解决问题：移动端页面对于点击事件会有300ms的延迟
原因：浏览器中存在双击缩放，双击恢复原始比例的功能；浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间内用户未进行下一次点击，则浏览器会做单击事件处理，若在300ms时间内进行了下一次单击操作，则浏览器会做双击事件处理；
b）避免延迟：
方法一：禁止缩放：
缺点：完全禁用缩放功能，但是部分苹果手机还是不行；
方法二：fastclick.js
解决原理：FastClick在检测到touchend事件的时候，会通过DOM自定义事件立即触发一个模拟click事件，并把浏览器在300ms之后真正触发的click事件阻止掉；
使用：
1）引入fastclick.js文件；
2）在js文件中添加代码：在window load事件之后，在body上调用FastClick.attach()即可；
代码：window.addEventListener(function(){ FastClick.attach(document.body); },false);
若项目中使用了jQuery，则设置以下代码：
代码：$(function(){ FastClick.attach(document.body); });

51.canvas画布复习
1）画布标签：
2）方向：x正方向：水平向右； y正方向：竖直向下；
2）操作：
a）获取对象：var c=document.getElementById("canvas");
b）创建一个二维模型：var ctx=c.getContext("2d");
c）操作：
ctx.strokeStryle="red";
ctx.fillStyle="blue";
ctx.strokeRect(20,20,150,100);
ctx.fillRect(20,20,150,200);
ctx.clearRect(10,10,200,200); 清空矩形画布；
ctx.beginPath();
ctx.closePath();
ctx.moveTo(100,100); 移动点到指定点；
ctx.lineTo(200,200); 画直线
cxy.arc(x,y,r,sAngle,eAngle,counterclockwise); 画圆
如何使用Canvas来画一条简单的线？
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=20;
ctx.strokeStyle="red";
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.stroke();
ctx.closePath();

52.透明度的兼容代码：
div{
opacity: 0.4;
filter: alpha(opacity=40);
}

53.省略号的兼容代码：
p{
text-overflow: ellipsis,
overflow: hidden;
white-space: nowrap,
}

54.清除浮动的兼容代码：
.clearfix{
*zoom: 1;
}
.clearfix::after{
content: "";
display: table;
clear: both;
overflow: hidden;
}