面试题集锦

基础问题

 

1. = 和 == 和 === 的区别？

= : 用于赋值 
== : 用于判断 
=== : 用于判断，必须类型和值同时相等才是等

 

2.有几种方式清除浮动？

  1. 父级元素 overflow: hidden;
  2. 浮动元素后面的元素 clear: both;
  3. 伪元素选择器: .clear:after { content: ''; display: block; clear: both; }
  4. 父级元素设置高度
  5. 父级元素 display: table;
 

3.请解释JS中的闭包？

闭包：外部函数持有，返回外部函数变量的内部函数。

　　闭包通常采用匿名自执行函数作为外部函数
　　js中天生不存在常量的概念 常量：程序中可以被访问使用，但不允许被修改的数据
　　闭包是一种封装的理念
　　使用闭包模拟常量

 　　闭包主要的功能：配合外部函数创建独立的命名空间

　　js本身不存再块级作用域，使用函数模拟，通常使用匿名自执行函数，独立命名空间最显著的好处是不会污染全局命名空间。

　　 闭包的缺点：一旦外层函数变量被闭包持有，直到该闭包被销毁，内部函数的作用域都会始终存在于运行环境中，造成内存空间被占用，如果滥用大量闭包，程序会消耗大量内存

 

// 示例代码
var add = (function () {
    var count = 0;
    return function () {
        return ++count;
    };
})();

add(); // 1
add(); // 2
add(); // 3



4.常见兼容性问题？

1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8

