前言
前端入门很容易，简单地用html搭一个页面框架；会用一些css基本样式；懂得用jquery的dom交互，就基本可以挺着胸说自己是个前端工程师了。
但是前端提升异常艰难，算法、数据结构、oop；javascript、dom、css、html5这些仅仅是标配；性能优化、安全性、代码优雅性、seo，这些也是必然需要了解的。前端开发环境很轻便，也很繁琐，各种框架、架构模式的应用也是衡量专业程度的标准。
在这里总结了一些面试题供前端们参考。
内容
JavaScript中如何检测一个变量是字符串类型？
typeof(obj) === "string" //true obj.constructor === String //true
trim()的使用场景
var str = " hello word "; str = str.trim(); console.log(str); //hello word,trim只会去掉字符中前后的空格，不会去除文字中的空格
this的典型应用
//1 input点击，获取值 <input type="button" id="text" value="点击一下" /> <script type="text/javascript"> var btn = document.getElementById("text"); btn.onclick = function() { alert(this.value); //此处的this是按钮元素 } </script> //2 构造函数 function Hello(name, color) { this.name = name; this.color = color; } //3 在html元素事件属性中使用 <input type=”button” onclick=”showInfo(this);” value=”点击一下”/>
instanceof还是typeof？
//相同点：JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。 //细节区别： //1.typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。 //2.typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。 //3.对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。 var a = new Array(); alert(a instanceof Array); // true alert(a instanceof Object) // true
什么是跨域？
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况： 1.网络协议不同，如http协议访问https协议。 2.端口不同，如80端口访问8080端口。 3.域名不同，如qianduanblog.com访问baidu.com。 4.子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。 5.域名和域名对应ip,如www.bb.com访问8.8.8.8.
JavaScript面向对象？
//面向对象的基本特征：多态，继承，封包（完全参考java） //prototype 原型链来达到继承的效果 function animal(name){ this.name = name; } animal.prototype.sayName = function(){ console.log("name is "+this.name); } var animal1 = new animal("动物"); animal1.sayName(); //动物 function dog(name){ this.name = name; } dog.prototype = new animal() var dog1= new dog("哈士奇"); dog1.sayName(); //哈士奇
//call()/apply()方法 function teacher(name,age){ this.name = name; this.age = age; this.sayhi = function(){ alert('name:'+name+", age:"+age); } } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); // teacher.apply(this,arguments); } var teacher1 = new teacher('xiaoming',23); teacher1.sayhi(); var student1 = new student('xiaolan',12); student1.sayhi(); // alert: name:xiaoming, age:23 // alert: name:xiaolan, age:12
function teacher(name,age){ this.name = name; this.age = age; } teacher.prototype.sayName = function(){ console.log('name:'+this.name); } teacher.prototype.sayAge = function(){ console.log('age:'+this.age); } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); } student.prototype = new teacher(); var student1 = new student('xiaolin',23); student1.sayName(); student1.sayAge(); // name:xiaolin // age:23
function Person(name,age){ this.name = name; this.age = age; this.show = function(){ console.log(this.name+", "+this.age); } } function Student(name,age){ this.student = Person; //将Person类的构造函数赋值给this.student this.student(name,age); //js中实际上是通过对象冒充来实现继承的 delete this.student; //移除对Person的引用 } var s = new Student("小明",17); s.show(); var p = new Person("小花",18); p.show(); // 小明, 17 // 小花, 18
写一个方法，去掉重复的元素
//方法1 var arr = [0,2,3,4,4,0,2]; var obj = {}; var tmp = []; for(var i = 0 ;i< arr.length;i++){ if( !obj[arr[i]] ){ obj[arr[i]] = 1; tmp.push(arr[i]); } } console.log(tmp); //方法2 var arr = [2,3,4,4,5,2,3,6], arr2 = []; for(var i = 0;i< arr.length;i++){ if(arr2.indexOf(arr[i]) < 0){ arr2.push(arr[i]); } } console.log(arr2); //方法3 var arr = [2,3,4,4,5,2,3,6]; var arr2 = arr.filter(function(element,index,self){ return self.indexOf(element) === index; }); console.log(arr2);
Jquery 属性的几种操作方式
//addClass $(selector).addClass(class)：为每个匹配的元素添加指定的类名 //removeClass $(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值； //toggleClass $(selector).toggleClass(class)：如果存在（不存在）就删除（添加）一个类 //removeAttr $(selector).removeAttr(class);删除class这个属性；
$(document).ready与window.onload()?
1.window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
2.$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。
$.get,$.post与$.ajax
相同点：都是异步请求的方式来获取服务端的数据； 不同点： 1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。 2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。 3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多 4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。
Ajax：
Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
$.get 与 $.post 都是$.ajax的语法糖。 例子 $.ajax({ url:'http://www.baidu.com', type:'POST', data:data, cache:true, headers:{}, beforeSend：function(){}, success:function(){}, error:function(){}, complete:function(){} });
jquery事件bind
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数； 语法：bind(type,[data],function(eventObject))； 特点： (1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。 (2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。 实例如下：$( "#members li a" ).bind( "click", function( e ) {} );
jquery事件live
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数； 语法：live(type, [data], fn); 特点： (1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。 (2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。 (3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”).live...可以，但$("body").find("ul").live...不行； 实例如下：$( document ).on( "click", "#members li a", function( e ) {} );
jquery事件delegate
定义和用法：将监听事件绑定在就近的父级元素上 语法：delegate(selector,type,[data],fn) 特点： (1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。 (2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。 实例如下： $("#info_table").delegate("td","click",function(){/*显示更多信息*/}); $("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});
jquery事件on
定义和用法：将监听事件绑定到指定元素上。 语法：on(type,[selector],[data],fn) 实例如下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。 说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。 总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()
什么是盒子模型
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），
元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。
4个部分一起构成了css中元素的盒模型。
三种降低页面加载时间的方法
压缩css、js文件
合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作
三种常见的web攻击
1.XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。 2.SQL注入攻击 3.CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
针对页面内容的优化
1.减少 HTTP 请求 (Make Fewer HTTP Requests) 2.减少 DOM 元素数量 (Reduce the Number of DOM Elements) 3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对修饰文件的优化
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top) 2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 3.精简 JavaScript 与 CSS (Minify JavaScript and CSS) 4.避免 CSS 表达式 (Avoid CSS Expressions)
针对脚本的优化
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 4. 移除重复脚本 (Remove Duplicate Scripts)
针对图片类文件的优化
1.优化图片 2 不要在 HTML 中使用缩放图片 3 使用恰当的图片格式 4 使用 CSS Sprites 技巧对图片优化
图像格式的区别
矢量图：图标字体，如 font-awesome；svg 普通图：gif,jpg(jpeg),png 区别： 1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。 2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。 3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。 关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明; 优缺点： 1、能在保证最不失真的情况下尽可能压缩图像文件的大小。 2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
浏览器渲染页面流程
1.解析HTML文件，创建DOM树。 自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。 2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式； 3.将CSS与DOM合并，构建渲染树（Render Tree） 4.布局和绘制，重绘（repaint）和重排（reflow）
