前端一些常见的基础知识

•  HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    1. 绘画 canvas;
    2. 用于媒介回放的 video 和 audio 元素;
    3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
    4. sessionStorage 的数据在浏览器关闭后自动删除;
    5. 语意化更好的内容元素，比如 article、footer、header、nav、section;
    6. 表单控件，calendar、date、time、email、url、search;
    7. 新的技术webworker, websocket, Geolocation;

•    HTML5 语义化特性。

  1.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  2.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
  3.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
  4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

• session,localStorage,sessionStorage的区别。

  cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
  cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  
  存储大小：
      cookie数据大小不能超过4k。
      sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  
  有期时间：
      localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
      sessionStorage  数据在当前浏览器窗口关闭后自动删除。
      cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

•  水平垂直居中     

第一种方案：
div {
    position: absolute;     /* 相对定位或绝对定位均可 */
    500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;    

}
第二种方案：

.container {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

}
.container div {
     100px;
    height: 100px;
    background-color: pink;     
}  

• 前端需要的一些SEO　　

1. 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。
2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
4. 重要内容不要用js输出：爬虫不会执行js获取内容
5. 少用iframe：搜索引擎不会抓取iframe中的内容
6. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

• (*)网站性能优化

      a.减少http请求：合并css文件。

      b.将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量

      c.减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询

      d.将样式表放到页面顶部,不使用CSS表达式

      e.将脚本放到页面底部,将javascript和css从外部引入,压缩javascript和css,减少DOM访问

      f.优化图片：根据实际颜色需要选择色深、压缩,优化css精灵