2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 
浮动ie产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 10px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。 
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css.bb{/所有识别/.background-color:#00deff\9;/IE6、7、8识别/+background-color:#a200ff;/IE6、7识别/_background-color:#1e0bd1;/IE6识别/}

4.IE下,既可以使用获取常规属性的方法来获取自定义属性, 又可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.

5.IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

6.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust:none; 解决. 如果这一属性也不成 使用 transform:scale 来实施

7.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active样式了 
解决方法是改变CSS属性的排列顺序:LoVe-HA:a:link{}a:visited{}a:hover{}a:active{}

 

5.如何实现浏览器内多个标签页之间同域页面的通信?

调用localstorge、cookies等本地存储方式

 

6.原型、原型链及构造函数

 

什么是原型：

每一个函数对象都有一个prototype属性，这个属性就是对象的原型而多个构造函数相互继承，将彼此的原型对象进行关联，组成一条链型结构

原型最大的重要的作用是为所有实例提供公共的空间。原型内的属性可以提供给构造函数的实例复用！

每一个实例都有一个__proto__属性指向构造函数的原型！

 

什么是原型链：

原型通过继承关系链接到一起组成的一种链型结构，叫做原型链

 

属性查找机制：

首先查找自身私有属性，没有则沿着原型链逐级向上查找，优先级逐渐降低，找到则返回属性值，没有则返回undefined！

 

什么是构造函数：

构造函数是一种特殊的函数，用于创建同类对象

 

构造函数和普通函数的区别：

 1、构造函数名首字母大写
 2、构造函数内部使用this关键字处理属性赋值逻辑（构造函数内部this代表新对象）
 3、构造函数不使用return关键字返回新对象
 4、构造函数使用new关键字执行函数

 

构造函数与实例的关系：

 实例是new+构造函数创建的对象，新对象叫做构造函数的实例，实例与构造函数之间是多对一的关系。

 

7、继承

 

实现继承的方式通常有三种方式：基于原型的继承 伪造构造函数继承  组合方式继承

 

原型的继承：js中原型继承通常是一种上级函数对下级函数实例开放原型访问权限的行为。将上级函数的实例赋值给下级函数的原型

优点：通过原型方式继承，底层函数可以逐级向上复用上级函数原型空间

缺点：下级函数无法复用上级函数的私有属性初始逻辑，上级实例的私有属性会进入到下级函数的原型中，即使是undefined也会被当做有效属性进行查找

 

伪造构造函数方式继承：(call、apply)并没有关联上下级函数的原型，而是仅仅让下级函数借用了上级函数初始化私有属性的代码，可实现多继承

优点：可以实现多继承，还可以复用上级函数私有属性初始化逻辑

缺点：此种继承和原型无关，下级函数无法复用上级函数的原型

 

组合方式继承：基于上面两种继承方式进行混合实现

 

 

8、普通数据类型

普通数据类型  number  string  undefined  null  boolean

 

9、垃圾回收机制

垃圾回收清理内存中无用的对象，释放内存空间 简称：GC


 标记清除 引用计数

 

 主流垃圾回收方式有两种


 1、标记清除：目前js主流垃圾回收机制。清除逻辑：标记内存中所有对象，检查不在运行环境中的对象，取消标记，，检查后清除不带有标记的对象，释放内存空间


 2、引用计数：因为少数IE核心中bom和dom仍使用C系列语言实现，所有保留其引用计数垃圾回收方式。逻辑：当一个对象在内存中存在一个引用，计数为1，每多一个引用计数+1，当垃圾回收执行时，清除引用计数为0的对象


 引用计数最大的问题是当对象存在循环引用，两个对象都永远无法销毁

 

 js不推荐程序猿主动触发垃圾回收，依赖js核心自动的垃圾回收周期

 

 垃圾回收时所有代码执行暂停，所以不建议程序猿自主调用回收函数触发回收

 

 垃圾回收优化：采用分批次，分优先级等算法，尽量减少单次垃圾回收耗时。

 

HTML相关问题

 

1.HTML5新标签？

nav / header / footer / section / article / aside / detail / summary

video / audio / source / canvas / figure / figcaption

time / progress / mark

 

2.HTML5新表单元素?

url / email / date / datetime / time / week / month / search / range / color

 

3.HTML5中有哪些新功能？

  • 本地存储： localStorage / sessionStorage
  • 离线缓存： Manifest
  • 新标签： canvas / video / audio
  • 拖放API： drag drop
  • 地理位置： geolocation
  • 浏览器后台执行：web worker
 

4.请解释Cookie、sessionStroage、localStroage的区别？

Cookie: 存储数据量小，可以设置存储时间，到期自动删除 
sessionStroage: 将数据临时存储，离开当前页面就删除 
localStroage: 将数据保存到设备上，可以实现永久存储，需要主动删除

 

5.描述application cache更新的过程?

第一次访问缓存manifest文件里列的文件，之后访问先加载缓存，在后台加载manifest文件按字节对比看是否有变化，如果没变化则说明缓存未失效，否则在后台按列表更新缓存，在下一次刷新页面的时候使用新的资源

 

6.iframe有那些缺点?

1.iframe会阻塞主页面的Onload事件

2.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

3.iframe 会降低页面整体性能， 之前QQ空间的数据是页面每新增一个iframe，性能下降10%。 更多详细内容， 参见知乎问答： http://www.zhihu.com/question/20653055




 

CSS相关问题

 

1.CSS3新属性？

  • 更多的选择器
  • 弹性布局： flex
  • 帧动画： keyframes / animations
  • 过渡动画： transition
  • 多列布局： column
  • 背景渐变： linear-gradient / radial-gradient
  • 背景属性： background-image / background-size / background-clip / background-origin
  • 边框、阴影： border-image / border-radius / box-shadow
  • 2D、3D变换： transform / transform-origin
  • 用户界面属性添加： box-sizing / outline-offset / cursor更多属性值
 

2.请简述flex布局？

CSS3中的新增的特性，也称为弹性布局。

使用flex布局，会更加快速与方便，但是有一定的兼容问题（display: -webkit-flex）。

主要含有主轴、交叉轴的概念，通过弹性布局，可以非常方便的设置元素的左对齐、右对齐、上对齐、下对齐、居中对齐等等各种对齐方式，快速实现页面效果。

常用属性有: flex-direction / flex-wrap / justify-content / align-items / align-content / flex-grow /flex-shrink / flex-basis / align-self / 等等

 

3.rem如何使用？

CSS3中的一个新单位

和em的区别是rem单位只针对HTML根元素，而em是根据父标签的大小进行计算

通常都是给html标签设置好font-size之后，然后其它的单位都换算为rem进行使用。这样，当根标签的font-size发生改变了之后，页面中所有根据rem设置的元素都会发生改变。

html的font-size会根据屏幕的宽度进行调整，可以使用媒体查询，根据屏幕宽度进行font-size的设置。 
或者使用JS，根据屏幕宽度，计算出html的font-size的大小

 

4.Less和Sass分别是什么？

CSS预处理工具

使用编程的思路编写CSS代码，更加高效、快速、便捷

可以使用变量、嵌套规则、混入（函数）、参数混入、运算、颜色功能、作用域等等类似编程中的功能

Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation

 

5.什么是样式重置文件（重置样式表）？

reset.css

由于各个浏览器对标签的默认样式支持方式不同，所以样子都不太一样。为了实现不同浏览器效果一致，开发者会主动清掉默认样式，这些代码就放到reset.css文件中，叫样式重置文件（重置样式表）。

 

6.em和rem的区别？

em是相对于父级标签字体大小 
rem是CSS3新的单位，相对根标签(HTML)字体大小，通常用来做移动端适配

 

7.如何做水平垂直居中？

方案一：已知宽高，设置position: absolute;，然后left和top都设置为50%，再根据margin的负值来调正 
方案二：类似方案一，最后一步用transform:translate(-50%,-50%); 
方案三：绝对定位，top、bottom、left、right都设置为0，设置好宽高，然后margin: auto; 
方案四：display:table-cell; + vertical-align:middle; 
方案五：使用flex弹性盒模型

 

8.transition、animation、transform有什么区别?

transition: 处理过渡效果 
animation: CSS3动画，和keyframes一起使用 
transform: 处理元素的形变，位移、旋转、缩放、倾斜

 

9.display: inline-block;显示的缝隙如何去掉？

1.移除空格 
2.使用margin负值 
3.使用font-size:0 
4.letter-spacing 
5.word-spacing 
6.float

 

10.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果 
但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

 

11.inline、block、inline-block的区别是什么？

inline元素和其他inline元素在同一行展示，宽度由内容决定，无法设置宽度

block元素在新行开始，默认宽度为容器的宽度，可以设置宽度

inline-block从外面看是inline，里面看是block，可以设置宽度

 

12.display:none与visibility:hidden的区别是什么？

display: 隐藏对应的元素但不挤占该元素原来的空间 
visibility:隐藏对应的元素并且挤占该元素原来的空间

即是，使用CSS display:none; 属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden; 属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在

 

13.知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容

最常见的应用是利用伪类清除浮动

一种常见利用伪类清除浮动的代码

.clearfix::after {
    content: ".";//这里利用到了content属性 
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix {
    *zoom: 1;
}
 

14.有几种方式可以对一个DOM设置它的CSS样式？

外部样式表，引入一个外部css文件

内部样式表，将css代码放在  标签内部

内联样式，将css样式直接定义在 HTML 元素内部

 

15.什么是Css Hack？ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack

#test{   
    width:300px;   
    height:300px;   
    background-color:blue; /*firefox*/
    background-color:red\9; /*all ie*/
    background-color:yellow; /*ie8*/
    +background-color:pink; /*ie7*/
    _background-color:orange; /*ie6*/
}  
:root #test { 
    background-color:purple\9;  /*ie9*/
}  
@media all and (min-width:0px) { 
    #test {
        background-color: black; /*opera*/
    } 
}  
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #test {
        background-color: gray; /*chrome and safari*/
    } 
}
 

