HTML相关的复习记录-持续更新
一：如何进行网站性能优化
1.页面级优化：
减少HTTP请求：减少文件请求的数据而不是质量，比如合并文件，图片整合成雪碧图，用background-position进行定位。
压缩JS，css： 这个是比较常见的办法，节省不少空间。
HTTP缓存： 使访问过的资源，从缓存读取，而不是重新从服务器请求，返回304，而不是200，能够有效的节省带宽。
将css放到Head中： 使浏览器先构建css tree。如将css放到body中，浏览器可能先渲染dom tree 后渲染css tree，导致浏览器渲染时间推迟
避免重复利用资源： 由于页面是多个模块拼接的，可能存在每个模块请求的资源是相同的
2.代码及优化：
代码中，尽量不要直接使用直接操作DOM的操作，因为操作DOM是最耗性能的。
在JS查找DOM时，返回的HTML DOM时，返回的是 HTML Collection，如何要遍历他的话，最好先转成数组在访问，使用某一节点，也最好先保存为局部变量。因为每次访问该集合的时候，他都会重新查询，他返回的是一个动态的结果，而不是一个静态的数组。
尽量不使用eval 和Function,因为通过字符串构建的方法，不会预先编译，只有执行到的时候进行解析。
如果想要修改全局变量的话，如果有大量计算，最好先放到局部变量进行缓存，在出结果的时候赋值给全局变量，因为每次调用全局变量是通过查询获取的
二：HTTP状态码含义
200： 成功处理了请求，并提供的返回
204： 成功处理了请求，但没有任何返回。
301：请求的网页发生了变化（地址栏最后不要写 / 服务器会进行一次重定向），地址栏保存新的url
302: 请求的网页临时移动到了新位置。地址栏保存原来的url
303：次请求与上次的请求没有发生变化，相当于从浏览器缓存中获取的、
400： 服务器无法解析的请求
401：认证失败（请求携带的认证信息，未通过）
403： 服务器拒绝的请求
404：服务器找不到的请求。
500： 服务器遇到了错误，无法完成请求。
503： 服务器目前无法使用，类似于维护。
三：如何理解HTML5的语义化
应该正确的标签展示对应内容创建页面结构，而不是滥用div。 优点是 代码结构清洗，利于开发和维护。 方便其他设备进行解析。有利于SEO引擎搜索优化。
结构级：section(区域的章节描述)、header(头部)、footer(底部)、nav(菜单导航)、acticle(文字的主体内容)
块级：aside(补充主体)、figure(多个元素组合并展示与ficaption)、code(代表代码块)、dialog(表达人与人之间对话包含dt和dd)
行内级: mete(特定范围的数值)、time(表示时间)、progress(进度条)、video(视频元素)、audio(音频元素)
交互级： details、datagrid、menu、command、
四:HTML5的离线储存
新建一个.appcache的文件缓存机制，网络在线会更新文件，当网络离线状态下，会通过储存的数据进行展示。ttps://www.jianshu.com/p/aaa8971cd6c8
五：cookies，sessionStorage和localStorage的区别
localStorage 用于长期储存，浏览器关闭不丢失。
sessionStorage在浏览器关闭后自动删除。
cookie会在同源的http请求中携带，多用于表示用户信息。 数据大小不会超过4K。可以设置过期时间。
六：web标准和W3C标准
网页展示由：结构（html）、表现（css）、行为(交互，dom与js)。独立分开
W3C标准对web标准提出规范化要求。 标签要闭合，标签要小写，注意嵌套关系。
七：DocType作用？严格模式与混杂婚事如何区分，意义何在？
<!DocType> 生命位于文档最上方，Html之前，告知浏览器以何种模式来渲染。
严格模式也成为了标准模式。浏览器按照W3C标准解析执行代码。
混杂模式则是使用浏览器自己的方式执行代码。
html5 不急于smgl 因为不需要对DTD进行引用，但是需要doctype来规范浏览器行为，。
八：浏览器缓存
把已请求到的web资源，copy到浏览器缓存中。
浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
根据缓存新鲜度，判断是否使用缓存。 如使用则状态为304. 如不适用，则为200.
新鲜度可根据mate进行设置
九：浏览器渲染原理及流程
地址栏输入url => DNS解析 =》 建立tcp连接 =》 客户端发送http请求 =》 服务处理，响应请求=> 浏览器渲染HTML
首先要知道，浏览器Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。
先解析dom结构。在解析css结构。然后将dom和css结构成Render结构，随后在页面上构建render结构，然后构建render布局，在页面上绘制render结构。
页面构建是以8K分块的形式进行的。 以局部布满全局，类似于全页面多线程的异步加载、
十：ajax的底层原理
说到ajax不得不说其核心XMLHttpRequest。
axjax的原理，其实就是XMLHttpRequest的处理过程。
发送请求是由open 和send 等进行。
根据返回状态。 也就是onreadystatechange。根据每次状态发生变化时触发。
ajax返回的信息，其实就是responseText和responseXML取的返回值。
十一：什么是CDN和CDN的好处
CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。
浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。
其他网站，获取过同IP同名文件，便会利用到缓存
十二：IndexedDB:浏览器里内置的数据库
onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。
旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。
var request = window.indexedDB.open("testDB", 2);
