前端学习中的面试问题总结
前端面试题总结 1.HTML， HTTP，web综合问题 1、前端需要注意哪些SEO 2、
的title和alt有什么区别 3、HTTP的几种请求方法用途 2、POST方法 3、PUT方法 4、HEAD方法 5、方法 6、方法 7、TRACE方法 8、方法 4、从浏览器地址栏输入url到显示页面的步骤 5、如何进行网站性能优化 6、HTTP状态码及其含义
2XX
：成功状态码
3XX
：重定向
4XX
：客户端错误
5XX
服务器错误
7、语义化的理解 8、介绍一下你对浏览器内核的理解？ 9、html5有哪些新特性、移除了那些元素？ 移除的元素： 支持HTML5新标签： 当然也可以直接使用成熟的框架、比如 10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢 12、请描述一下 ， 和 的区别？ 有期时间： 13、有那些缺点？ 14、WEB标准以及W3C标准是什么? 15、xhtml和html有什么区别? 另外是书写习惯的差别 16、作用? 严格模式与混杂模式如何区分？它们有何意义? 17、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？ 18、HTML全局属性( )有哪些 2.CSS部分 1、css 是什么,有什么优缺点 缺点： 2、: none;与: ;的区别 3、link与@的区别 link是HTML方式， @是CSS方式link最大限度支持并行下载，@过多嵌套导致串行下载，出现可以通过rel=" "指定候选样式浏览器对link支持早于@，可以使用@对老浏览器隐藏样式@必须在样式规则之前，可以在css文件中引用其他文件总体来说：link优于@ 4、什么是FOUC?如何避免 5、如何创建块级格式化上下文(block ),BFC有什么用 作用： 6、,float,的关系 7、清除浮动的几种方式，各自的优缺点 8、为什么要初始化CSS样式? 9、css3有哪些新特性
CSS3新增伪类有那些？
10、有哪些值？说明他们的作用 11、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 12、CSS优先级算法如何计算？ 13、对BFC规范的理解？ 14、谈谈浮动和清除浮动 15、的值， 和定位原点是 16、:-block 什么时候不会显示间隙？(携程) 17、PNG,GIF,JPG的区别及如何选
JPEG
PNG
3. 1、闭包
说说你对闭包的理解
2、说说你对作用域链的理解 3、原型，原型链 ? 有什么特点？ 当我们需要一个属性的时，引擎会先看当前对象中是否有这个属性， 如果没有的就会查找他的对象是否有这个属性，如此递推下去，一直检索到 内建对象 4、请解释什么是事件代理 5、如何实现继承？
function Parent(){this.name = 'wang';}function Child(){this.age = 28;}Child.prototype = new Parent();//继承了Parent，通过原型var demo = new Child();alert(demo.age);alert(demo.name);//得到被继承的属性}
6、谈谈This对象的理解 7、事件模型 8、new操作符具体干了什么呢? 9、Ajax原理
// 1. 创建连接var xhr = null;xhr = new XMLHttpRequest()// 2. 连接服务器xhr.open('get', url, true)// 3. 发送请求xhr.send(null);// 4. 接受请求xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){success(xhr.responseText);} else { // failfail && fail(xhr.status);}}}
10、如何解决跨域问题? 11、模块化开发怎么做？
var module1 = (function(){var _count = 0;var m1 = function(){//...};var m2 = function(){//...};return {m1 : m1,m2 : m2};})();
12、异步加载JS的方式有哪些？ 13、那些操作会造成内存泄漏？ 14、XML和JSON的区别？ 数据交互方面 数据描述方面 传输速度方面 15、谈谈你对的看法 16、说说你对AMD和的理解 17、常见web安全及防护原理 总的来说有以下几点
XSS原理及防范
XSS防范方法
XSS与CSRF有什么区别吗？
CSRF的防御
18、用过哪些设计模式？ 构造函数模式 19、为什么要有同源限制？ 20、/,/与/的区别 21、有哪些方法定义对象 22、常见兼容性问题？
body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}
22、说说你对的了解 另外， 与 一起合称 对象用来进行延迟() 和异步() 计算
的构造函数
var promise = new Promise(function(resolve, reject) {if (...) { // succeedresolve(result);} else { // failsreject(Error(errMessage));}});
23、你觉得源码有哪些写的好的地方 24、vue、react、 25、Node的应用场景 优点： 缺点： 26、谈谈你对AMD、CMD的理解 27、那些操作会造成内存泄漏？ 28、web开发中会话跟踪的方法有哪些 29、介绍js的基本数据类型 30、介绍js有哪些内置对象？ 31、说几条写的基本规范？ 32、有几种类型的值？，你能画一下他们的内存图吗？
**
33、创建对象的几种方式？
创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
function Person(){}var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Classperson.name="Mark";person.age="25";person.work=function(){alert(person.name+" hello...");}
person.work();
function Pet(name,age,hobby){this.name=name;//this作用域：当前对象this.age=age;this.hobby=hobby;this.eat=function(){alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");}}var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象maidou.eat();//调用eat方法
var wcDog =new Object();wcDog.name="旺财";wcDog.age=3;wcDog.work=function(){alert("我是"+wcDog.name+",汪汪汪......");}wcDog.work();
function Dog(){}Dog.prototype.name="旺财";Dog.prototype.eat=function(){alert(this.name+"是个吃货");}var wangcai =new Dog();wangcai.eat();
function Car(name,price){this.name=name;this.price=price; }Car.prototype.sell=function(){alert("我是"+this.name+"，我现在卖"+this.price+"万元");}var camry =new Car("凯美瑞",27);camry.sell();
34、eval是做什么的？ 35、null， 的区别？ 36、[“1”, “2”, “3”].map() 答案是多少？ 37、 代码中的"use ";是什么意思 ? 使用它区别是什么？ 38、JSON 的了解？**
var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
var last=obj.toJSONString();
var last=JSON.stringify(obj);
39、js延迟加载的方式有哪些？ 40、同步和异步的区别? 41、渐进增强和优雅降级 42、defer和async 43、说说严格模式的限制 44、和的区别是什么？ 45、谈谈你对ES6的理解 4.编程题 1、写一个通用的事件侦听器函数
// event(事件)工具集，来源：github.com/markyunmarkyun.Event = {// 视能力分别使用dom0||dom2||IE方式 来绑定事件// 参数： 操作的元素,事件名称 ,事件处理程序addEvent : function(element, type, handler) {if (element.addEventListener) {//事件类型、需要执行的函数、是否捕捉element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent('on' + type, function() {handler.call(element);});} else {element['on' + type] = handler;}},// 移除事件removeEvent : function(element, type, handler) {if (element.removeEventListener) {element.removeEventListener(type, handler, false);} else if (element.datachEvent) {element.detachEvent('on' + type, handler);} else {element['on' + type] = null;}},// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)stopPropagation : function(ev) {if (ev.stopPropagation) {ev.stopPropagation();} else {ev.cancelBubble = true;}},// 取消事件的默认行为preventDefault : function(event) {if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}},// 获取事件目标getTarget : function(event) {return event.target || event.srcElement;}
2、如何判断一个对象是否为数组
function isArray(arg) {if (typeof arg === 'object') {return Object.prototype.toString.call(arg) === '[object Array]';}return false;
}
3、冒泡排序
var arr = [3, 1, 4, 6, 5, 7, 2];function bubbleSort(arr) {
for (var i = 0; i < arr.length - 1; i++) {for(var j = 0; j < arr.length - 1; j++) {if(arr[j + 1] < arr[j]) {var temp;temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}
}
return arr;
}console.log(bubbleSort(arr));
4、快速排序
var arr = [3, 1, 4, 6, 5, 7, 2];function quickSort(arr) {if(arr.length == 0) {return []; // 返回空数组}var cIndex = Math.floor(arr.length / 2);var c = arr.splice(cIndex, 1);var l = [];var r = [];for (var i = 0; i < arr.length; i++) {if(arr[i] < c) {l.push(arr[i]);} else {r.push(arr[i]);}}return quickSort(l).concat(c, quickSort(r));
}console.log(quickSort(arr));
5、编写一个方法 求一个字符串的字节长度
function GetBytes(str){var len = str.length;var bytes = len;for(var i=0; i 255) bytes++;}return bytes;}alert(GetBytes("你好,as"));
5.其他 1、谈谈你对重构的理解 2、什么样的前端代码是好的 3、对前端工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，
与团队成员，UI设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
4、你觉得前端工程的价值体现在哪 5、平时如何管理你的项目？ 6、7答案（省略）
