面试常见技术问题

HTML+CSS

1.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

2.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML元素必须被正确地嵌套。

XHTML元素必须被关闭。

标签名必须用小写字母。

XHTML文档必须拥有根元素。

3.Doctype?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3h4 form ul

行内元素: a b br ispan input select

Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联内嵌外链导入

区别：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符类选择符id选择符

继承不如指定Id>class>标签选择

后者优先级高

7.前端页面有哪三层构成，分别是什么?作用是什么?

结构层Html表示层CSS行为层js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核)火狐（Gecko）谷歌（webkit）opear(Presto)

10.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的使用display

2.3像素问题使用float引起的使用dislpay:inline-3px

3.超链接hover点击后失效使用正确的书写顺序linkvisited hover active

4.Ie z-index问题给父级添加position:relative

5.Png透明使用js代码改

6.Min-height最小高度！Important解决’

7.select在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08

line-height:1px）

11.标签上title与alt属性的区别是什么?

Alt当图片不显示是用文字代表。

Title为该属性提供信息

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

13.解释css sprites，如何使用。

Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型渲染模式的不同

使用window.top.document.compatMode可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML?

直观的认识标签对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动clear:both（理论上能清楚任何标签，，，增加无意义的标签）

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

18简述一下src与href的区别

href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

19什么叫优雅降级和渐进增强？

渐进增强progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a.优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b.渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c.降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

20浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

JavaScript部分

1怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点

createDocumentFragment()

//创建一个DOM片段

createElement()

//创建一个具体的元素

createTextNode()

//创建一个文本节点

2）添加、移除、替换、插入

appendChild()

//添加

removeChild()

//移除

replaceChild()

//替换

insertBefore()

//插入

3）查找

getElementsByTagName()

//通过标签名称

getElementsByName()

//通过元素的Name属性的值

getElementById()

//通过元素Id，唯一性

2实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

/**

*对象克隆

*支持基本数据类型及对象

*递归方法

*/

functionclone(obj) {

var o;

switch (typeof obj) {

case "undefined":

break;

case "string":

o = obj + "";

break;

case "number":

o = obj - 0;

break;

case "boolean":

o = obj;

break;

case "object": // object分为两种情况对象（Object）或数组（Array）

if (obj === null) {

o = null;

} else {

if(Object.prototype.toString.call(obj).slice(8, -1) === "Array") {

o = [];

for (var i = 0; i

o.push(clone(obj[i]));

}

} else {

o = {};

for (var k in obj) {

o[k] = clone(obj[k]);

}

}

}

break;

default:

o = obj;

break;

}

return o;

}

3如何消除一个数组里面重复的元素？

//方法一：

var arr1=[1,2,2,2,3,3,3,4,5,6],

arr2 = [];

for(var i =0,len = arr1.length; i< len; i++){

if(arr2.indexOf(arr1[i]) < 0){

arr2.push(arr1[i]);

}

}

document.write(arr2);// 1,2,3,4,5,6

4在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

functionlog(){

var args =Array.prototype.slice.call(arguments);

//为了使用unshift数组方法，将argument转化为真正的数组

args.unshift('(app)');

console.log.apply(console, args);

};

5Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

6请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

7web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

8统计字符串中字母个数或统计最多字母数。

var str ="aaaabbbccccddfgh";

var obj= {};

for(vari=0;i

var v = str.charAt(i);

if(obj[v] && obj[v].value == v){

obj[v].count = ++ obj[v].count;

}else{

obj[v] = {};

obj[v].count = 1;

obj[v].value = v;

}

}

for(key inobj){

document.write(obj[key].value+'='+obj[key].count+' '); // a=4b=3c=4d=2f=1g=1h=1

}

jQuery的事件委托方法on、live、delegate之间有什么区别？

9如何理解闭包？

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点：

·由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

·闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

10跨域请求资源的方法有哪些？

Angular方面

1. ng-show/ng-hide与ng-if的区别？

我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.

2.解释下什么是$rootScrope以及和$scope的区别？

