前端开发技巧与陷阱-优快云博客

哪些操作会造成内存泄露

内存泄露是指任何对象在不再需要它之后仍然存在
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

列举IE与其他浏览器不一样的特性

IE支持currentStyle，Firefox使用getComputStyle
IE使用innerText，firefox使用textContent
滤镜方面：IE =>filter:alpha(opacity=num); firefox => -moz-opacity: num;
事件方面：IE=>attachEvent; firefox => addEventListener
鼠标位置： IE=> event.clientX; firefox => event.pageX
触发事件的目标： IE=> event.srcElement; firefox => event.target
IE中消除list的圆点仅需margin: 0 即可； firefox需要设置margin: 0;padding: 0；list-style：none
css圆角： ie7以下不支持

创建ajax的过程

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

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()    xmlHttp.onreadystatechange = function(){                    if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
......
        }
    }

ajax的缺点和在IE下的问题？

ajax不支持浏览器back按钮
安全问题 AJAX暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏了程序的异常机制

不容易调试

IE缓存问题

 在IE浏览器下，如果请求的方法是GET，并且请求的URL不变，那么这个请求的结果就会被缓存。解决这个问题的办法可以通过实时改变请求的URL，只要URL改变，就不会被缓存，可以通过在URL末尾添加上随机的时间戳参数('t'= + new Date().getTime())

或者：

open('GET','demo.php?rand=+Math.random()',true)

Ajax请求的页面历史记录状态问题

可以通过锚点来记录状态，location.hash。让浏览器记录Ajax请求时页面状态的变化。

还可以通过HTML5的history.pushState，来实现浏览器地址栏的无刷新改变

Promise

Promise 有四种状态：

pending: 初始状态, 非 fulfilled 或 rejected.
fulfilled: 成功的操作.
rejected: 失败的操作.
settled: Promise已被fulfilled或rejected，且不是pending

fulfilled 与 rejected 一起合称 settled。

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算

var promise = new Promise(function(resolve, reject) {
        if (...) {  // succeed         resolve(result);
        } else {   // fails    reject(Error(errMessage));
    }
});

Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为 thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled对应 resolve, onRejected 对应 reject

如何删除一个cookie

将时间设为当前时间往前一点

var date = new Date();
date.setDate(date.getDate() - 1);//真正的删除（setDate()方法用于设置一个月的某一天）

expires的设置

document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

，和，标签

<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。
em 是 斜体强调标签，更强烈强调，表示内容的强调点。相当于html元素中的 <i>...</i>
< b > < i >是视觉要素，分别表示无意义的加粗，无意义的斜体
em 和 strong 是表达要素(phrase elements)

attribute和property的区别

attribute是dom元素在文档中作为html标签拥有的属性
property就是dom元素在js中作为对象拥有的属性

所以：
对于html的标准属性来说，attribute和property是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的

网络分层里七层模型

应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）
传输层（TCP和UDP）
网络层（IP）
物理和数据链路层（以太网）

304缓存的原理

服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存
304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件

过程如下：
1. 客户端请求一个页面（A）
2. 服务器返回页面A，并在给A加上一个ETag
3. 客户端展现该页面，并将页面连同ETag一起缓存
4. 客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器
5. 服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体