关于前端面试的一点思考

一、cookie、sessionStorage 和 localStorage 的区别

cookie：一般有服务端生成，可设置失效时间，存放数据大小一般为4k左右，用于标识用户身份
sessionStorage：客户端生成，仅在当前会话中有效，关闭页面或浏览器后会清除，存放数据大小在5M左右
localStorage：客户端生成，除非被清除，否则永久保存，存放数据大小在5M左右

二、html 和 html5 怎么区分？

在文档类型声明上
- html：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"
- html5：<!DOCTYPE html>
在结构语义上
- html：没有结构语义化的元素
- html5：结构语义化较完善，比如<header><article><footer>

三、html5 新特性、新增元素和移除元素

html5 新特性：
- 用于绘图的 vanvas 元素、svg 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如：article、footer、header、nav、section
- 新的表单控件。比如：calendar、date、time、email、url、search
新增元素：
- <canvas> 新元素：<canvas>
- 新多媒体元素：<audio>、<video>、<source>、<embed>、<track>
- 新表单元素：<datalist>、<keygen>、<output>
- 新的语义和结构元素：<article>、<aside>、<bdi>、<command>、<details>、<dialog>、<summary>、<figure>、<figcation>、<footer>、<header>、<mark>、<meter>、<nav>、<progress>、<ruby>、<rp>、<rt>、<section>、<time>、<wbr>
移除元素：
- <acronym>、<applet>、<basefont>、<big>、<font>、<center>、<tt>、<strike>、<noframes>、<frameset>、<frame>、<dir>

四、css3 新特性

新增许多选择器，比如：E:enabled、E:disabled
新增动画相关的特性：Transition、Transform、Animation
新增背景和边框属性：
- 背景：background-clip、background-origin、background-size、background-break
- 边框：border-radius、box-shadow、border-image
文字特效：word-wrap、text-overflow、text-shadow、text-decoration
多列布局
用户界面

五、求 i 的值

  for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
      console.log(i);
    }, 0);
  }

运行结果：4

六、如何声明 html5，有什么作用？

声明 html5：<!DOCTYPE html>
作用：告知浏览器文档使用哪种规范解析

七、创建一个Ajax

创建 XMLHttpRequest 对象

  var xmlhttp;
    if (window.XMLHttpRequest ) {
      xmlhttp = new XMLHttpRequest();    // 支持IE7+, Chrome, Opera, Safari 浏览器
    } else {
      xmlhttp = new ActiveXObject("MicroSoft.XMLHTTP");   // 支持 IE6, IE5 浏览器
    }

当请求被发送到服务器时，执行一些基于响应的任务

 xmlhttp.onreadystatechange=function () {
     if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
 }

向服务器发送请求

  xmlhttp.open("GET", "ajax.text", true);
  xmlhttp.send();

方法	描述
open(method, url, async)	规定请求的类型、URL 以及是否异步处理请求。</br> <ul><li>请求的类型；GET 或 POST</li><li>文件在服务器上的位置</li><li>async：true（异步）或 false（同步）</li></ul>
send(string)	将请求发送到服务器</br> <ul><li>string：仅用于 POST 请求</li></ul>

八、为什么要使用CSS预处理器？

CSS 无法递归式定义，使用预处理器可以减少代码的冗余
提高开发效率