通俗的说$rootScrope页面所有$scope的父亲。

我们来看下如何产生$rootScope和$scope吧。

step1:Angular解析ng-app然后在内存中创建$rootScope。

step2:angular回继续解析，找到{{}}表达式，并解析成变量。

step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

3.表达式{{yourModel}}是如何工作的？

它依赖于$interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{{}}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个作用域上。

4. Angular中的digest周期是什么？

每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。更深层次的研究，可以移步The Digest Loop and apply。

5.如何取消$timeout,以及停止一个$watch()?

停止$timeout我们可以用cancel：

var customTimeout = $timeout(function () {

// your code

}, 1000);

$timeout.cancel(customTimeout);

停掉一个$watch：

// .$watch()会返回一个停止注册的函数

function that we store to a variable

var deregisterWatchFn =$rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {

if (newVal) {

// we invoke thatderegistration function, to disable the watch

deregisterWatchFn();

...

}

});

6. Angular Directive中restrict中分别可以怎样设置？scope中@,=,&有什么区别？

restrict中可以分别设置:

A匹配属性

E匹配标签

C匹配class

M匹配注释

当然你可以设置多个值比如AEC,进行多个匹配。

在scope中，@,=,&在进行值绑定时分别表示

@获取一个设置的字符串，它可以自己设置的也可以使用{{yourModel}}进行绑定的;

=双向绑定，绑定scope上的一些属性；

&用于执行父级scope上的一些表达式，常见我们设置一些需要执行的函数

angular.module('docsIsolationExample', [])

.controller('Controller', ['$scope', function($scope) {

$scope.alertName = function() {

alert('directive scope&');

}

}])

.directive('myCustomer', function() {

return {

restrict: 'E',

scope: {

clickHandle: '&'

},

template: 'Click Me',

controller: function($scope) {

$scope.testClick = function() {

$scope.clickHandle();

}

}

};

});

Codepen Demo

<进行单向绑定。

7.列出至少三种实现不同模块之间通信方式？

Service

events,指定绑定的事件

使用$rootScope

controller之间直接使用$parent, $$childHead等

directive指定属性进行数据绑定

8.有哪些措施可以改善Angular性能

官方提倡的，关闭debug,$compileProvider

myApp.config(function ($compileProvider) {

$compileProvider.debugInfoEnabled(false);

});

使用一次绑定表达式即{{::yourModel}}

减少watcher数量

在无限滚动加载中避免使用ng-repeat,关于解决方法可以参考这篇文章

使用性能测试的小工具去挖掘你的angular性能问题，我们可以使用简单的console.time()也可以借助开发者工具以及Batarang

console.time("TimerName");

//your code

console.timeEnd("TimerName");

9.你认为在Angular中使用jQuery好么？

这是一个开放性的问题，尽管网上会有很多这样的争论，但是普遍还是认为这并不是一个特别好的尝试。其实当我们学习Angular的时候，我们应该做到从0去接受angular的思想，数据绑定，使用angular自带的一些api，合理的路由组织和，写相关指令和服务等等。angular自带了很多api可以完全替代掉jQuery中常用的api，我们可以使用angular.element，$http,$timeout,ng-init等。

我们不妨再换个角度，如果业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可以让它在解决问题，比如使用插件上有更多的选择，当然这是通过影响代码组织来提高工作效率，随着对于angular理解的深入，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。

所以我觉得两种框架说完全不能一起用肯定是错的，但是我们还是应该尽力去遵循angular的设计。

10.如何进行angular的单元测试

我们可以使用karam＋jasmine进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。一段简单的测试代码：

describe('calculator', function () {

beforeEach(module('calculatorApp'));

var $controller;

beforeEach(inject(function(_$controller_){

$controller = _$controller_;

}));

describe('sum', function () {

it('1 + 1 should equal 2',function () {

var $scope = {};

var controller =$controller('CalculatorController', { $scope: $scope });

$scope.x = 1;

$scope.y = 2;

$scope.sum();

expect($scope.z).toBe(3);

});

});

});