前端笔试题

被要求出一份笔试题更新公司面试的笔试卷子，于是做了一份适合公司的简单的笔试试卷。

HTML5

1. 页面导入样式时，使用link和@import有什么区别？

   • link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
   • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
   • import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
   • link支持使用js控制DOM去改变样式，而@import不支持;

2. HTML5的存储方案，简要介绍他们的区别。

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

3. viewport的常见设置有哪些？

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

CSS

1. 介绍一下CSS的盒子模型。

   • IE盒模型和标准盒模型
   • 区别：IE的content部分把 border 和 padding计算了进去;

2. 简要介绍一下css3的新特性。

   • 线性渐变（gradient）；旋转（transform）；缩放,定位,倾斜,动画,多背景、例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation

JS

1. js基本数据类型？
   
   • Undefined、Null、Boolean、Number、String、Symbol
2. 冒泡和捕获的事件机制区别？如何阻止冒泡？
   
   • IE的事件流叫做事件冒泡。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。所有现代浏览器都支持事件冒泡，并且会将事件一直冒泡到window对象。
   • IE中cancelBubble的值设置为true，其他调用stopPropagation()；
3. 浏览器有哪些默认事件，如何阻止默认事件？
   
   • 右键菜单、表单提交跳转、a连接的跳转
   • return false;event.preventDefault();

4. 那些操作会造成内存泄漏？

   • 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

5. 以下执行结果是

   setTimeout(function() {
     console.log(1)
   }, 0);
   new Promise(function executor(resolve) {
     console.log(2);
     for( var i=0 ; i<10000 ; i++ ) {
       i == 9999 && resolve();
     }
     console.log(3);
   }).then(function() {
     console.log(4);
   });
   console.log(5);

   结果：2 3 5 4 1

   var a = 0, b = 0, c = 0;
   for ( var i = 1; i <= 3; i++) { 
       var i2 = i; 
       (function() {
           var i3 = i; 
           setTimeout(function() {
               a += i
               b += i2;
               c += i3; 
          }, 1);
       })();
   }
   setTimeout(function() {
       console.log(a, b, c);
   }, 100);

   结果：12 9 6

性能优化

1. 常见的性能优化方法。