前端知识点

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

 

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

     预加载：

 

 

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

 一、根据IP地址查找域名
 二、创建链接（创建TCP三次握手）
 三、构建网页
 四、断开链接

URL解析过程：

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

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

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

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

渲染的步骤为：

1.解析HTML

2.构建DOM树

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

4.布局

5.绘制

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

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

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

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

 

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

布局模型有三类：

1）流动模型  flow（默认）

2）浮动模型  float

3）层模型  layer  

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

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

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

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

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

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

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

    both  :  不容许有浮动对象

三、层模型 相似ps中的图层，对某个图层进行准确移动定位，层模型就能够对div模块进行准确的进行定位。

定位的类型分为：

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

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

3）固定定位 fixed

4）不定位   static     （默认）

 

 

五、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

 

 

六、websocket

WebSocket API是下一代客户端-服务器的异步通讯方法。该通讯取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 四、Chrome 四、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

 

七、如何加快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。 

 

八、单页面应用

所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，全部的业务功能都是它的子模块，经过特定的方式挂接到主界面上。它是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方法时所使用的第一个参数值，其中保存了在向浏览器历史记录中添加记录同步保存的对象

 

 

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

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

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

 

十一、微信JS-SDK 

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

 

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

 

1三、经常使用开发工具

编辑器：sublime

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

自动化：gulp/webpack

图片处理：photoshop /AI

版本控制：SVN/GIT

原型设计：Axure

 

 

1五、web安全性

 

16 HTPP/HTTPS

 

1七、性能监测 

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文件等。

 

 1八、CDN怎么用

 

 

 1九、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的双向绑定，就必需要实现如下几点：
一、实现一个数据监听器Observer，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者
二、实现一个指令解析器Compile，对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
三、实现一个Watcher，做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图
四、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