16.CSS中link和@import的区别?

link属于html标签，而@import是CSS中提供的

在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS

@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题

link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）




 

JavaScript相关问题

 

1.说说你了解的ES6新特性？

  • let关键字
  • 模板字符串
  • 箭头函数
  • 函数默认值的设置
  • for..of.. 
    更多内容参照博客：http://es6.ruanyifeng.com/
 

2.JQ如何扩展插件？

  • jQuery.extend(): 给JQuery对象本身扩展方法
  • jQuery.fn.extend(): 给JQ元素扩展方法
 

3.AJAX兼容问题？

AJAX用于请求网络数据

正常情况下使用XMLHttpRequest对象即可，但是在IE浏览器下需要使用ActiveXObject对象处理兼容问题

如果使用JQ，则直接使用$.get() / $.post() / $.getJSON() / $.ajax() 即可处理网络请求问题

 

4.JQ和Zepto的区别？

Zepto更加的轻量级，专为移动端开发

Zepto并不是包含JQ所有的功能，只是封装JQ常用的一些方法

Zepto内部划分模块，不同的功能放到了不同的文件中，需要使用的时候引入，否则不引入。

JQ则是所有功能都放到一个文件中。JQ会更加占用项目体积，而Zepto的使用率更高

 

5.JQ的优势？

  • 代码简介，语法简单
  • 强大的选择器支持
  • 封装了常用功能，例如：slideUp()、$.each()等等
  • 很好的兼容处理
  • 丰富强大的插件库
  • 完善的AJAX
  • 链式语法
  • 完善的文档、开源
 

