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的语义化

　　应该正确的标签展现对应内容建立页面结构，而不是滥用idv。 优势是 代码结构清洗，利于开发和维护。 方便其余设备进行解析。有利于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同名文件，便会利用到缓存