前端面试常见知识点

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 的过程。

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

  3. 设置响应HTTP请求状态变化的函数

  4. 发送HTTP请求

  5. 获取异步调用返回的数据

  6. 使用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

}

left浮动
right浮动
3、父级div定义 overflow:hidden 对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

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的优点和缺点提出了自己的看法？
优点：

  1. 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。

  2. 与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

缺点：

  1. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。

  2. 缺少足够多的第三方库支持。看起来，就像是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会将文档中不同类型的元素(这里不元素并不特指

这种tag,还包括属性，注释，文本之类）都看作为不同的节点。

上图描述了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等前端工作流的使用

posted @ 2019-04-25 18:20  Letyo  阅读(150)  评论(0)  编辑  收藏  举报