6.JavaScript严格模式是什么？

ECMAScript5添加了“严格模式” 
这种模式下JavaScript在更严格的条件下运行

主要目的： 
1.消除JavaScript语法的一些不合理，不严谨，减少一些怪异行为 
2.消除代码运行的一些不安全之处，保证代码运行的安全 
3.提高编译器效率，增加运行速度 
4.为未来新版JavaScript做好铺垫

注意： 
同样的代码，在“严格模式下”，可能会有不一样的运行结果；一些“正常模式”可以运行的语句，在严格模式下将不能运行

“use strict”;，进入严格模式的标志，老版本浏览器会当做一行普通字符串，加以忽略 
将“use strict”;放到第一行，则整个脚本都将以严格模式运行。也可以放到函数中的第一行，则只作用当前函数，

// 优化写法
(function () {
    "use strict";
    // some code ...
})();

严格模式的一些限制： 
1.全局变量必须显示声明 
2.禁止this指向全局对象(构造函数，必须加new) 
3.函数不能有重复的形参名 
4.保留字(let、interface、package、private、protected、public、static、yield、implements)

 

7.JavaScript中常用的设计模式？

1.单例模式 
2.原型模式 
3.构造函数 
4.工厂模式 
5.适配器模式 
6.策略模式

 

8.什么是作用域链？

作用域的范围是函数，函数嵌套函数，查找变量从内层函数依次向外层找，最后找不到在window上找

 

9.解释call、apply、bind的区别?

call和apply都是调用一个函数，并指定this和参数，call和apply第一个参数都是指定的this的值，区别在于call第二个参数开始的参数是替换的参数，而apply的第二个参数是一个数组。

bind是由一个函数创建一个新函数，并绑定this和部分参数，参数形式和call类似

 

10.描述事件委派(delegate)的原理和优点?

原理: 在容器节点上绑定事件，利用冒泡，判断事件是否在匹配指定的选择器的节点上被触发

优点: 只用绑定一次，不用对每个目标做绑定，还有对动态插入的节点也生效，无需重新绑定

 

11.有哪些原生触屏事件？

touchstart，touchmove，touchend，touchcancel

 

12.为什么老版本的webkit的click事件有300ms延迟？

为了支持双击放大，如果300ms以内有两次点击则触发放大操作，而不是click。 
chromium较新版本在没有双击放大的页面去掉了click事件的300ms延迟

 

13.ajax和jsonp哪个可以跨域，原理是什么？

ajax默认无法跨域，xhr2新增的CORS让ajax也可以跨域，需要输出http头(Access-Control-Allow-Origin)

