前端知识点

1、闭包:https://zhuanlan.zhihu.com/p/25407758
特殊的变量作用域而出现的闭包。闭包就是能够读取其他函数内部变量的函数。闭包可以简单理解成“定义在一个函数内部的函数“，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

 

2、懒加载：https://zhuanlan.zhihu.com/p/25455672 

     预加载：

 

 

3、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么——（http://www.cnblogs.com/dojo-lzz/p/3983335.html）

 1、根据IP地址查找域名
 2、建立连接（建立TCP三次握手）
 3、构建网页
 4、断开连接

URL解析过程：

1、用户输入url，浏览器根据域名寻找IP地址

2、浏览器向服务器发送http请求，如果服务器返回301之类的重定向，浏览器根据相应投中的location再次发送请求

3、服务器端接受请求，处理请求生成html代码（可能是压缩的），返回给浏览器

4、浏览器接受服务器的响应结果，如果有压缩则先进行解压处理，进行页面解析渲染

渲染的步骤为：

1.解析HTML

2.构建DOM树

3.DOM树和CSS样式进行附着构造呈现树

4.布局

5.绘制

对于HTML浏览器有专门的html解析器来解析HTML，并在解析的过程中构建DOM树。

HTML解析完毕后，开始构建呈现树RenderTree，这一步的主要工作在于将css样式应用到DOM节点上。

呈现树构造完成后浏览器便进行布局处理，及计算每个呈现树节点的大小和位置信息。布局是一个递归过程，从跟呈现节点开始，递归遍历子节点，计算集合几何信息。

布局完成后，便是将呈现树绘制出来显示在屏幕上。对于每一个呈现树节点来说，主要绘制顺序如下：背景颜色 -> 背景图片 -> 边框 -> 子呈现树节点 -> 轮廓

 

4、谈谈你对CSS布局的理解：

布局模型有三类：

1）流动模型  flow（默认）

2）浮动模型  float

3）层模型  layer  

文档流 ：指的是文本沿着从左到右的方向展开，就像流的形式

1、HTML的布局机制就是用文档模型的，即块元素独占一块

2、浮动就是脱离文本流，独立于原来的网页之上，浮动的内容就在文档流空间上空独立出来。

清除浮动问题  清除浮动式针对某个div自身设定的语法： clear : none | left | right | both

    none  :  默认值。允许两边都可以有浮动对象

    left   :  不允许左边有浮动对象

    right  :  不允许右边有浮动对象

    both  :  不允许有浮动对象

3、层模型 类似ps中的图层，对某个图层进行准确移动定位，层模型就可以对div模块进行准确的进行定位。

定位的类型分为：

1）绝对定位 absolute    脱离文档流

2) 相对定位   relative      不脱离文档流

3）固定定位 fixed

4）不定位   static     （默认）

 

 

5、AMD 和 CMD 的区别有哪些？

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

Require.js  【 http://www.ruanyifeng.com/blog/2012/11/require_js.html】

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。

这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。
目前这些规范的实现都能达成浏览器端模块化开发的目的。

相同：皆为异步

区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

2. CMD 推崇依赖就近，AMD 推崇依赖前置。

3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

什么是模块化：http://www.jianshu.com/p/9171c5496c8e

 

 

6、websocket

WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。

认识HTML5的WebSocket - 立伟 - 博客园

http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html

 

7、如何加快HTML页面加载速度 /性能优化
1. 页面减肥： 雪碧图
a. 页面的肥瘦是影响加载速度最重要的因素。 
b. 删除不必要的空格、注释。 
c. 将inline的script和css移到外部文件。 
d. 可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥。 

2. 减少文件数量： 
a. 减少页面上引用的文件数量可以减少HTTP连接数。 
b. 许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了。 

3. 减少域名查询： 
a. DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好。 

4. 缓存重用数据： 
a. 对重复使用的数据进行缓存。 

5. 优化页面元素加载顺序： 
a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载HTML相关的东西，像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。 

6. 减少inline JavaScript的数量： 
a. 浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大。 
b. 不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容。 

7. 使用现代CSS和合法的标签： 
a. 使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片。 
b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥。 

8. Chunk your content： 
a. 不要使用嵌套table，而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table，这样就不需要等到整个页面（或大table）内容全部加载完才显示。 

9. 指定图像和table的大小： 
a. 如果浏览器可以立即决定图像或table的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作。 
b. 这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变。 
c. image使用height和width。 

 

8、单页面应用

所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。

ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。

jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统，整个解决方案会相对比较轻量、灵活。

从单页应用的特点来看，它比页面型网站更加依赖于JavaScript，而由于页面的单页化，各种子功能的JavaScript代码聚集到了同一个作用域，所以代码的隔离、模块化变得很重要。

说白就是无刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！

在HTML5中，可以通过History API实现如下处理即可：
1. 在A页面 通过发AJAX请求 请求页面中的B数据。
2. 在页面A中通过JS装载相应的信息到相应的位置来。
3. 通过History API在不刷新页面的情况下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址。  

1. history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为当前页地址。

2. history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上。

3. history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样。

4. popstate事件：当用户单击浏览器的后退或者前进按钮时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值，该属性值即为执行pushState方法时所使用的第一个参数值，其中保存了在向浏览器历史记录中添加记录同步保存的对象

 

 

9、Hybrid技术应当如何应用？http://www.cnblogs.com/yexiaochai/p/4921635.html

Hybrid的交互无非是Native调用前端页面的JS方法，或者前端页面通过JS调用Native提供的接口，两者交互的桥梁皆Webview：

10、你最爱的前端框架是什么，为什么？

 

11、微信JS-SDK 

 音频录制、https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

 

12、git/svn指令：http://www.cnblogs.com/cspku/articles/Git_cmds.html

 

13、常用开发工具

编辑器：sublime

调试：浏览器开发者工具/fiddler/微信开发者工具

自动化：gulp/webpack

图片处理：photoshop /AI

版本控制：SVN/GIT

原型设计：Axure

 

 

15、web安全性

 

16 HTPP/HTTPS

 

17、性能监测 

chrome 开发者工具

• Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
• Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
• Sources:断点调试JS。
• Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
• Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
• Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
• Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
• Security:判断当前网页是否安全。
• Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

 

 18、CDN怎么用

 

 

 19、MVC与MVVM的区别: http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
以backbone为列子：

1.用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。

2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。

3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。

mvvm:双向数据绑定：https://segmentfault.com/a/1190000006599500
以vue为例子： vue.js 则是采用数据劫持的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者

 

20.自适应解决方案：http://caibaojian.com/mobile-responsive-example.html

• 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案
• 使用flexbox解决方案
• 使用百分比加媒体查询
• 使用rem

 

21.js原生事件 http://www.jb51.net/article/64303.htm

 

22:动画卡顿：60fps ，小于后即会出现卡顿 ，3D加速 translatez(0),translate3D(0,0,0),,http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html