前端小tips（四）

43.ajax 的过程是怎样的

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新

44. 异步加载和延迟加载

1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax去获取 js 代码，然后通过 eval 执行
3. script 标签上添加defer 或者 async 属性
4. 创建并插入iframe，让它异步执行 js
5. 延迟加载：有些js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的

45. 前端的安全问题？

1. XSS
2. sql注入
3. CSRF：是跨站请求伪造，很明显根据刚刚的解释，他的核心也就是请求伪造，通过伪造身份提交POST和GET请求来进行跨域的攻击

完成CSRF需要两个步骤：

1. 登陆受信任的网站A，在本地生成 COOKIE
2. 在不登出A的情况下，或者本地 COOKIE 没有过期的情况下，访问危险网站B。

46.ie 各版本和 chrome 可以并行下载多少个资源

1. IE6 2 个并发
2. iE7 升级之后的 6个并发，之后版本也是 6 个
3. Firefox，chrome也是6个

47.javascript里面的继承怎么实现，如何避免原型链上面的对象共享

用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量

48. Flash、Ajax各自的优缺点，在使用中如何取舍？

Flash：

1. Flash适合处理多媒体、矢量图形、访问机器
2. 对CSS、处理文本上不足，不容易被搜索

Ajax：

1. Ajax对CSS、文本支持很好，支持搜索
2. 多媒体、矢量图形、机器访问不足

共同点：

1. 与服务器的无刷新传递消息
2. 可以检测用户离线和在线状态
3. 操作DOM

49. 请解释一下 JavaScript 的同源策略。

概念：
同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自NetscapeNavigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制：
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

50．GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制

GET方式需要使用Request.QueryString 来取得变量的值
POST方式通过Request.Form 来获取变量的值
也就是说Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。

在以下情况中，请使用 POST 请求：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

51. 哪些地方会出现css阻塞，哪些地方会出现js阻塞？

js 的阻塞特性：所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。
由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建DOM 树的情况，所以就会阻塞其他的下载和呈现。
嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6 下 CSS 都是阻塞加载）
当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面，就不会出现阻塞的情况了。
根本原因：因为浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，所以就会出现上面 CSS 阻塞下载的情况。

52.eval是做什么的？

1. 它的功能是把对应的字符串解析成JS代码并运行
2. 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）

53.Node.js 的适用场景

1. 高并发
2. 聊天
3. 实时消息推送

54.JavaScript 原型，原型链 ? 有什么特点？

1. 原型对象也是普通的对象，是对象一个自带隐式的proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

55. 怎么重构页面？

1. 编写 CSS
2. 让页面结构更合理化，提升用户体验
3. 实现良好的页面效果和提升性能

56.WEB应用从服务器主动推送Data到客户端有那些方式？

1. html5 websocket
2. WebSocket 通过 Flash
3. XHR长时间连接
4. XHR MultipartStreaming
5. 不可见的Iframe
   6.script标签的长时间连接(可跨域)

57. 事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为
2. 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件
   3.ev.stopPropagation();
   注意旧ie的方法：ev.cancelBubble = true;

58.Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？

Ajax 是什么：

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax 的最大的特点：

1. Ajax可以实现动态不刷新（局部刷新）
2. readyState 属性状态 有5个可取值： 0 = 未初始化，1 = 启动， 2 = 发送，3 = 接收，4 = 完成

Ajax 同步和异步的区别:

1. 同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事
2. 异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕
   ajax.open方法中，第3个参数是设同步或者异步。

Ajax 的缺点：

1. Ajax 不支持浏览器 back 按钮
2. 安全问题 Ajax 暴露了与服务器交互的细节
3. 对搜索引擎的支持比较弱
4. 破坏了程序的异常机制
5. 不容易调试

解决跨域问题：

1. jsonp
2. iframe
3. window.name、window.postMessage
4. 服务器上设置代理页面

59. 对网站重构的理解

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的 UI。

对于传统的网站来说重构通常是：

1. 表格(table)布局改为 DIV + CSS
2. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对 IE6 有效的)
3. 对于移动平台的优化
4. 针对于 SEO 进行优化
5. 深层次的网站重构应该考虑的方面
6. 减少代码间的耦合
7. 让代码保持弹性
8. 严格按规范编写代码
9. 设计可扩展的API
10. 代替旧有的框架、语言(如VB)
11. 增强用户体验
12. 通常来说对于速度的优化也包含在重构中
13. 压缩JS、CSS、image等前端资源(通常是由服务器来解决)
14. 程序的性能优化(如数据读写)
15. 采用CDN来加速资源加载
16. 对于JS DOM的优化
17. HTTP服务器的文件缓存

60. HTML5的优点和缺点

优点：

网络标准统一、HTML5本身是由W3C推荐出来的。
多设备、跨平台
即时更新
提高可用性和改进用户的友好体验
有几个新的标签，有助于开发人员定义重要的内容
可以给站点带来更多的多媒体元素（音频和视频）
可以很好的代替Flash和Silverlight
被大量应用于移动应用程序和游戏

缺点：

安全方面：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket这样的功能很容易被黑客利用，从而盗取用户的信息和资料
完善性方面：许多特性各浏览器的支持程度不同
技术门槛方面：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage等新特性，后台甚至浏览器原理的知识，机遇的同时也意味着挑战
性能方面：某些平台下的引擎问题导致HTML5性能低下
浏览器兼容性方面：最大缺点，IE9以下的浏览器几乎都不兼容

扩展

优点 - 跨平台的使用。比如你开发了一款HTML5的游戏，可以轻易的一直到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以他得跨平台行非常强大。 - 自适应网页。可以自动识别屏幕宽度，并作出相应调整的网页设计。网站为不同的设备提供不同的网页，如专门提供mobile版本活着iPhone／iPad版本。但是这样需要同时维护多个版本，会大大增加架构设计的复杂度。