前言javascript
前端入门很容易，简单地用html搭一个页面框架；会用一些css基本样式；懂得用jquery的dom交互，就基本能够挺着胸说本身是个前端工程师了。css
可是前端提高异常艰难，算法、数据结构、oop；javascript、dom、css、html5这些仅仅是标配；性能优化、安全性、代码优雅性、seo，这些也是必然须要了解的。前端开发环境很轻便，也很繁琐，各类框架、架构模式的应用也是衡量专业程度的标准。html
在这里总结了一些面试题供前端们参考。前端
内容html5
JavaScript中如何检测一个变量是字符串类型？java
typeof(obj) === "string" //true obj.constructor === String //true
trim()的使用场景jquery
var str = " hello word "; str = str.trim(); console.log(str); //hello word,trim只会去掉字符中先后的空格，不会去除文字中的空格
this的典型应用web
//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
什么是跨域？ajax
因为浏览器同源策略，凡是发送请求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、能在保证最不失真的状况下尽量压缩图像文件的大小。 二、对于须要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
浏览器渲染页面流程
1.解析HTML文件，建立DOM树。 自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。 2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式； 3.将CSS与DOM合并，构建渲染树（Render Tree） 4.布局和绘制，重绘（repaint）和重排（reflow）