本文旨在加深对前端知识点的理解，资料来源于网络，由 trigkit4 收集整理。jquery
一些开放性题目
|
1
2
3
4
5
6
7
8
9
|
1.自我介绍：除了基本我的信息之外，面试官更想听的是你不同凡响的地方和你的优点。
2.项目介绍
3.如何看待前端开发？
4.平时是如何学习前端开发的？
5.将来三到五年的规划是怎样的？
|
position的值， relative和absolute分别是相对于谁进行定位的？
absolute:生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。fixed（老IE不支持）生成绝对定位的元素，一般相对于浏览器窗口或 frame 进行定位。relative生成相对定位的元素，相对于其在普通流中的位置进行定位。static默认值。没有定位，元素出如今正常的流中sticky生成粘性定位的元素，容器的位置根据正常文档流计算得出
如何解决跨域问题
JSONP：android
原理是：动态插入script标签，经过script标签引入一个js文件，这个js文件载入成功后会执行咱们在url参数中指定的函数，而且会把咱们须要的json数据做为参数传入。webpack
因为同源策略的限制，XmlHttpRequest只容许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，能够经过script标签实现跨域请求，而后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
优势是兼容性好，简单易用，支持浏览器与服务器双向通讯。缺点是只支持GET请求。
JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<script>
function
createJs
(
sUrl
)
{
var
oScript
=
document
.
createElement
(
'script'
)
;
oScript
.
type
=
'text/javascript'
;
oScript
.
src
=
sUrl
;
document
.
getElementsByTagName
(
'head'
)
[
0
]
.
appendChild
(
oScript
)
;
}
createJs
(
'jsonp.js'
)
;
box
(
{
'name'
:
'test'
}
)
;
function
box
(
json
)
{
alert
(
json
.
name
)
;
}
</script>
|
CORS
服务器端对于CORS的支持，主要就是经过设置Access-Control-Allow-Origin来进行的。若是浏览器检测到相应的设置，就能够容许Ajax进行跨域的访问。
经过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!并且所用的协议，端口都要一致，不然没法利用document.domain进行跨域
主域相同的使用document.domain
使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的
使用HTML5中新引进的
window.postMessage方法来跨域传送数据
还有flash、在服务器上设置代理页面等跨域方式。我的认为window.name的方法既不复杂，也能兼容到几乎全部浏览器，这真是极好的一种跨域方法。
XML和JSON的区别？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
(
1
)
.数据体积方面。
JSON相对于
XML来说，数据的体积小，传递的速度更快些。
(
2
)
.数据交互方面。
JSON与
JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(
3
)
.数据描述方面。
JSON对数据的描述性比
XML较差。
(
4
)
.传输速度方面。
JSON的速度要远远快于
XML。
|
谈谈你对webpack的见解
WebPack 是一个模块打包工具，你可使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它可以很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各类静态文件（图片、字体等），让开发过程更加高效。对于不一样类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。
webpack的两大特点：
|
1
2
3
|
1.code
splitting（能够自动完成）
2.loader能够处理各类类型的静态文件，而且支持串联操做
|
webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
webpack具备requireJs和browserify的功能，但仍有不少本身的新特性：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
1.对
CommonJS、
AMD、
ES6的语法作了兼容
2.对
js、
css、图片等资源文件都支持打包
3.串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对
CoffeeScript、
ES6的支持
4.有独立的配置文件
webpack
.
config
.
js
5.能够将代码切割成不一样的
chunk，实现按需加载，下降了初始化时间
6.支持
SourceUrls和
SourceMaps，易于调试
7.具备强大的
Plugin接口，大可能是内部插件，使用起来比较灵活
8.webpack使用异步
IO并具备多级缓存。这使得
webpack很快且在增量编译上更加快
|
说说TCP传输的三次握手四次挥手策略
为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的状况置之不理，它必定会向对方确认是否成功送达。握手过程当中使用了TCP的标志：SYN和ACK。
发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后，发送端再回传一个带ACK标志的数据包，表明“握手”结束。 若在握手过程当中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。
断开一个TCP链接则须要“四次握手”：
- 第一次挥手：主动关闭方发送一个
FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(固然，在fin包以前发送出去的数据，若是没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，可是，此时主动关闭方还可 以接受数据。 - 第二次挥手：被动关闭方收到
FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。 - 第三次挥手：被动关闭方发送一个
FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，个人数据也发送完了，不会再给你发数据了。 - 第四次挥手：主动关闭方收到
FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。
TCP和UDP的区别
TCP（Transmission Control Protocol，传输控制协议）是基于链接的协议，也就是说，在正式收发数据前，必须和对方创建可靠的链接。一个TCP链接必需要通过三次“对话”才能创建起来
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非链接的协议，它不与对方创建链接，而是直接就把数据包发送过去！ UDP适用于一次只传送少许数据、对可靠性要求不高的应用环境。
说说你对做用域链的理解
做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到window对象即被终止，做用域链向下访问变量是不被容许的。
建立ajax过程
|
1
2
3
4
5
6
7
8
9
10
11
|
(
1
)建立
XMLHttpRequest对象
,也就是建立一个异步调用对象
.
(
2
)建立一个新的
HTTP请求
,并指定该
HTTP请求的方法、
URL及验证信息
.
(
3
)设置响应
HTTP请求状态变化的函数
.
(
4
)发送
HTTP请求
.
(
5
)获取异步调用返回的数据
.
(
6
)使用
JavaScript和
DOM实现局部刷新
.
|
渐进加强和优雅降级
渐进加强 ：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。
常见web安全及防御原理
sql注入原理
就是经过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
总的来讲有如下几点：
|
1
2
3
4
5
6
7
|
1.永远不要信任用户的输入，要对用户的输入进行校验，能够经过正则表达式，或限制长度，对单引号和双
"-"进行转换等。
2.永远不要使用动态拼装
SQL，可使用参数化的
SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库链接，为每一个应用使用单独的权限有限的数据库链接。
4.不要把机密信息明文存放，请加密或者
hash掉密码和敏感的信息。
|
XSS原理及防范
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。好比：攻击者在论坛中放一个
看似安全的连接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，
当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户本来觉得的信任站点。
XSS防范方法
首先代码里对用户输入的地方和变量都须要仔细检查长度和对”<”,”>”,”;”,”’”等字符作过滤；其次任何内容写到页面以前都必须加以encode，避免不当心把html tag 弄出来。这一个层面作好，至少能够堵住超过一半的XSS 攻击。
首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。
其次，经过使cookie 和系统ip 绑定来下降cookie 泄露后的危险。这样攻击者获得的cookie没有实际价值，不可能拿来重放。
若是网站不须要再浏览器端对cookie 进行操做，能够在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
尽可能采用POST 而非GET 提交表单
XSS与CSRF有什么区别吗？
XSS是获取信息，不须要提早知道其余用户页面的代码和数据包。CSRF是代替用户完成指定的动做，须要知道其余用户页面的代码和数据包。
要完成一次CSRF攻击，受害者必须依次完成两个步骤：
|
1
2
3
|
登陆受信任网站
A，并在本地生成
Cookie。
在不登出
A的状况下，访问危险网站
B。
|
CSRF的防护
- 服务端的
CSRF方式方法不少样，但总的思想都是一致的，就是在客户端页面增长伪随机数。 - 经过验证码的方法
Web Worker 和webSocket
worker主线程:
|
1
2
3
4
5
6
7
|
1.经过
worker
=
new
Worker
(
url
)加载一个
JS文件来建立一个
worker，同时返回一个
worker实例。
2.经过
worker
.
postMessage
(
data
)方法来向
worker发送数据。
3.绑定
worker
.
onmessage方法来接收
worker发送过来的数据。
4.可使用
worker
.
terminate
(
)来终止一个
worker的执行。
|
WebSocket是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个HTML5协议，WebSocket的链接是持久的，他经过在客户端和服务器之间保持双工链接，服务器的更新能够被及时推送给客户端，而不须要客户端以必定时间间隔去轮询。
HTTP和HTTPS
HTTP协议一般承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了咱们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
为何HTTPS安全
由于网络请求须要中间有不少的服务器路由器的转发。中间的节点均可能篡改信息，而若是使用HTTPS，密钥在你和终点站才有。https之因此比http安全，是由于他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
对前端模块化的认识
AMD 是
RequireJS在推广过程当中对模块定义的规范化产出。CMD 是
SeaJS在推广过程当中对模块定义的规范化产出。
AMD 是提早执行，CMD 是延迟执行。
AMD推荐的风格经过返回一个对象作为模块对象，CommonJS的风格经过对module.exports或exports的属性赋值来达到暴露模块对象的目的。
CMD模块方式
|
1
2
3
4
5
|
define
(
function
(
require
,
exports
,
module
)
{
// 模块代码
}
)
;
|
Javascript垃圾回收方法
标记清除（mark and sweep）
这是JavaScript最多见的垃圾回收方式，当变量进入执行环境的时候，好比函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的全部变量加上标记，而后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成以后仍存在标记的就是要删除的变量了
引用计数(reference counting)
在低版本IE中常常会出现内存泄露，不少时候就是由于其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每一个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，若是该变量的值变成了另一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值无法被访问了，所以能够将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然JavaScript对象经过标记清除的方式进行垃圾回收，但BOM与DOM对象倒是经过引用计数回收垃圾的， 也就是说只要涉及BOM及DOM就会出现循环引用问题。
你以为前端工程的价值体如今哪
|
1
2
3
4
5
6
7
8
9
|
为简化用户使用提供技术支持（交互部分）
为多个浏览器兼容性提供支持
为提升用户浏览速度（浏览器性能）提供支持
为跨平台或者其余基于
webkit或其余渲染引擎的应用提供支持
为展现数据提供支持（数据接口）
|
谈谈性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减小DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏以外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP，
代码层面的优化
- 用
hash-table来优化查找 - 少用全局变量
- 用
innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能 - 用
setTimeout来避免页面失去响应 - 缓存DOM节点查找的结果
- 避免使用CSS Expression
- 避免全局查询
- 避免使用with(with会建立本身的做用域，会增长做用域链长度)
- 多个变量声明合并
- 避免图片和iFrame等的空Src。空Src会从新加载当前页面，影响速度和效率
- 尽可能避免写在HTML标签中写Style属性
移动端性能优化
- 尽可能使用css3动画，开启硬件加速。
- 适当使用
touch事件代替click事件。 - 避免使用
css3渐变阴影效果。 - 能够用
transform: translateZ(0)来开启硬件加速。 - 不滥用Float。Float在渲染时计算量比较大，尽可能减小使用
- 不滥用Web字体。Web字体须要下载，解析，重绘当前页面，尽可能减小使用。
- 合理使用requestAnimationFrame动画代替setTimeout
- CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引起手机过耗电增长
- PC端的在移动端一样适用
相关阅读：如何作到一秒渲染一个移动页面
什么是Etag？
当发送一个服务器请求时，浏览器首先会进行缓存过时判断。浏览器根据缓存过时时间判断缓存文件是否过时。
情景一：若没有过时，则不向服务器发送请求，直接使用缓存中的结果，此时咱们在浏览器控制台中能够看到 200 OK(from cache) ，此时的状况就是彻底使用缓存，浏览器和服务器没有任何交互的。
情景二：若已过时，则向服务器发送请求，此时请求中会带上①中设置的文件修改时间，和Etag
而后，进行资源更新判断。服务器根据浏览器传过来的文件修改时间，判断自浏览器上一次请求以后，文件是否是没有被修改过；根据Etag，判断文件内容自上一次请求以后，有没有发生变化
情形一：若两种判断的结论都是文件没有被修改过，则服务器就不给浏览器发index.html的内容了，直接告诉它，文件没有被修改过，你用你那边的缓存吧—— 304 Not Modified，此时浏览器就会从本地缓存中获取index.html的内容。此时的状况叫协议缓存，浏览器和服务器之间有一次请求交互。
情形二：若修改时间和文件内容判断有任意一个没有经过，则服务器会受理这次请求，以后的操做同①
① 只有get请求会被缓存，post请求不会
Expires和Cache-Control
Expires要求客户端和服务端的时钟严格同步。HTTP1.1引入Cache-Control来克服Expires头的限制。若是max-age和Expires同时出现，则max-age有更高的优先级。
|
1
2
3
4
5
6
7
8
9
|
Cache
-
Control
:
no
-
cache
,
private
,
max
-
age
=
0
ETag:
abcde
Expires
:
Thu
,
15
Apr
2014
20
:
00
:
00
GMT
Pragma
:
private
Last
-
Modified
:
$
now
// RFC1123 format
|
ETag应用:
Etag由服务器端生成，客户端经过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。请求一个文件的流程可能以下：
====第一次请求===
|
1
2
3
|
1.客户端发起
HTTP
GET请求一个文件；
2.服务器处理请求，返回文件内容和一堆
Header，固然包括
Etag
(例如
"2e681a-6-5d044840"
)
(假设服务器支持
Etag生成和已经开启了
Etag
)
.状态码
200
|
====第二次请求===
|
1
|
客户端发起
HTTP
GET请求一个文件，注意这个时候客户端同时发送一个
If
-
None
-
Match头，这个头的内容就是第一次请求时服务器返回的
Etag：
2e681a
-
6
-
5d0448402.服务器判断发送过来的
Etag和计算出来的
Etag匹配，所以
If
-
None
-
Match为
False，不返回
200，返回
304，客户端继续使用本地缓存；流程很简单，问题是，若是服务器又设置了
Cache
-
Control
:
max
-
age和
Expires呢，怎么办
|
答案是同时使用，也就是说在彻底匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag以后，
服务器才能返回304.(不要陷入到底使用谁的问题怪圈)
为何使用Etag请求头?
Etag 主要为了解决 Last-Modified 没法解决的一些问题。
栈和队列的区别?
|
1
2
3
4
5
|
栈的插入和删除操做都是在一端进行的，而队列的操做倒是在两端进行的。
队列先进先出，栈先进后出。
栈只容许在表尾一端进行插入和删除，而队列只容许在表尾一端进行插入，在表头一端进行删除
|
栈和堆的区别？
|
1
2
3
4
5
6
7
|
栈区（
stack）—
由编译器自动分配释放
，存放函数的参数值，局部变量的值等。
堆区（
heap）
—
通常由程序员分配释放，
若程序员不释放，程序结束时可能由
OS回收。
堆（数据结构）：堆能够被当作是一棵树，如：堆排序；
栈（数据结构）：一种先进后出的数据结构。
|
快速 排序的思想并实现一个快排？
“快速排序”的思想很简单，整个排序过程只须要三步：
（1）在数据集之中，找一个基准点
（2）创建两个数组，分别存储左边和右边的数组
（3）利用递归进行下次比较
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<script
type
=
"text/javascript"
>
function
quickSort
(
arr
)
{
if
(
arr
.
length
<=
1
)
{
return
arr
;
//若是数组只有一个数，就直接返回；
}
var
num
=
Math
.
floor
(
arr
.
length
/
2
)
;
//找到中间数的索引值，若是是浮点数，则向下取整
var
numValue
=
arr
.
splice
(
num
,
1
)
;
//找到中间数的值
var
left
=
[
]
;
var
right
=
[
]
;
for
(
var
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
arr
[
i
]
<
numValue
)
{
left
.
push
(
arr
[
i
]
)
;
//基准点的左边的数传到左边数组
}
else
{
right
.
push
(
arr
[
i
]
)
;
//基准点的右边的数传到右边数组
}
}
return
quickSort
(
left
)
.
concat
(
[
numValue
]
,
quickSort
(
right
)
)
;
//递归不断重复比较
}
alert
(
quickSort
(
[
32
,
45
,
37
,
16
,
2
,
87
]
)
)
;
//弹出“2,16,32,37,45,87”
</script>
|
你以为jQuery或zepto源码有哪些写的好的地方
(答案仅供参考)
jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，而后经过传入window对象参数，可使window对象做为局部变量使用，好处是当jquery中访问window对象的时候，就不用将做用域链退回到顶层做用域了，从而能够更快的访问window对象。一样，传入undefined参数，能够缩短查找undefined时的做用域链。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
(
function
(
window
,
undefined
)
{
//用一个函数域包起来，就是所谓的沙箱
//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱须要的外部变量经过函数参数引入进来
//只要保证参数对内提供的接口的一致性，你还能够随意替换传进来的这个参数
window
.
jQuery
=
window
.
$
=
jQuery
;
}
)
(
window
)
;
|
jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。
有一些数组或对象的方法常常能使用到，jQuery将其保存为局部变量以提升访问速度。
jquery实现的链式调用能够节约代码，所返回的都是同一个对象，能够提升代码效率。
ES6的了解
新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操做符左边为输入的参数，而右边则是进行的操做以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象归入规范，提供了原生的Promise对象。增长了let和const命令，用来声明变量。增长了块级做用域。let命令实际上就增长了块级做用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念
js继承方式及其优缺点
原型链继承的缺点
|
1
|
一是字面量重写原型会中断关系，使用引用类型的原型，而且子类型还没法给超类型传递参数。
|
借用构造函数（类式继承）
|
1
|
借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。因此咱们须要原型链
+借用构造函数的模式，这种模式称为组合继承
|
组合式继承
|
1
|
组合式继承是比较经常使用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而经过借用构造函数来实现对实例属性的继承。这样，既经过在原型上定义方法实现了函数复用，又保证每一个实例都有它本身的属性。
|
具体请看：JavaScript继承方式详解
关于Http 2.0 你知道多少？
HTTP/2引入了“服务端推（server push）”的概念，它容许服务端在客户端须要数据以前就主动地将数据发送到客户端缓存中，从而提升性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，容许多个消息在一个链接上同时交差。
它增长了头压缩（header compression），所以即便很是小的请求，其请求和响应的header都只会占用很小比例的带宽。
defer和async
defer并行加载js文件，会按照页面上script标签的顺序执行 async并行加载js文件，下载完成当即执行，不会按照页面上script标签的顺序执行
谈谈浮动和清除浮动
浮动的框能够向左或向右移动，直到他的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，因此文档的普通流的块框表现得就像浮动框不存在同样。浮动的块框会漂浮在文档普通流的块框上。
如何评价AngularJS和BackboneJS
backbone具备依赖性，依赖underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.
Backbone的Model没有与UI视图数据绑定，而是须要在View中自行操做DOM来更新或读取UI数据。AngularJS与此相反，Model直接与UI视图绑定，Model与UI视图的关系，经过directive封装，AngularJS内置的通用directive，就能实现大部分操做了，也就是说，基本没必要关心Model与UI视图的关系，直接操做Model就好了，UI视图自动更新。
AngularJS的directive，你输入特定数据，他就能输出相应UI视图。是一个比较完善的前端MVW框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等全部功能，模板功能强大丰富，而且是声明式的，自带了丰富的 Angular 指令。
用过哪些设计模式？
工厂模式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
主要好处就是能够消除对象间的耦合，经过使用工程方法而不是
new关键字。将全部实例化的代码集中在一个位置防止代码重复。
工厂模式解决了重复实例化的问题，但还有一个问题
,那就是识别问题，由于根本没法搞清楚他们究竟是哪一个对象的实例。
function
createObject
(
name
,
age
,
profession
)
{
//集中实例化的函数var obj = new Object();
obj
.
name
=
name
;
obj
.
age
=
age
;
obj
.
profession
=
profession
;
obj
.
move
=
function
(
)
{
return
this
.
name
+
' at '
+
this
.
age
+
' engaged in '
+
this
.
profession
;
}
;
return
obj
;
}
var
test1
=
createObject
(
'trigkit4'
,
22
,
'programmer'
)
;
//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例
|
构造函数模式
使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不一样之处在于：
|
1
2
3
4
5
|
1.构造函数方法没有显示的建立对象
(
new
Object
(
)
)
;
2.直接将属性和方法赋值给
this对象
;
3.没有
renturn语句。
|
说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。在js中，函数即闭包，只有函数才会产生做用域的概念
闭包有三个特性：
1.函数嵌套函数
2.函数内部能够引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
具体请看：详解js闭包
请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但仍是有不少局限性的。
第一：每一个特定的域名下最多生成20个cookie
|
1
2
3
4
5
6
7
|
1.IE6或更低版本最多
20个
cookie
2.IE7和以后的版本最后能够有
50个
cookie。
3.Firefox最多
50个
cookie
4.chrome和
Safari没有作硬性限制
|
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
cookie的最大大约为4096字节，为了兼容性，通常不能超过4095字节。
IE 提供了一种存储能够持久化用户数据，叫作userdata，从IE5.0就开始支持。每一个数据最多128K，每一个域名下最多1M。这个持久化数据放在缓存中，若是缓存没有清理，那么会一直存在。
优势：极高的扩展性和可用性
|
1
2
3
4
5
6
7
|
1.经过良好的编程，控制保存在
cookie中的
session对象的大小。
2.经过加密和安全传输技术（
SSL），减小
cookie被破解的可能性。
3.只在
cookie中存放不敏感数据，即便被盗也不会有重大损失。
4.控制
cookie的生命期，使之不会永远有效。偷盗者极可能拿到一个过时的
cookie。
|
缺点：
|
1
2
3
4
5
|
1.
`
Cookie
`数量和长度的限制。每一个
domain最多只能有
20条
cookie，每一个
cookie长度不能超过
4KB，不然会被截掉
.
2.安全性问题。若是
cookie被人拦截了，那人就能够取得全部的
session信息。即便加密也与事无补，由于拦截者并不须要知道
cookie的意义，他只要原样转发
cookie就能够达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么它起不到任何做用。
|
浏览器本地存储
在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。
web storage和cookie的区别
Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。
除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。
可是cookie也是不能够或缺的：cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及如下不支持外，其余标准浏览器都彻底支持(ie及FF需在web服务器里运行)，值得一提的是IE老是办好事，例如IE七、IE6中的userData其实就是javascript本地存储的解决方案。经过简单的代码封装能够统一到全部的浏览器都支持web storage。
localStorage和sessionStorage都具备相同的操做方法，例如setItem、getItem和removeItem等
cookie 和session 的区别：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
1、
cookie数据存放在客户的浏览器上，
session数据放在服务器上。
2、
cookie不是很安全，别人能够分析存放在本地的
COOKIE并进行
COOKIE欺骗
考虑到安全应当使用
session。
3、
session会在必定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用
COOKIE。
4、单个
cookie保存的数据不能超过
4K，不少浏览器都限制一个站点最多保存
20个
cookie。
5、因此我的建议：
将登录信息等重要信息存放为
SESSION
其余信息若是须要保留，能够放在
COOKIE中
|
display:none和visibility:hidden的区别？
|
1
2
3
|
display
:
none
隐藏对应的元素，在文档布局中再也不给它分配空间，它各边的元素会合拢，就当他历来不存在。
visibility
:
hidden
隐藏对应的元素，可是在文档布局中仍保留原来的空间。
|
CSS中
link和@import的区别是？
|
1
2
3
4
5
6
7
|
(
1
)
link属于
HTML标签，而
@
import是
CSS提供的
;
(
2
)页面被加载的时，
link会同时被加载，而
@
import被引用的
CSS会等到引用它的
CSS文件被加载完再加载
;
(
3
)
import只在
IE5以上才能识别，而
link是
HTML标签，无兼容问题
;
(
4
)
link方式的样式的权重高于
@
import的权重
.
|
position:absolute和float属性的异同
- 共同点：对内联元素设置
float和absolute属性，可让元素脱离文档流，而且能够设置其宽高。 - 不一样点：
float仍会占据位置，absolute会覆盖文档流中的其余元素。
介绍一下box-sizing属性？
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高border-box：让元素维持IE传统盒模型（IE6如下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不从新计算元素的盒子尺寸，从而影响整个页面的布局。
CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？ CSS3新增伪类有那些？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
1.id选择器（
#
myid）
2.类选择器（
.
myclassname）
3.标签选择器（
div
,
h1
,
p）
4.相邻选择器（
h1
+
p）
5.子选择器（
ul
>
li）
6.后代选择器（
li
a）
7.通配符选择器（
*）
8.属性选择器（
a
[
rel
=
"external"
]）
9.伪类选择器（
a
:
hover
,
li
:
nth
-
child）
|
优先级为:
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高
CSS3新增伪类举例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
p
:
first
-
of
-
type选择属于其父元素的首个
<
p
>元素的每一个
<
p
>元素。
p
:
last
-
of
-
type
选择属于其父元素的最后
<
p
>元素的每一个
<
p
>元素。
p
:
only
-
of
-
type
选择属于其父元素惟一的
<
p
>元素的每一个
<
p
>元素。
p
:
only
-
child
选择属于其父元素的惟一子元素的每一个
<
p
>元素。
p
:
nth
-
child
(
2
)
选择属于其父元素的第二个子元素的每一个
<
p
>元素。
:
enabled
:
disabled控制表单控件的禁用状态。
:
checked
单选框或复选框被选中。
|
CSS3有哪些新特性？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
CSS3实现圆角（
border
-
radius），阴影（
box
-
shadow），
对文字加特效（
text
-
shadow、），线性渐变（
gradient），旋转（
transform）
transform
:
rotate
(
9deg
)
scale
(
0.85
,
0.90
)
translate
(
0px
,
-
30px
)
skew
(
-
9deg
,
0deg
)
;
//旋转,缩放,定位,倾斜
增长了更多的
CSS选择器
多背景
rgba
在
CSS3中惟一引入的伪元素是
::
selection
.
媒体查询，多栏布局
border
-
image
|
CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别以下：
content-box（默认）
布局所占宽度Width：
|
1
|
Width
=
width
+
padding
-
left
+
padding
-
right
+
border
-
left
+
border
-
right
|
布局所占高度Height:
|
1
|
Height
=
height
+
padding
-
top
+
padding
-
bottom
+
border
-
top
+
border
-
bottom
|
padding-box
布局所占宽度Width：
|
1
|
Width
=
width
(包含
padding
-
left
+
padding
-
right
)
+
border
-
top
+
border
-
bottom
|
布局所占高度Height:
|
1
|
Height
=
height
(包含
padding
-
top
+
padding
-
bottom
)
+
border
-
top
+
border
-
bottom
|
border-box
布局所占宽度Width：
|
1
|
Width
=
width
(包含
padding
-
left
+
padding
-
right
+
border
-
left
+
border
-
right
)
|
布局所占高度Height:
|
1
|
Height
=
height
(包含
padding
-
top
+
padding
-
bottom
+
border
-
top
+
border
-
bottom
)
|
对BFC规范的理解？
|
1
2
3
|
BFC，块级格式化上下文，一个建立了新的
BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个
BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的
margin会发生折叠。
（
W3C
CSS
2.1规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其余元素的关系和相互做用。
|
说说你对语义化的理解？
|
1
2
3
4
5
6
7
|
1，去掉或者丢失样式的时候可以让页面呈现出清晰的结构
2，有利于
SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；
3，方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循
W3C标准的团队都遵循这个标准，能够减小差别化。
|
Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?
1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器以何种模式来渲染文档。
2）、严格模式的排版和 JS 运做模式是 以该浏览器支持的最高标准运行。
3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。
4）、DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。
你知道多少种Doctype文档类型？
|
1
2
3
4
5
6
7
8
9
|
该标签可声明三种
DTD类型，分别表示严格版本、过渡版本以及基于框架的
HTML文档。
HTML
4.01规定了三种文档类型：
Strict、
Transitional以及
Frameset。
XHTML
1.0规定了三种
XML文档类型：
Strict、
Transitional以及
Frameset。
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而
Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
|
HTML与XHTML——两者有什么区别
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
区别：
1.全部的标记都必需要有一个相应的结束标记
2.全部标签的元素和属性的名字都必须使用小写
3.全部的
XML标记都必须合理嵌套
4.全部的属性必须用引号
""括起来
5.把全部
<和
&特殊符号用编码表示
6.给全部属性赋一个值
7.不要在注释内容中使“
--”
8.图片必须有说明文字
|
常见兼容性问题？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
png24位的图片在
iE6浏览器上出现背景，解决方案是作成
PNG8
.也能够引用一段脚本处理
.
浏览器默认的
margin和
padding不一样。解决方案是加一个全局的
*
{
margin
:
0
;
padding
:
0
;
}来统一。
IE6双边距
bug
:块属性标签
float后，又有横行的
margin状况下，在
ie6显示
margin比设置的大。
浮动
ie产生的双倍距离（
IE6双边距问题：在
IE6下，若是对元素设置了浮动，同时又设置了
margin
-
left或
margin
-
right，
margin值会加倍。）
#
box
{
float
:
left
;
width
:
10px
;
margin
:
0
0
0
100px
;
}
这种状况之下
IE会产生
20px的距离，解决方案是在
float的标签样式控制中加入
_display
:
inline
;将其转化为行内属性。
(
_这个符号只有
ie6会识别
)
渐进识别的方式，从整体中逐渐排除局部。
首先，巧妙的使用“
\
9”这一标记，将
IE游览器从全部状况中分离出来。
接着，再次使用“
+”将
IE8和
IE7、
IE6分离开来，这样
IE8已经独立识别。
css
.
bb
{
background
-
color
:
#
f1ee18
;
|