佛系前端面试题记录--第八周

这里写目录标题

1.你知道多少种Doctype文档类型？
2.HTML与XHTML——二者有什么区别
3.new操作符具体干了什么呢?
4.哪些操作会造成内存泄漏？
5.grunt， YUI compressor 和 google clojure用来进行代码压缩的用法。
6.WEB应用从服务器主动推送Data到客户端有那些方式？
7.对网站重构的理解
8.js 操作获取和设置 cookie
9.事件、IE与火狐的事件机制有什么区别？如何阻止冒泡？
10.写一个通用的事件侦听器函数
11.异步加载和延迟加载
12.eval是做什么的？
13.如何获取UA
14.document.write和 innerHTML 的区别

1.你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

2.HTML与XHTML——二者有什么区别

最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

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

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

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

4.哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

5.grunt， YUI compressor 和 google clojure用来进行代码压缩的用法。

grunt：
UglifyJS 是基于 NodeJS 的 Javascript 语法解析/压缩/格式化工具
官网：http://lisperator.net/uglifyjs/ 或者 https://github.com/mishoo/UglifyJS2
安装：

$ npm install uglify-js -g

使用方法见官网 demo

YUI compressor：
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具，采用Java开发。
使用方法：

// 压缩JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
// 压缩CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

Google Closure Compiler：
官网：https://developers.google.com/closure/compiler/
使用方法：

在命令行下使用一个google编译好的java程序
使用google提供的在线服务
使用google提供的RESTful API

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

html5 websocket
WebSocket 通过 Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe
< script >标签的长时间连接(可跨域)

7.对网站重构的理解

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

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

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

8.js 操作获取和设置 cookie

// 创建cookie
function setCookie(name, value, expires, path, domain, secure) {var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);if (expires instanceof Date) {cookieText += '; expires=' + expires;}if (path) {cookieText += "; path=" + path     }if (domain) {cookieText += '; domain=' + domain;}if (secure) {cookieText += '; secure';}document.cookie = cookieText;
}
// 获取cookie
function getCookie(name) {var cookieName = encodeURIComponent(name) + '=';var cookieStart = document.cookie.indexOf(cookieName);var cookieValue = null;if (cookieStart > -1) {var cookieEnd = document.cookie.indexOf(';', cookieStart);if (cookieEnd == -1) {cookieEnd = document.cookie.length;}cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));}return cookieValue;
}
// 删除cookie
function unsetCookie(name) {document.cookie = name + "= ; expires=" + new Date(0);
}

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

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

10.写一个通用的事件侦听器函数

// event(事件)工具集，来源：github.com/markyun
markyun.Event = {// 页面加载完成后readyEvent : function(fn) {if (fn==null) {fn=document;}var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = fn;} else {window.onload = function() {oldonload();fn();};}},// 视能力分别使用dom0||dom2||IE方式 来绑定事件// 参数： 操作的元素,事件名称 ,事件处理程序addEvent : function(element, type, handler) {if (element.addEventListener) {//事件类型、需要执行的函数、是否捕捉element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent('on' + type, function() {handler.call(element);});} else {element['on' + type] = handler;}},// 移除事件removeEvent : function(element, type, handler) {if (element.removeEnentListener) {element.removeEnentListener(type, handler, false);} else if (element.detachEvent) {element.detachEvent('on' + type, handler);} else {element['on' + type] = null;}}, // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)stopPropagation : function(ev) {if (ev.stopPropagation) {ev.stopPropagation();} else {ev.cancelBubble = true;}},// 取消事件的默认行为preventDefault : function(event) {if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}},// 获取事件目标getTarget : function(event) {return event.target || event.srcElement;},// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；getEvent : function(e) {var ev = e || window.event;if (!ev) {var c = this.getEvent.caller;while (c) {ev = c.arguments[0];if (ev && Event == ev.constructor) {break;}c = c.caller;}}return ev;}
}

11.异步加载和延迟加载

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

12.eval是做什么的？

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

13.如何获取UA

<script>
function whatBrowser() {  document.Browser.Name.value=navigator.appName;  document.Browser.Version.value=navigator.appVersion;  document.Browser.Code.value=navigator.appCodeName;  document.Browser.Agent.value=navigator.userAgent;
}
</script>

14.document.write和 innerHTML 的区别

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分