28、 什么是闭包(closure),为什么要用它?
简单的理解是函数的嵌套形成闭包,闭包包括函数本身已经它的外部作用域使用闭包可以形成独立的空间,延长变量的生命周期,报存中间状态值
29、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?
意思是使用严格模式,使用严格模式,一些不规范的语法将不再支持
30、如何判断一个对象是否属于某个类? Instanceof constructor 31、new 操作符具体干了什么呢?
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
32、用原生 JavaScript 的实现过什么功能吗?
主要考察原生 js 的实践经验
33、Javascript 中,有一个函数,执行时对象查找时,永远不会去查找原型, 这个函数是?
HasOwnProperty
34、对 JSON 的了解?
轻量级数据交互格式,可以形成复杂的嵌套格式,解析非常方便
35、js 延迟加载的方式有哪些?
方案一:<script>标签的 async="async"属性(详细参见:script 标签的 async 属性) 方案二:<script>标签的 defer="defer"属性
方案三:动态创建<script>标签
方案四:AJAX eval(使用 AJAX 得到脚本内容,然后通过 eval_r(xmlhttp.responseText) 来运行脚本)
方案五:iframe 方式
36、模块化开发怎么做?
理解模块化开发模式:浏览器端 requirejs,seajs;服务器端 nodejs;ES6 模块化;fis、webpack 等前端整体模块化解决方案;grunt、gulp 等前端工作流的使用
37、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition) 规范区别?
理解这两种规范的差异,主要通过 requirejs 与 seajs 的对比,理解模块的定义与引用方式的差异以及这两种规范的设计原则
38、requireJS 的核心原理是什么?(如何动态加载的?如何避免多次加载的? 如何 缓存的?)
核心是 js 的加载模块,通过正则匹配模块以及模块的依赖关系,保证文件加载的先后顺序, 根据文件的路径对加载过的文件做了缓存
39、让你自己设计实现一个 requireJS,你会怎么做?
核心是实现 js 的加载模块,维护 js 的依赖关系,控制好文件加载的先后顺序
40、谈一谈你对 ECMAScript6 的了解?
ES6 新的语法糖,类,模块化等新特性
41、ECMAScript6 怎么写 class 么,为什么会出现 class 这种东西?
class Point { constructor(x, y) { this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}
42、异步加载的方式有哪些?
方案一:<script>标签的 async="async"属性(详细参见:script 标签的 async 属性) 方案二:<script>标签的 defer="defer"属性
方案三:动态创建<script>标签
方案四:AJAX eval(使用 AJAX 得到脚本内容,然后通过 eval_r(xmlhttp.responseText) 来运行脚本)
方案五:iframe 方式
43、documen.write 和 innerHTML 的区别?
document.write 是重写整个 document, 写入内容是字符串的 html innerHTML 是 HTMLElement 的属性,是一个元素的内部 html 内容
44、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?
(1)创建新节点
createDocumentFragment() //创建一个 DOM 片段
createElement_x()
createTextNode()
//创建一个具体的元素
//创建一个文本节点
(2)添加、移除、替换、插入appendChild()
removeChild() replaceChild() insertBefore()
(3)查找
getElementsByTagName() getElementsByName()
//通过标签名称
//通过元素的 Name 属性的值
getElementById() //通过元素 Id,唯一性
45、call() 和 .apply() 的含义和区别?
apply 的参数是数组形式,call 的参数是单个的值,除此之外在使用上没有差别,重点
理解这两个函数调用的 this 改变
46、数组和对象有哪些原生方法,列举一下?
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素Array.push( ) 给数组添加元素Array.reverse( ) 颠倒数组中元素的顺序Array.shift( ) 将元素移出数组Array.slice( ) 返回数组的一部分Array.sort( ) 对数组元素进行排序Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串Array.toString( ) 将数组转换成一个字符串Array.unshift( ) 在数组头部插入一个元素
Object.hasOwnProperty( ) 检查属性是否被继承 Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型Object.propertyIsEnumerable( ) 是否可以通过 for/in 循环看到属性Object.toLocaleString( ) 返回对象的本地字符串表示Object.toString( ) 定义一个对象的字符串表示
Object.valueOf( ) 指定对象的原始值
47、JS 怎么实现一个类。怎么实例化这个类
严格来讲 js 中并没有类的概念,不过 js 中的函数可以作为构造函数来使用,通过 new 来实例化,其实函数本身也是一个对象。
48、JavaScript 中的作用域与变量声明提升?
理解 JavaScript 的预解析机制,js 的运行主要分两个阶段:js 的预解析和运行,预解析阶段所有的变量声明和函数定义都会提前,但是变量的赋值不会提前
49、如何编写高性能的 Javascript?
使用 DocumentFragment 优化多次 append 通过模板元素 clone ,替代 createElement
使用一次 innerHTML 赋值代替构建 dom 元素
使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素使用 Array 做为 StringBuffer ,代替字符串拼接的操作
将循环控制量保存到局部变量
顺序无关的遍历时,用 while 替代 for 将条件分支,按可能性顺序从高到低排列
在同一条件子的多( >2 )条件分支时,使用 switch 优于 if 使用三目运算符替代条件分支
需要不断执行的时候,优先考虑使用 setInterval
50、那些操作会造成内存泄漏?
闭包,循环
51、javascript 对象的几种创建方式?
1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式
52、javascript 继承的 6 种方法?
1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承
53、eval 是做什么的?
1. 它的功能是把对应的字符串解析成 JS 代码并运行
2. 应该避免使用 eval,不安全,非常耗性能(2 次,一次解析成 js 语句,一次执行)
54、JavaScript 原型,原型链 ? 有什么特点?
1. 原型对象也是普通的对象,是对象一个自带隐式的 proto 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链
55、事件、IE 与火狐的事件机制有什么区别? 如何阻止冒泡?
1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为
2. 事件处理机制:IE 是事件冒泡、firefox 同时支持两种事件模型,也就是:捕获型事件和冒泡型事件
3. ev.stopPropagation();
注意旧 ie 的方法:ev.cancelBubble = true;
56、简述一下 Sass、Less,且说明区别?
他们是动态的样式语言,是 CSS 预处理器,CSS 上的一种抽象层。他们是一种特殊的语法/语言而编译成 CSS。
变量符不一样,less 是@,而 Sass 是$; Sass 支持条件语句,可以使用 if{}else{},for{}循环等等。而 Less 不支持;
Sass 是基于 Ruby 的,是在服务端处理的,而 Less 是需要引入 less.js 来处理 Less 代码输
出 Css 到浏览器
57、关于 javascript 中 apply()和 call()方法的区别?
相同点:两个方法产生的作用是完全一样的不同点:方法传递的参数不同Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)
apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。call()方法第一个参数与 apply()方法相同,但传递给函数的参数必须列举出来。
58、简述一下 JS 中的闭包?
闭包用的多的两个作用:读取函数内部的变量值;让这些变量值始终保存着(在内存中)。 同时需要注意的是:闭包慎用,不滥用,不乱用,由于函数内部的变量都被保存在内存中, 会导致内存消耗大。
59、说说你对 this 的理解?
在 JavaScript 中,this 通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。
全局的 this → 指向的是 Window
函数中的 this → 指向的是函数所在的对象对象中的 this → 指向其本身
60、分别阐述 split(),slice(),splice(),join()?
join()用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔 符,默认是以逗号分开。归属于 Array
split()即把字符串分离开,以数组方式存储。归属于 Stringstring
slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。返回的是含有被删除的元素的数组。
61、事件委托是什么?
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
62、如何阻止事件冒泡和默认事件?
阻止浏览器的默认行为window.event?window.event.returnValue=false:e.preventDefault(); 停止事件冒泡window.event?window.event.cancelBubble=true:e.stopPropagation();
原生JavaScript中,return false;只阻止默认行为,不阻止冒泡,jQuery中的return false;
既阻止默认行为,又阻止冒泡
63、添加 删除 替换 插入到某个接点的方法?
obj.appendChidl() obj.removeChild() obj.replaceChild() obj.innersetBefore()
64、你用过 require.js 吗?它有什么特性?
(1)实现 js 文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
65、谈一下 JS 中的递归函数,并且用递归简单实现阶乘?
递归即是程序在执行过程中不断调用自身的编程技巧,当然也必须要有一个明确的结束条 件,不然就会陷入死循环。
66、请用正则表达式写一个简单的邮箱验证。
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
67、简述一下你对 web 性能优化的方案?
1、尽量减少 HTTP 请求
2、使用浏览器缓存
3、使用压缩组件
4、图片、JS 的预载入
5、将脚本放在底部
6、将样式文件放在页面顶部
7、使用外部的 JS 和 CSS
8、精简代码
68、在 JS 中有哪些会被隐式转换为 false
Undefined、null、关键字 false、NaN、零、空字符串
69 、定时器 setInterval 有一个有名函数 fn1,setInterval(fn1,500)与
setInterval(fn1(),500)有什么区别?
第一个是重复执行每 500 毫秒执行一次,后面一个只执行一次。
70、外部 JS 文件出现中文字符,会出现什么问题,怎么解决? 会出现乱码,加 charset=”GB2312”; 71、谈谈浏览器的内核,并且说一下什么是内核?
Trident (['traɪd(ə)nt])--IE , Gecko (['gekəʊ])--Firefox, Presto (['prestəʊ])--opera,webkit—谷歌和 Safari
浏览器内核又可以分成两部分:渲染引擎和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。
72、JavaScript 原型,原型链 ? 有什么特点?
* 原型对象也是普通的对象,是对象一个自带隐式的 proto 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链。
* 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。
* JavaScript 的数据对象有那些属性值?
writable:这个属性的值是否可以改。
configurable:这个属性的配置是否可以删除,修改。
enumerable:这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。value:属性值。
* 当我们需要一个属性的时,Javascript 引擎会先看当前对象中是否有这个属性, 如果没
有的话,就会查找他的 Prototype 对象是否有这个属性。function clone(proto) {
function Dummy() { }
Dummy.prototype = proto; Dummy.prototype.constructor = Dummy;
return new Dummy(); //等价于 Object.create(Person);
}
function object(old) { function F() {}; F.prototype = old; return new F();
}
var newObj = object(oldObject);
73、写一个通用的事件侦听器函数
`// event(事件)工具集,来源:https://github.com/markyun markyun.Event = {
// 页面加载完成后readyEvent : function(fn) {
if (fn==null) { fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') { window.onload = fn;
} else {
window.onload = function() { oldonload();
fn();
};
}
},
// 视能力分别使用 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.removeEnentListener) {
element.removeEnentListener(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;
},
// 获取 event 对象的引用,取到事件的所有信息,确保随时能使用 event; getEvent : function(e) {
var ev = e || window.event; if (!ev) {
var c = this.getEvent.caller; while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) { break;
}
c = c.caller;
}
}
return ev;
}
};
74、事件、IE 与火狐的事件机制有什么区别? 如何阻止冒泡?
1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会 产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制:IE 是事件冒泡、火狐是 事件捕获;
3. ev.stopPropagation();
75、什么是闭包(closure),为什么要用?
执行 say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得 Javascript 的垃圾回收机制 GC 不会收回 say667()所占用的资源,因为 say667()的内部函数的执行需要依赖 say667()中的变量。这是对闭包作用的非常直白的描述.
function say667() {
// Local variable that ends up within closure var num = 666;
var sayAlert = function() { alert(num); } num++;
return sayAlert;
}
var sayAlert = say667(); sayAlert()//执行结果应该弹出的 667
76、如何判断一个对象是否属于某个类?
使用 instanceof (待完善) if(a instanceof Person){
alert('yes');
}
77、new 操作符具体干了什么呢?
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。var obj = {};
obj. proto = Base.prototype; Base.call(obj);
78、JSON 的了解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于 JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小
{'age':'12', 'name':'back'}
79、js 延迟加载的方式有哪些
defer 和 async、动态创建 DOM 方式(用得最多)、按需异步载入 js
80、模块化怎么做?
立即执行函数,不暴露私有成员 var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1, m2 : m2
};
})();
81、异步加载的方式
(1) defer,只支持 IE
(2) async:
(3) 创建 script,插入到 DOM 中,加载完毕后 callBack
documen.write 和 innerHTML 的区别document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分
82、告诉我答案是多少?
(function(x){
delete x; alert(x);
})(1+5);
函数参数无法 delete 删除,delete 只能删除通过 for in 访问的属性。当然,删除失败也不会报错,所以代码运行会弹出“1”。
83、JS 中的 call()和 apply()方法的区别?
例子中用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
function add(a,b){ alert(a+b);
}
function sub(a,b){ alert(a-b);
}
add.call(sub,3,1);
84、Jquery 与 jQuery UI 有啥区别?
*jQuery 是一个 js 库,主要提供的功能是选择器,属性修改和事件绑定等等。
*jQuery UI 则是在 jQuery 的基础上,利用 jQuery 的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
85、jquery 中如何将数组转化为 json 字符串,然后再转化回来?
jQuery 中没有提供这个功能,所以你需要先编写两个 jQuery 的扩展:
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) { return JSON.parse(array)
}
然后调用:
$("").stringifyArray(array)
86、JavaScript 中的作用域与变量声明提升?
其他部分
(HTTP、正则、优化、重构、响应式、移动端、团队协作、SEO、UED、职业生涯)
*基于 Class 的选择性的性能相对于 Id 选择器开销很大,因为需遍历所有 DOM 元素。
*频繁操作的 DOM,先缓存起来再操作。用 Jquery 的链式调用更好。比如:var str=$("a").attr("href");
*for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快:
for (var i = size, length = arr.length; i < length; i++) {}
87、前端开发的优化问题(看雅虎 14 条性能优化原则)。
(1) 减少 http 请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页
Gzip,CDN 托管,data 缓存 ,图片服务器。
(2) 前端模板 JS+数据,减少由于 HTML 标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数
(3) 用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能。
(4) 当需要设置的样式很多时设置 className 而不是直接操作 style。
(5) 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
(6) 避免使用 CSS Expression(css 表达式)又称 Dynamic properties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用 table,table 要等其中的内容完全下载之后才会显示出来,显示比 div+css 布局慢。
88、http 状态码有那些?分别代表是什么意思?
100-199用于指定客户端应相应的某些动作。200-299用于表示请求成功。300-399用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
400 语义有误,当前请求无法被服务器理解。
401 当前请求需要用户验证
403 服务器已经理解请求,但是拒绝执行它。500-599 用于支持服务器错误。
503 – 服务不可用
89、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
要熟悉前后端的通信流程,最好把动态网站的背后细节也介绍一遍
八、流行框架
1、JQuery 的源码看过吗?能不能简单概况一下它的实现原理?
考察学习知识的态度,是否仅仅是停留在使用层面,要知其然知其所以然
2、jQuery.fn 的 init 方法返回的 this 指的是什么对象?为什么要返回 this?
this 执行 init 构造函数自身,其实就是 jQuery 实例对象,返回 this 是为了实现 jQuery 的链式操作
3、jquery 中如何将数组转化为 json 字符串,然后再转化回来?
$.parseJSON('{"name":"John"}');
4、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
递归赋值
5 、 jquery.extend 与 jquery.fn.extend 的 区 别 ? Jquery.extend 用来扩展 jQuery 对象本身;jquery.fn.extend 用来扩展 jQuery 实例6、谈一下 Jquery 中的 bind(),live(),delegate(),on()的区别?
7、JQuery 一个对象可以同时绑定多个事件,这是如何实现的?
可以同时绑定多个事件,低层实现原理是使用 addEventListner 与 attachEvent 兼容处理做事件注册
10、 Jquery 与 jQuery UI 有啥区别?
jQuery 是操作 dom 的框架,jQueryUI 是基于 jQuery 做的一个 UI 组件库
11、 jQuery 和 Zepto 的区别?各自的使用场景?
jQuery 主要用于 pc 端,当然有对应的 jQuerymobile 用于移动端,zepto 比 jQuery 更加小巧,主要用于移动端
12、 针对 jQuery 的优化方法?
优先使用 ID 选择器
在 class 前使用 tag(标签名) 给选择器一个上下文
慎用 .live()方法(应该说尽量不要使用) 使用 data()方法存储临时变量
13、 Zepto 的点透问题如何解决?
点透主要是由于两个 div 重合,例如:一个 div 调用 show(),一个 div 调用 hide(); 这个时候当点击上面的 div 的时候就会影响到下面的那个 div;
解决办法主要有 2 种:
1.github 上有一个叫做 fastclick 的库,它也能规避移动设备上 click 事件的延迟响应,https://github.com/ftlabs/fastclick
将它用 script 标签引入页面(该库支持 AMD,于是你也可以按照 AMD 规范,用诸如
require.js 的模块加载器引入),并且在 dom ready 时初始化在 body 上,
2.根据分析,如果不引入其它类库,也不想自己按照上述 fastclcik 的思路再开发一套东西,需要 1.一个优先于下面的“divClickUnder”捕获的事件;2.并且通过这个事件阻止掉默认行为(下面的“divClickUnder”对 click 事件的捕获,在 ios 的 safari, click 的捕获被认为和滚屏、点击输入框弹起键盘等一样,是一种浏览器默认行为,即可以被 event.preventDefault()阻止的行为)。
12、知道各种 JS 框架(Angular, Backbone, Ember, React, Meteor, Knockout...) 么? 能讲出他们各自的优点和缺点么?
知识面的宽度,流行框架要多多熟悉
13、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?
Underscore 的熟悉程度
14、使用过 angular 吗?angular 中的过滤器是干什么用的
在表达式中转换数据<p>姓名为 {{ lastName | uppercase }}</p>
currency,是什么过滤器——格式化数字为货币格式,单位是$符。
九、移动 APP 开发
1、移动端最小触控区域是多大?
移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有
300ms 延迟,为了实现 safari 的双击事件的设计,浏览器要知道你是不是要双击操作。)
十、NodeJs
1、对 Node 的优点和缺点提出了自己的看法:
*(优点)因为 Node 是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
因此构建在 Node 上的代理服务器相比其他技术实现(如 Ruby)的服务器表现要好得多。此外,与 Node 代理服务器交互的客户端代码是由 javascript 语言编写的,
因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
*(缺点)Node 是一个相对新的开源项目,所以不太稳定,它总是一直在变, 而且缺少足够多的第三方库支持。看起来,就像是 Ruby/Rails 当年的样子。
2、需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
至少给出自己的思路(url-hash,可以使用已有的一些框架 history.js 等)
6、Node.js 的适用场景?
1)、实时应用:如在线聊天,实时通知推送等等(如 http://socket.io)
2)、分布式应用:通过高效的并行 I/O 使用已有的数据
3)、工具类应用:海量的工具,小到前端压缩部署(如 grunt),大到桌面图形界面应用程序
4)、游戏类应用:游戏领域对实时和并发有很高的要求(如网易的 pomelo 框架)
5)、利用稳定接口提升 Web 渲染能力
6)、前后端编程语言环境统一:前端开发人员可以非常快速地切入到服务器端的开发(如著 名的纯 Javascript 全栈式 MEAN 架构)
4 、 ( 如 果 会 用 node) 知 道 route, middleware, cluster, nodemon, pm2, server-side rendering 么?
Nodejs 相关概念的理解程度
7、解释一下 Backbone 的 MVC 实现方式?
流行的 MVC 架构模式
8、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
熟悉前后端通信相关知识
7、对 Node 的优点和缺点提出了自己的看法?
优点:
1. 因为 Node 是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在 Node 上的代理服务器相比其他技术实现(如 Ruby)的服务器表现要好得多。
2. 与 Node 代理服务器交互的客户端代码是由 javascript 语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
缺点:
1. Node 是一个相对新的开源项目,所以不太稳定,它总是一直在变。
2. 缺少足够多的第三方库支持。看起来,就像是 Ruby/Rails 当年的样子(第三方库现在已经很丰富了,所以这个缺点可以说不存在了)。
十一、前端概括性问题
1、常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
使用率较高的框架有 jQuery、YUI、Prototype、Dojo、Ext.js、Mootools 等。尤其是
jQuery,超过 91%。
轻量级框架有 Modernizr、underscore.js、backbone.js、Raphael.js 等。(理解这些框架的功能、性能、设计原理)
前端开发工具:Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。开发过的插件:城市选择插件,汽车型号选择插件、幻灯片插件。弹出层。(写过开源
程序,加载器,js 引擎更好)
9、对 BFC 规范的理解?
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
3、99%的网站都需要被重构是那本书上写的?
网站重构:应用 web 标准进行设计(第 2 版)
4、WEB 应用从服务器主动推送 Data 到客户端有那些方式?
html5 websoket WebSocket 通过 Flash
XHR 长时间连接
XHR Multipart Streaming 不可见的 Iframe
<script>标签的长时间连接(可跨域)
5、加班的看法
加班就像借钱,原则应当是------救急不救穷
6、平时如何管理你的项目,如何设计突发大规模并发架构?
先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等
编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行); 标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
页面进行标注(例如 页面 模块 开始和结束);
CSS 跟 HTML 分文件夹并行存放,命名都得统一(例如 style.css) JS 分文件夹存放 命民以该 JS 功能为准英文翻译;
图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
7、那些操作会造成内存泄漏?
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用 数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
8、你说你热爱前端,那么应该 WEB 行业的发展很关注吧? 说说最近最流行的一些东西吧?
Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs
9、你有了解我们公司吗?说说你的认识?
因为我想去阿里,所以我针对阿里的说
最羡慕就是在双十一购物节,350.19 亿元,每分钟支付 79 万笔。海量数据,居然无一漏单、
无一故障。太厉害了。
10、 移动端(比如:Android IOS)怎么做好用户体验?
融入自己的设计理念,注重用户体验,选择合适的技术
11、 你所知道的页面性能优化方法有那些?
压缩、合并,减少请求,代码层析优化。。。
12、 除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?
知识面宽度,最好熟悉一些后台语言,比如 php,展现出自己的技术两点
13、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition) 规范区别?
14、谈谈你认为怎样做能使项目做的更好?
考虑问题的深入,不仅仅停留在完成任务上,要精益求精
15、你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
表现出对前端的认同与兴趣,关注相关技术前沿
16、php 中下面哪个函数可以打开一个文件,以对文件进行读和写操作?
A.fget(); B.file_open(); C.fopen(); D.open_file();
17、php 中 rmdir 可以直接删除文件夹吗?该目录必须是空的,而且要有相应的权限--来自 api
A.任何文件夹都可以删除 B.空文件夹可以删除
C.有权限的任何文件夹都可以删除 D.有权限的空文件夹可以删除
18、phpinset 和 empty 的区别,举例说明
1、empty 函数
用途:检测变量是否为空
判断:如果 var 是非空或非零的值,则 empty() 返回 FALSE。换句话说,""、0、"0"、NULL、
FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的,如果 var 为空, 则返回 TRUE。注意:empty() 只检测变量,检测任何非变量的东西都将导致解析错误。换句话说,后边的语句将不会起作用;
2、isset 函数
用途:检测变量是否设置
判断:检测变量是否设置,并且不是 NULL。如果已经使用 unset() 释放了一个变量之后, 它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量,将返回 FALSE。同时要注意的是一个 NULL 字节("0")并不等同于 PHP 的 NULL 常数。
19、php 中$_SERVER 变量中如何得到当前执行脚本路劲
![a5a530200aa39994322ef4a879277c7d.png](https://i-blog.csdnimg.cn/blog_migrate/bd615ed1fcc7f3ade91b8e683522cf89.png)
20、写一个 php 函数,要求两个日期字符串的天数差,如 2012-02-05~2012-03-06 的日期差数
21、一个衣柜中放了许多杂乱的衬衫,如果让你去整理一下,使得更容易找到你想要的衣服;你会怎么做?请写出你的做法和思路?
22、如何优化网页加载速度?
1.减少 css,js 文件数量及大小(减少重复性代码,代码重复利用),压缩 CSS 和 Js 代码
2.图片的大小
3.把 css 样式表放置顶部,把 js 放置页面底部4.减少 http 请求数
5.使用外部 Js 和 CSS
23、工作流程,你怎么来实现页面设计图,你认为前端应该如何高质量完成工作?
熟悉相关设计规范,自己总结的一些经验 24、介绍项目经验、合作开发、独立开发。团队协作,个人能力。实践经验
25、开发过程中遇到困难,如何解决。
考察解决问题的能力
26、对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。1、实现界面交互
2、提升用户体验
3、有了 Node.js,前端可以实现服务端的一些事情
前端是最贴近用户的程序员,前端的能力就是能让产品从 90 分进化到 100 分,甚至更好, 参与项目,快速高质量完成实现效果图,精确到 1px;
与团队成员,UI 设计,产品经理的沟通; 做好的页面结构,页面重构和用户体验; 处理 hack,兼容、写出优美的代码格式;
针对服务器的优化、拥抱最新前端技术。
其它相关的加分项:
1. 都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?
2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?
3. 瀑布流布局或者流式布局是否有了解
4. HTML5 都有哪些新的 API?
5. 都用过什么代码调试工具?
6. 是否有接触过或者了解过重构。
7.你遇到过比较难的技术问题是?你是如何解决的?