jsonp可以跨域，原理是script元素的src可以跨域

 

14.JavaScript基本数据类型？

基本数据类型： number, string, boolean, undefined, null

引用数据类型： Object(Array, Date, RegExp, Function)

 

15.谈谈This对象的理解?

this是JavaScript的一个关键字，随着函数使用场合不同，this的值会发生变化

但是有一个总原则，那就是this指的是调用函数的那个对象。 
this一般情况下：是全局对象Global。 
作为方法调用，那么this就是指这个对象

 

16.new操作符具体干了什么?

1.创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型 
2.属性和方法被加入到 this 引用的对象中 
3.新创建的对象由 this 所引用，并且最后隐式的返回 this

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

 

 

Other问题

 

1.AngularJS中与项目压缩的问题？

在写控制器的时候，有一种写法，会在使用压缩工具的时候出问题

// 在进行代码压缩的时候，参数$scope/$css等服务名称会被压缩工具替换掉，就造成无法使用的错误
app.controller("homeCtrl", function ($scope, $css) {

});

// 换成如下写法即可：
app.controller('homeCtrl', ['$scope', '$css', function ($scope, $css) {

}]);
 

2.什么是模块化开发？AMD和CMD是什么？

NodeJS实现了JavaScript语言编写后台，其中使用CommonJS规范实现了模块化开发

模块化开发其实就是让JavaScript文件可以互相引用，每个文档代表一个模块，提高代码的使用频率。 
在HTML中引入JS文件也会方便很多。 
原生JavaScript中并不支持模块化开发，出现了一些规范，就是所说的AMD和CMD，这两种方式适合使用桌面端，可以进行异步加载，而在NodeJS中使用CommonJS是同步的，所以CommonJS并不适合桌面端

在require.js推广的过程中，产生了一种模块化规范，叫AMD

在sea.js推广的过程中，产生了一种模块化规范，叫CMD

sea.js是淘宝的前端开发工程师，网名叫玉伯的人编写的。 
require.js而是国外朋友编写。 
sea.js是根据CommonJS规范来编写的，和CommonJS语法类似，而require.js的写法则教特殊一些

 

3.微信JSSDK是什么？以及使用流程？

如果项目需要使用微信提供的一些功能，例如：分享、定位、扫一扫、支付、等，就需要借助微信JSSDK来实现这些功能

使用流程： 
1.将自己项目的域名添加到微信公众账号中，设置为安全域名 
2.在代码中引入JSSDK所需的js文件 
3.进行配置: wx.config({debug: true, appId: '', timestamp: '', nonceStr: '', signature: '', jsApiList: []}); 
4.调用JSSDK提供的方法进行调用

 

4.什么是SPA？

Single Page Application 单页应用程序

打开SPA项目的时候，通常只有一个主页面，然后根据点击不同的按钮，切换主页面中显示的内容。

通过点击不同的按钮(a标签)，来修改锚点的值，然后使用路由根据锚点，实现加载不同的页面 
不需要进行网页跳转，即可切换页面

 

5.什么是懒加载？什么是预加载?

懒加载 
懒加载又称延迟加载，当图片需要显示到页面上的时候，才开始真正的发起图片的网络请求，否则不请求。

懒加载原理： 
1. 将图片地址不写入src属性，而是写入其它的属性(data-original)中 
2. 页面onload时候，根据图片的offsetTop值，判断哪些图片显示在用户视野范围内，然后把这些图片的地址从data-original中取出，放到src属性中，图片会自动请求 
3. 设置好onscroll函数，监测屏幕的滚动，如果有图片即将进入用户视野，则同样将图片的地址从data-original取出，放到src属性中取出即可

预加载 
在页面正式显示之前，先把所需要的图片资源全部加载下来，然后再显示界面，用户就不会看到图片加载的过程，提高了用户体验

