JavaScript
· JavaScript原型,原型链 ? 有什么特点?
· eval是做什么的?
·
它的功能是把对应的字符串解析成
JS
代码并运行;
应该避免使用
eval
,不安全,非常耗性能(
2
次,一次解析成
js
语句,一次执行)。
· null,undefined 的区别?
· 写一个通用的事件侦听器函数。
·
// event(
事件
)
工具集,来源:
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;
·
}
·
};
· Node.js的适用场景?
高并发、聊天、实时消息推送
· 介绍js的基本数据类型。
number,string,boolean,object,undefined
· Javascript如何实现继承?
通过原型和构造器
· [“1″,”2”, “3”].map(parseInt) 答案是多少?
[1, NaN, NaN]
因为
parseInt
需要两个参数
(val, radix)
但
map
传了
3
个
(element, index, array)
· 如何创建一个对象? (画出此对象的内存图)
·
function Person(name, age) {
·
this.name = name;
·
this.age = age;
·
this.sing = function() { alert(this.name) }
·
}
· 谈谈This对象的理解。
·
this
是
js
的一个关键字,随着函数使用场合不同,
this
的值会发生变化。
·
·
但是有一个总原则,那就是
this
指的是调用函数的那个对象。
·
·
this
一般情况下:是全局对象
Global
。
作为方法调用,那么
this
就是指这个对象
· 事件是?IE与火狐的事件机制有什么区别?如何阻止冒泡?
·
1.
我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被
JavaScript
侦测到的行为。
·
2.
事件处理机制:
IE
是事件冒泡、火狐是
事件捕获;
3. ev.stopPropagation();
· 什么是闭包(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
· “use strict”;是什么意思 ? 使用它的好处和坏处分别是什么?
· 如何判断一个对象是否属于某个类?
·
使用
instanceof
(待完善)
·
·
if(a instanceof Person){
·
alert('yes');
}
· new操作符具体干了什么呢?
·
1
、创建一个空对象,并且
this
变量引用该对象,同时还继承了该函数的原型。
·
2
、属性和方法被加入到
this
引用的对象中。
·
3
、新创建的对象由
this
所引用,并且最后隐式的返回
this
。
·
·
var obj = {};
·
obj.__proto__ = Base.prototype;
·
Base.call(obj);
· Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
hasOwnProperty
· JSON 的了解?
·
JSON(JavaScript Object Notation)
是一种轻量级的数据交换格式。
·
它是基于
JavaScript
的一个子集。数据格式简单
,
易于读写
,
占用带宽小
{'age':'12', 'name':'back'}
· js延迟加载的方式有哪些?
defer
和
async
、动态创建
DOM
方式(用得最多)、按需异步载入
js
· ajax 是什么?
· 同步和异步的区别?
· 如何解决跨域问题?
jsonp
、
iframe
、
window.name
、
window.postMessage
、服务器上设置代理页面
· 模块化怎么做?
立即执行函数,不暴露私有成员
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
· AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
· 异步加载的方式有哪些?
·
(1) defer
,只支持
IE
·
·
(2) async
:
·
(3)
创建
script
,插入到
DOM
中,加载完毕后
callBack
· documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
· .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);
· Jquery与jQuery UI 有啥区别?
·
*jQuery
是一个
js
库,主要提供的功能是选择器,属性修改和事件绑定等等。
·
·
*jQuery UI
则是在
jQuery
的基础上,利用
jQuery
的扩展性,设计的插件。
提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
· JQuery的源码看过吗?能不能简单说一下它的实现原理?
· jquery 中如何将数组转化为json字符串,然后再转化回来?
jQuery中没有提供这个功能,所以你需要先编写两个jQuery的扩展:
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
然后调用:
$("").stringifyArray(array)
· 针对 jQuery 的优化方法?
·
*
基于
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++) {}
· JavaScript中的作用域与变量声明提升?
· 如何编写高性能的Javascript?
· 那些操作会造成内存泄漏?
·
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
·
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为
0
(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
·
·
setTimeout
的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
· JQuery一个对象可以同时绑定多个事件,这是如何实现的?
其他问题
· 你遇到过比较难的技术问题是?你是如何解决的?
· 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
· 页面重构怎么操作?
· 列举IE 与其他浏览器不一样的特性?
· 99%的网站都需要被重构是那本书上写的?
· 什么叫优雅降级和渐进增强?
· WEB应用从服务器主动推送Data到客户端有那些方式?
· 对Node的优点和缺点提出了自己的看法?
·
*
(优点)因为
Node
是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
·
因此构建在
Node
上的代理服务器相比其他技术实现(如
Ruby
)的服务器表现要好得多。
·
此外,与
Node
代理服务器交互的客户端代码是由
javascript
语言编写的,
·
因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
·
·
*
(缺点)
Node
是一个相对新的开源项目,所以不太稳定,它总是一直在变,
而且缺少足够多的第三方库支持。看起来,就像是
Ruby/Rails
当年的样子。
· 你有哪些性能优化的方法?
·
(看雅虎
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
布局慢。
· http状态码有那些?分别代表是什么意思?
·
100-199
用于指定客户端应相应的某些动作。
·
200-299
用于表示请求成功。
·
300-399
用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
·
400-499
用于指出客户端的错误。
400 1
、语义有误,当前请求无法被服务器理解。
401
当前请求需要用户验证
403
服务器已经理解请求,但是拒绝执行它。
500-599
用于支持服务器错误。
503 –
服务不可用
· 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
·
查找浏览器缓存
·
DNS
解析、查找该域名对应的
IP
地址、重定向(
301
)、发出第二个
GET
请求
·
进行
HTTP
协议会话
·
客户端发送报头
(
请求报头
)
·
服务器回馈报头
(
响应报头
)
·
html
文档开始下载
·
文档树建立,根据标记请求所需指定
MIME
类型的文件
·
文件显示
·
[
·
浏览器这边做的工作大致分为以下几步:
·
·
加载:根据请求的
URL
进行域名解析,向服务器发起请求,接收文件(
HTML
、
JS
、
CSS
、图象等)。
·
·
解析:对加载到的资源(
HTML
、
JS
、
CSS
等)进行语法解析,建议相应的内部数据结构(比如
HTML
的
DOM
树,
JS
的(对象)属性表,
CSS
的样式规则等等)
}
· 除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?
· 你常用的开发工具是什么,为什么?
· 对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
·
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
·
1
、实现界面交互
·
2
、提升用户体验
·
3
、有了
Node.js
,前端可以实现服务端的一些事情
·
·
前端是最贴近用户的程序员,前端的能力就是能让产品从
90
分进化到
100
分,甚至更好,
·
·
参与项目,快速高质量完成实现效果图,精确到
1px
;
·
·
与团队成员,
UI
设计,产品经理的沟通;
·
·
做好的页面结构,页面重构和用户体验;
·
·
处理
hack
,兼容、写出优美的代码格式;
·
针对服务器的优化、拥抱最新前端技术。
· 加班的看法?
加班就像借钱,原则应当是
------
救急不救穷
· 平时如何管理你的项目?
·
先期团队必须确定好全局样式(
globe.css
),编码模式
(utf-8)
等
·
·
编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
·
·
标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
·
·
页面进行标注(例如
页面
模块
开始和结束);
·
·
CSS
跟
HTML
分文件夹并行存放,命名都得统一(例如
style.css
)
·
·
JS
分文件夹存放
命民以该
JS
功能为准英文翻译;
·
图片采用整合的
images.png png8
格式文件使用
尽量整合在一起使用方便将来的管理
· 如何设计突发大规模并发架构?
· 说说最近最流行的一些东西吧?常去哪些网站?
Node.js
、
Mongodb
、
npm
、
MVVM
、
MEAN
、
three.js
· 移动端(Android IOS)怎么做好用户体验?
·
清晰的视觉纵线、信息的分组、极致的减法、
·
利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盘利用、
· 你在现在的团队处于什么样的角色,起到了什么明显的作用?
· 你认为怎样才是全端工程师(Full Stack developer)?
· 介绍一个你最得意的作品吧?
· 你的优点是什么?缺点是什么?
· 如何管理前端团队?
· 最近在学什么?能谈谈你未来3,5年给自己的规划吗?
· 想问公司的问题?
·
问公司问题:
·
目前关注哪些最新的
Web
前端技术(未来的发展方向)?
·
前端团队如何工作的(实现一个产品的流程)?