html5的本地缓存优化,缓存、优化、http

总结几个常见的问题，贯穿前端学习的始末。

1.浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2.实现浏览器内多个标签页之间的通信

调用 localstorge、cookies 等本地存储方式

3.减少页面加载时间的方法

优化图片

图像格式的选择(GIF：提供的颜色较少，可用在一些对颜色要求不高的地方)

优化CSS(压缩合并css，如 margin-top, margin-left...)

网址后加斜杠(如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。)

5.减少浏览器的重排和重绘(尽量不在js中操作元素的样式； 标明高度和宽度，如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了)

减少http请求(合并文件，合并图片)

4.如何重构页面

编写 CSS

让页面结构更合理化，提升用户体验

实现良好的页面效果和提升性能

5.http状态码

表示网页服务中http状态响应的3位数代码

1开头(消息)：

2开头(成功)：成功处理了请求的状态码；

3开头(重定向)：每次请求中使用重定向不要超过 5 次；

4开头(请求错误)：表示请求可能出错，妨碍了服务器的处理；

5开头(服务器错误)：表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

6.客户端操作系统

var isWin = ( navigator.userAgent.indexOf("Win") != -1 );

var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );

var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );

7.关于URI、URL、URN

三者的关系如下图所示：

Paste_Image.png

如下URI:

http://bitpoetry.io/posts/hello.html#intro

http:// 定义资源访问方式

bitpoetry.io/posts/hello.html 定义资源存放位置

#intro 资源

URL是URI的一个子集，告诉我们访问网络位置的方式。在我们的例子中，URL应该如下所示：

http://bitpoetry.io/posts/hello.html

URN是URI的子集，包括名字(给定的命名空间内)，但是不包括访问方式，如下所示：

bitpoetry.io/posts/hello.html#intro