预加载原理 
1.拿到所有图片的地址，分别创建Image对象，并赋值给src 
2.在imgObj.onload方法中，判断是否所有图片都已经加载完毕 
3.当所有图片加载完毕之后，调用回调函数，处理页面的显示

 

6.如何提高网页加载速度？（网站如何优化？）

  1. 上线的时候，使用压缩后三方库（带有min的文件: jquery.min.js）
  2. 尽可能使用CDN来加载你的三方库
  3. 选取图片的时候，能选择jpg就不选择png（只有镂空图才选择png图片）
  4. 图片搞定之后，使用网站进行二次压缩（TinyPNG）
  5. 减少网路请求，比如使用懒加载等等
  6. 优化代码
 

7.如何解决跨域问题？

由于浏览器同源策略的限制，访问非同源的数据需要进行跨域处理

实现跨域的几种方式: 
1. JSONP 
2. 后台设置访问源限制 
3. 使用后台代理

JSONP 
实现跨域问题最常用的一种方式 
利用了script标签src属性没有域的限制而完成 
需要前端、后台配合完成

JSONP使用步骤: 
1. 动态创建script标签 
2. 将目标数据的地址放到script标签的src属性中，并在请求地址中拼接callback参数并携带回调函数名 
3. 定义回调函数，当数据请求成功之后，回调函数被调用 
4. 数据完成之后，移除script标签 
注意：后台返回的数据不是真正的JSON数据，而是一个函数调用，数据为参数的一段字符串。( callbackFun('jsonString'); )

如果使用JQ，直接使用$.getJSON()函数即可进行跨域请求，JQ已经对跨域请求做了封装。

后台设置访问源限制： 
只需后台做访问源(Access-Control-Allow-Origin)的设置，前端就可以正常访问跨域的数据。

NodeJS设置方式: 
response.setHeader("Access-Control-Allow-Origin", "*"); 
*号代表了所有域名，设置好之后代表任何域名都可以访问，也可以对域名进行单独控制

此种方式不够安全

使用后台代理: 
前端不直接访问跨域的数据，而是交给服务器去做 
服务器去请求别的站点的数据，后台服务器是没有域的限制的，所以很方便 
当后台获取到数据之后，前端从自己的服务器请求到数据，无需做跨域处理 
此种方式，主要内容都在后台，前端进行正常AJAX请求

 

8.请解释baiduTemplate.js模板引擎？

模板引擎 
根据数据，快速生成HTML代码片段，插入到HTML结构中显示

首先编写结构，可以将HTML和JavaScript混写，然后赋值数据，就可以生成HTML代码片段

<!-- 模板 -->
<script type="text/template" id="li">
    <%for (var i = 0; i < data.length; i++) {%>
        <li><%= data[i] %></li>
    <%}%>
</script>

// 根据数据，生成HTML代码片段
var data = ['小明', '小红', '小黑'];
var html = baidu.template('li', {data: data});
document.getElementById("result").innerHTML = html;

和baiduTemplate相似模板引擎还有很多，还会使用artTemplate.js，语法相似 
http://www.jq22.com/jquery-info1097

 

9.请解释MVC和MVVM设计模式？

 

10.XSS是什么？

跨站脚本攻击（Cross-site scripting, XSS）

是一种网站应用程序的安全漏洞攻击，是代码注入的一种。允许用户将恶意代码注入到网页上，影响网页。

这类攻击通常包含了HTML以及用户端脚本语言。

 

11.移动端性能优化？

加载优化 
1.减少HTTP请求 
2.压缩JS、CSS、HTML静态资源并在服务器设置gzip 
3.首屏加载，不超过120k 
4.压缩图片 
5.避免重定向 
6.异步加载第三方资源: async / 动态创建script / defer 
7.oneRequest: 首次内联CSS，JavaScript，存localStroage，第二次读取localStroage 
8.按需加载: 滚动加载、点击加载

CSS优化 
1.层次不超过3 
2.合并CSS规则，合并margin、background等属性 
3.移除空的CSS规则 
4.去掉0的单位 
5.不要声明过多的font-size

