JavaScript慨念

来源：互联网发布：阿里云虚拟主机教程编辑：程序博客网时间：2024/05/16 06:05

js概念
1. js存储
2. 获取属性值的两种方法及区别
3. offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
4. XMLHttpRequest通用属性和方法
5. ===运算符判断等的规则
6. javascript有哪些方法定义对象
7. 评价一下三种方法实现继承的优缺点,并改进
8. 应用程序存储和离线web应用

js概念

js存储

js有多种存储方案，像cookie,userData,flash,LocalStorage,SessionStorage，globalStorage等，仅IE支持userData，globalStorage是Firefox独有的，而随着HTML5的出现，flash也逐渐退出这个舞台，因此现在的主角只有三个：cookie、LocalStorage、SessionStorage。三者都保存在浏览器端，都有大小限制和同源限制。
它们三个最为明显的区别就是cookie的容量只有4KB，所有浏览器都支持cookie，而另外两个的容量相对来说大很多，通常为5M。
第二点是，cookie会在请求时发送至服务器，作为请求标识，服务器可以修改coolie，而LocalStorage和SessionStorage不会。
第三点就是，因为别人可以分析存储在存放在本地的cookie，进行cookie欺骗，所以相对于另外两种，cookie不是很安全。
所以通常会将登陆信息等重要信息保存在session中，其他信息如果需要保留，则保存在cookie中。
然后是，对于LocalStorage和SessionStorage，两者的区别是SessionStorage是会话式的缓存，关闭页面后数据就会被清除。而LocalStorage是持久性的缓存，除非手动清除，不然数据永远有效，永远都不会被清除。

获取属性值的两种方法及区别

获取元素的属性通常有两种方式，第一种是取得这个元素后，通过element.getAttribute()方法,把要获取的属性名称传入作为参数，第二种是element.propertyName，得到元素的相应特性值，也就是property，大多数情况下元素的property和attribute的值是一样的，但是毕竟也有一些例外，对于没有对应特性的属性，只能用getAttribute方法。我个人更倾向于用getAttribute()方法，原因有三：一是起码不用刻意去记哪些元素的哪些属性可以用element.propertyName。第二，setAttribute的优势在于他可以修改文档中任意元素的任意属性。最后一点就是，可移植行更好，因为DOM是一种适用于多种环境和多种程序设计语言的通用型API，而element.propertyName只能适用于web文档。

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

XMLHttpRequest通用属性和方法

readyState:表示请求状态的整数，取值：
- UNSENT（0）：对象已创建
- OPENED（1）：open()成功调用，在这个状态下，可以为xhr设置请求头，或者使用send()发送请求
- HEADERS_RECEIVED(2)：所有重定向已经自动完成访问，并且最终响应的HTTP头已经收到
- LOADING(3)：响应体正在接收
- DONE(4)：数据传输完成或者传输产生错误
onreadystatechange：readyState改变时调用的函数
status：服务器返回的HTTP状态码（如，200， 404）
statusText:服务器返回的HTTP状态信息（如，OK，No Content）
responseText:作为字符串形式的来自服务器的完整响应
responseXML: Document对象，表示服务器的响应解析成的XML文档
abort():取消异步HTTP请求
getAllResponseHeaders(): 返回一个字符串，包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行
getResponseHeader(headerName):返回headName对应的报头值
open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法，不区分大小写；url是请求发送的相对或绝对URL；asynchronous表示请求是否异步；user和password提供身份验证
setRequestHeader(name, value):设置HTTP报头
send(body):对服务器请求进行初始化。参数body包含请求的主体部分，对于POST请求为键值对字符串；对于GET请求，为null

`===`运算符判断等的规则

只要两边有一个是NaN，false
两边同为null或undefined，true
两边是不同类型的值，false
-0和+0 true
两个字符串显示结果相同但编码不同，则 == 和=== 都认为它们不相等

javascript有哪些方法定义对象

对象字面量： var obj = {};
构造函数： var obj = new Object();
Object.create(): `var obj = Object.create(Object.prototype);

评价一下三种方法实现继承的优缺点,并改进

function Shape() {}function Rect() {}// 方法1Rect.prototype = new Shape();// 方法2Rect.prototype = Shape.prototype;// 方法3Rect.prototype = Object.create(Shape.prototype);Rect.prototype.area = function () {  // do something};

方法1：

优点：正确设置原型链实现继承
优点：父类实例属性得到继承，原型链查找效率提高，也能为一些属性提供合理的默认值
缺点：父类实例属性为引用类型时，不恰当地修改会导致所有子类被修改
缺点：创建父类实例作为子类原型时，可能无法确定构造函数需要的合理参数，这样提供的参数继承给子类没有实际意义，当子类需要这些参数时应该在构造函数中进行初始化和设置
总结：继承应该是继承方法而不是属性，为子类设置父类实例属性应该是通过在子类构造函数中调用父类构造函数进行初始化

方法2：

优点：正确设置原型链实现继承
缺点：父类构造函数原型与子类相同。修改子类原型添加方法会修改父类

方法3：

优点：正确设置原型链且避免方法1.2中的缺点
缺点：ES5方法需要注意兼容性

改进：

所有三种方法应该在子类构造函数中调用父类构造函数实现实例属性初始化

function Rect() {    Shape.call(this);}

用新创建的对象替代子类默认原型，设置Rect.prototype.constructor = Rect;保证一致性
第三种方法的polyfill：

function create(obj) {    if (Object.create) {        return Object.create(obj);    }    function f() {};    f.prototype = obj;    return new f();}

应用程序存储和离线web应用

HTML5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。
1.为html元素设置manifest属性:<html manifest="myapp.appcache">，其中后缀名只是一个约定，真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确
2.manifest文件首行为CACHE MANIFEST，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的url。注释以#开头
3.url分为三种类型：CACHE:为默认类型。NETWORK：表示资源从不缓存。 FALLBACK:每行包含两个url，第二个URL是指需要加载和存储在缓存中的资源，第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，如果从网络中载入这样的URL失败的话，就会用第二个URL指定的缓存资源来替代。以下是一个文件例子：

CACHE MANIFESTCACHE:myapp.htmlmyapp.cssmyapp.jsFALLBACK:videos/ offline_help.htmlNETWORK:cgi/

js编程

数据结构

数据库

优化

如何进行网站性能优化

雅虎Best Practices for Speeding Up Your Web Site：

content方面
1. 减少HTTP请求：合并文件、CSS精灵、inline Image
2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
3. 避免重定向：多余的中间访问
4. 使Ajax可缓存
5. 非必须组件延迟加载
6. 未来所需组件预加载
7. 减少DOM元素数量
8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
9. 减少iframe数量
10. 不要404
Server方面
1. 使用CDN
2. 添加Expires或者Cache-Control响应头
3. 对组件使用Gzip压缩
4. 配置ETag
5. Flush Buffer Early
6. Ajax使用GET进行请求
7. 避免空src的img标签
Cookie方面
1. 减小cookie大小
2. 引入资源的域名不要包含cookie
css方面
1. 将样式表放到页面顶部
2. 不使用CSS表达式
3. 使用不使用@import
4. 不使用IE的Filter
Javascript方面
1. 将脚本放到页面底部
2. 将javascript和css从外部引入
3. 压缩javascript和css
4. 删除不需要的脚本
5. 减少DOM访问
6. 合理设计事件监听器
图片方面
1. 优化图片：根据实际颜色需要选择色深、压缩
2. 优化css精灵
3. 不要在HTML中拉伸图片
4. 保证favicon.ico小并且可缓存
移动方面
1. 保证组件小于25k
2. Pack Components into a Multipart Document