web知识（五）

一.微格式
1.什么是微格式？
微格式：建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。
微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。
eg:
<div >...</div>
<div class=“userInfo” log="doGame">...</div>
log自定义属性来表示，自身业务的一些标识信息。
2.微格式作用
a.在【爬取Web内容时，能够更为准确地识别内容块的语义】；
b.对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

二.网页上有大量图片如何优化？
1:将图片放置在单独的图片服务器上如阿里OSS对象存储，应用和图片服务器分开
2:压缩图片方案
3:图片懒加载
4:将图片压缩成base64格式来节约请求

三.前端性能的优化
1.减少dom操作
2.部署前，压缩图片，压缩代码
3.优化js代码，减少冗余代码
4.减少http请求，合理设置http缓存
5.使用内容分发CDN加速
6.静态资源缓存
7.图片懒加载等

四.渐进增强与优雅降级？
渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。
由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。
1.渐进增强（Progressive Enhancement）【向上兼容】：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
2.优雅降级（Graceful Degradation）【向下兼容】：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。
比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

五.什么是WebSocket？如何与兼容低版本浏览器？
1.WebSocket 是 HTML5 开始提供的一种在单个 【TCP 连接上进行全双工通讯的协议】。
WebSocket类似HTTP 协议，是为了【弥补HTTP 协议的缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。】
它的最大特点就是，【服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种】。
其他特点包括：
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。
【默认端口也是80和443】，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）【没有同源限制，客户端可以与任意服务器通信】。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
2.对于低端不支持websocket的浏览器，一般有几个解决方案
使用轮询或长连接的方式实现伪websocket的通信
【轮询】是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。
使用flash或其他方法实现一个websocket客户端
3.*************WebSocket与HTTP的关系：**************
1）相同点：
1.【都是一样基于TCP的，都是可靠性传输协议】。
2.都是【应用层协议】。
2）不同点：
1.WebSocket是双向通信协议，可以双向发送或接受信息。HTTP是单向的。
2.【WebSocket是需要握手进行建立连接的。】
WebSocket需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。
4.*********WebSocket与Socket的关系******************
1）.Socket是传输控制层协议（tcp/udp）的接口。【（传输层）】
当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立TCP连接。
TCP连接则更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。
2）.WebSocket是应用层协议。【（应用层协议）】
5.WebSocket的实现
WebSocket 的实现分为客户端和服务端两部分。
客户端（通常为浏览器）发出 WebSocket 连接请求，服务端响应，实现类似 TCP 握手的动作，
从而在浏览器客户端和 WebSocket 服务端之间形成一条 HTTP 长连接快速通道。
两者之间后续进行直接的数据互相传送，不再需要发起连接和相应。

六.web开发中会话跟踪方式
1.会话跟踪引入的原因
HTTP是一种无状态协议，每当用户发出请求时，服务器就会做出响应，客户端与服务器之间的联系是离散的、非连续的。
当用户在同一网站的多个页面之间转换时，根本无法确定是否是同一个客户。
会话跟踪技术就可以解决这个问题。当一个客户在多个页面间切换时，服务器会保存该用户的信息。
2.会话跟踪的方法
隐藏表单域：<input type="hidden">非常适合步需要大量数据存储的会话应用。
URL 重写：URL 可以在后面附加参数，和服务器的请求一起发送，这些参数为名字/值对。
Cookie：一个 Cookie 是一个小的，已命名数据元素。
Session：使用 setAttribute(String str,Object obj)方法将对象捆绑到一个会话
IP地址

七.cookie、session和localStorage，sessionStorage的区别
1.cookie和session区别：
1）使用方式：
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的。
session对应一次会话。
session不能区分路径，同一个用户在访问一个网站，所有的session在任何一个地方都可以访问到。
2）保存位置：session服务端，客户端不知道其中的信息、cookie客户端，服务器能够知道其中的信息。
3）安全性：session的安全性大于cookie。
  ① sessionid存储在cookie中，若要攻破session首先要攻破cookie；
  ② sessionid是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionid；
  ③ 第二次启动session_start后，前一次的sessionid就是失效了，session过期后，sessionid也随之失效。
  ④ sessionid是加密的。
4）存储大小和内容：
cookie，不超过4kb，存储文本格式
session大小无限制，存各种对象
5）应用场景：
cookie：
（1）判断用户是否登录过网站，以便下次登录时能够实现自动登录（或者记住密码）。
（2）保存上次登录的事件等信息。
（3）保存上次查看的页面
（4）浏览计数
session：
（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用
（4）防止用户非法登录
2.cookie、sessionStorage和localStorage的区别
HTML5的WebStorage提供了两种API：sessionStorage（会话存储）和localStorage（本地存储）
1)【cookie数据始终在同源的http请求中携带（即使不需要）】，即cookie在浏览器和服务器间来回传递。
而【localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信】。
2)存储大小限制也不同，cookie数据不能超过4k。sessionStorage和localStorage 可以达到5M或更大
3)数据有效期不同:
1.sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
【sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在】。
但是【sessionStorage在关闭了浏览器窗口后就会被销毁】。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
2.localStorage：【始终有效，窗口或浏览器关闭也一直保存】，因此用作持久数据；
除非主动删除数据，否则数据永远不会消失。
3.【cookie只在设置的cookie过期时间之前一直有效】，即使窗口或浏览器关闭。
4)作用域不同:
1.sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
2.localStorage 在所有同源窗口中都是共享的；
3.cookie也是在所有同源窗口中都是共享的。
5）获取方式：
localStorage：window.localStorage
sessionStorage：window.sessionStorage
6）应用场景：
localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
sessionStorage：敏感账号一次性登录

参考链接： https://www.jianshu.com/p/d313f1108862;
参考链接： https://www.cnblogs.com/pengc/p/8718380.html;
参考链接： https://www.cnblogs.com/Javi/p/9303020.html;
参考链接： https://www.jianshu.com/p/e0f2774d1170;
参考链接： https://segmentfault.com/a/1190000017155151;
参考链接： https://www.jianshu.com/p/6563319f2ec6;