脚本执行优化 
1.避免iframe、img等src为空 
2.图片尽量避免使用DataURI 
3.避免重设图片大小 
4.点击事件优化 
5.注意scroll resize事件绑定时机

渲染优化 
1.动画优化: 使用CSS3动画、使用requestAnimationFrame替代setTimeout 
2.高频事件优化: touch事件、scroll事件 
3.图片优化: 压缩图片、webp优于jpg、png8优于gif、对图片使用lazyload、避免使用DataURI 
4.GPU加速: 使用transition触发、tranform触发、opacity 
5.DOM层次不宜过多 
6.JS主动的释放内存

 

12.Tween.JS如何使用？

// 首先获取所需要的4个数字
var currentStep = 0; // 当前步数
var allStep = 100; // 总步数
var startValue = $(window).scrollTop(); // 开始的值
var changeValue = 0 - startValue; // 改变的值

// 使用定时器进行改变
var timer = setInterval(function () {
    // 当前步数增加
    currentStep++;
    // 判断结束时间
    if (currentStep > allStep) {
        clearInterval(timer);
    }
    // 四个参数（当前步数、开始值、变化值、总步数）
    var v = Tween.Bounce.easeIn(currentStep, startValue, changeValue, allStep);

    // 使用Tween.js实现效果
    $(window).scrollTop(v);
}, 10);
 

13.什么是Cordova？

hybird App开发平台 
一个工具，正常编写HTML、CSS、JavaScript代码，即可通过Cordova生成各个平台的Native App

可以通过编写JavaScript代码调用设备的功能

常用命令 
1.cordova create ProjectPath com.lidaze.www HelloCordova 
2.cordova platform add ios 
3.cordova platform rm ios 
4.cordova build ios 
5.cordova emulate ios 
6.cordova plugin add cordova-plugin-dialogs 
7.cordova plugin remove cordova-plugin-dialogs

 

14.什么是Web App? 什么是hybird App?

Web App: 移动App，通过编写HTML、CSS、JavaScript实现Native App的功能外观，还是运行在浏览器中。有时会被嵌入到Native App中

hybird App: 混合App，通过编写HTML、CSS、JavaScript实现Navtive App的功能和外观，可直接生成各个操作系统的Native App，可直接安装到手机中

 

15.http状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作

200-299 用于表示请求成功

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息

400-499 用于指出客户端的错误。 
400 语义有误，当前请求无法被服务器理解。 
401 当前请求需要用户验证 
403 服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。 
503 – 服务不可用

 

16.你能描述一下渐进增强和优雅降级之间的不同吗?

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

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

区别： 
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。 
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

优雅降级观点 
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

渐进增强观点 
“渐进增强”观点则认为应关注于内容本身。 
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

 

17.简述一下src与href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src =”js.js”></script> 
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href=”common.css” rel=”stylesheet”/> 
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

 

 

非技术问题

 

1.使用过哪些开发工具？

编辑器:

  • Sublime Text
  • Atom (GitHub)
  • VS Code(微软)

IDE（集成开发环境）:

  • HBuilder(国内)
  • WebStorm(国外）
 

2.前公司技术团队多少人？H5开发有几个？

 

3.谈谈以前端角度出发做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页 
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SErobot或叫webcrawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

Meta标签优化 
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

如何选取关键词并在网页中放置关键词 
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

了解主要的搜索引擎 
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

主要的互联网目录 OpenDirectory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

按点击付费的搜索引擎 
搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目GoogleAdwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

搜索引擎登录 
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

链接交换和链接广泛度（LinkPopularity） 
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

合理的标签使用

 

4.“有什么想问我的？”， 面试官说。

目前关注哪些最新的Web前端技术（未来的发展方向）？

前端团队如何工作的（实现一个产品的流程）？

公司的薪资结构是什么样子的？

posted @ 2016-12-11 19:24  波吉大王子  阅读(309)  评论(0)  编辑  收藏  举报