前端面试常见知识点
1、JavaScript this指针、闭包、作用域
this:指向调用上下文
闭包:内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
闭包的好处:
(1)不增加额外的全局变量,
(2)执行过程中所有变量都是在匿名函数内部。
闭包的缺点:
(1)滥用闭包函数会造成内存泄露,因为闭包中引用到的包裹函数中定义的变量都永远不会被释放,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在必要的时候,及时释放这个闭包函数,(在退出函数之前,将不使用的局部变量全部删除。)
(2) 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
作用域:作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。
全局作用域:在代码中任何地方都能访问到的对象拥有全局作用域
(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域
(2)所有末定义直接赋值的变量自动声明为拥有全局作用域
(3)所有window对象的属性拥有全局作用域
局部作用域(Local Scope) :
和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域称为函数作用域,
2. Javascript作用域链?
理解变量和函数的访问范围和生命周期,全局作用域与局部作用域的区别,JavaScript中没有块作用域,函数的嵌套形成不同层次的作用域,嵌套的层次形成链式形式,通过作用域链查找属性的规则需要深入理解。
"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
3、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);
9、继承的多种方式
例子:b继承a的方法
function b(){}
b.protoototype=new a;
10、事件委托是什么
符合W3C标准的事件绑定addEventLisntener /attachEvent
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
11 ‘Javascript的事件流模型有什么?
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡
99、字符串反转,如将 '12345678' 变成 '87654321'
//大牛做法;
//思路:先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒数组,再利用 jion() 转换为字符串
var str = '12345678';
str = str.split('').reverse().join('');
15、javascript的本地对象,内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
16.不同浏览器的兼容前缀?
-ms-transform:rotate(30deg); /* IE 9 /
-moz-transform:rotate(30deg); / Firefox /
-webkit-transform:rotate(30deg); / Safari and Chrome /
-o-transform:rotate(30deg); / Opera */
17、Jquery与jQuery UI 有啥区别?
*jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。
提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
18、针对 jQuery 的优化方法?
a、优先使用ID选择器
b、jquery获取到的DOM元素如果需要多次使用,建议使用一个变量将其保存起来,因为操作DOM的过程是非常耗费性能的
c、在class前使用tag(标签名)
d、给选择器一个上下文
e、慎用 .live()方法(应该说尽量不要使用)
f、使用data()方法存储临时变量
19、请尽可能详尽的解释ajax的工作原理
思路:先解释异步,再解释ajax如何使用jscript标签来加载)
· "json": 返回 JSON 数据 。
· "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
· "text": 返回纯文本字符串
error
类型:Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。
如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件。
写一个post请求并带有发送数据和返回数据的样例
$.ajax({
url:"1.html",
data:{name:"张三",age:18},//post数据
dataType:"json",
type:"POST",
success:function(data){
//data:返回的数据
},
error:function(){
//异常处理
}
});
5、简述ajax 的过程。
-
创建XMLHttpRequest对象,也就是创建一个异步调用对象
-
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
-
设置响应HTTP请求状态变化的函数
-
发送HTTP请求
-
获取异步调用返回的数据
-
使用JavaScript和DOM实现局部刷新
96、解释jsonp的原理,以及为什么不是真正的ajax
JSONP的最基本的原理是:动态添加一个
如何区分:
DOCTYPE声明新增的结构元素、功能元素
28、如何垂直居中一个浮动元素?
// 方法一:已知元素的高宽
`#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}
`
//方法二:未知元素的高宽
`#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}`
那么问题来了,如何垂直居中一个?(用更简便的方法。)
`#container //的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}`
Doctype的作用?严格模式与混杂模式的区别?
用于告知浏览器该以何种模式来渲染文档严格模式下:页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容
行内元素有哪些?块级元素有哪些?CSS的盒模型?
答:块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
本地存储(Local Storage )和cookies(储存在用户本地终端上的数据)之间的区别是什么?
Cookies:服务器和客户端都可以访问;大小只有4KB左右;有有效期,过期后将会删除;
本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器;每个域5MB;没有过期数据,它将保留知道用户从浏览器清除或者使用Javascript代码移除
前端开发的优化问题(看雅虎14条性能优化原则)。
参考资料:J:\代码,PPT,笔记,电子书\面试题\雅虎14条优化规则.docx
(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布局慢。
11、 你所知道的页面性能优化方法有那些?
压缩、合并,减少请求,代码层析优化。。。
22、如何优化网页加载速度?
1.减少css,js文件数量及大小(减少重复性代码,代码重复利用),压缩CSS和Js代码
2.图片的大小
3.把css样式表放置顶部,把js放置页面底部
4.减少http请求数
5.使用外部 Js 和 CSS
5、你如何对网站的文件和资源进行优化?
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
6.清除浮动?
1、对父级设置适合CSS高度:小结,使用设置高度样式,清除浮动产生,前提是对象内容高度要能确定并能计算好。
2、clear:both清除浮动: 在父级“”结束前加此div引入“class="clear"”样式。这样即可清除浮动。方便适用,但会多加CSS和HTML标签。clear{clear:both
}
4、 //一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
5、父级div定义overflow:auto
6、父级div也一起浮动
7、父级div定义display:table
8、结尾处加br标签clear:both
前端概括性问题
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引擎更好)
NodeJs了解
7、对Node的优点和缺点提出了自己的看法?
优点:
-
因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
-
与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
缺点:
-
Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。
-
缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子(第三方库现在已经很丰富了,所以这个缺点可以说不存在了)。
1.Javascript
今天让我们站在语言的高度来看一下Javascript都有点什么。因为是全局性的俯瞰,所以不针对细节作详细的讲解。
先来看一张图吧:
解释一下:
核心(ECMAScript):定义了脚本语言的所有对象,属性和方法。文档对象模型(DOM):HTML和XML应用程序接口。浏览器对象模型(BOM):对浏览器窗口进行访问操作
现在来具体的讲一个各个成分:
关于ECMAScript
ECMAScript的工作是定义语法和对象,从最基本的数据类型、条件语句、关键字、保留字到 异常处理和对象定义都是它的范畴。在ECMAScript范畴内定义的对象也叫做原生对象。其实上它就是一套定义了语法规则的接口,然后由不同的浏览器对 其进行实现,最后我们输写遵守语法规则的程序,完成应用开发需求。
关于DOM
根据DOM的定义(HTML和XML应用程序接口)可知DOM由两个部分组成,针对于XML的DOM即DOM Core和针对HTML的DOM HTML。那DOM Core 和DOM HTML有什么区别与联系呢?DOM Core的核心概念就是节点(Node)。DOM会将文档中不同类型的元素(这里不元素并不特指
上图描述了DOM CORE的结构图,比较专业,来看一个简单的:
view sourceprint?
1
2 hello world
3
来看一下这段代码在标准浏览器里的DOM表现:
div和span元素被展现成了一个元素节点,对应到节点结构图中的Element元素。"hello world"和div与span之间的间隔,被展现成了文本节点,对应到节点结构图中的CharacterDate元素。DOM CORE在解析文档时,会将所有的元素、属性、文本、注释等等视为一个节点对象(或继承自节点对象的对象,多态、向上转型),根据文本结构依次展现,最后行成了一棵"DOM树"。
DOM HTML的核心概念是HTMLElement,DOM HTML会将文档中的元素(这里的元素特指这种tag,不包括注释,属性,文本)都视为HTMLElement。而元素的属性,则为HTMLElement的属性。
再来看一个示例:
从Node接口提供的属性,myElement.attributes["id"].value;很明显myElement.attributes["id"]返回一个对象.value是得到对象的value属性。Element实现的方法返回 myElement.getAttributes("id");很明显此时id现在只是一个属性而已,这只是一个得到属性的操作。
其实上DOM Core和DOM html的外部调用接口相差并不是很大,对于html文档可以用DOM html进行操作,针对xhtml可以用DOM Core。
关于BOM
老规则,先来一张图:
BOM与浏览器紧密结合,这些对象也被称为是宿主对象,即由环境提供的对象。这里要强调一个奇怪 的对象Global对象,它代表一个全局对象,Javascript是不允许存在独立的函数,变量和常量,如果没有额外的定义,他们都作为Global对 象的属性或方法来看待.像parseInt(),isNaN(),isFinite()等等都作为Global对象的方法来看待,像 Nan,Infinity等"常量"也是Global对象的属性。像Boolean,String,Number,RegExp等内置的全局对象的构造函 数也是Global对象的属性.但是Global对象实际上并不存在,也就是说你用Global.NaN访问NaN将会报错。实际上它是由window来 充当这个角色,并且这个过程是在javascript首次加载时进行的。
36、模块化开发怎么做?
理解模块化开发模式:浏览器端requirejs,seajs;服务器端nodejs;ES6模块化;fis、webpack等前端整体模块化解决方案;grunt、gulp等前端工作流的使用