云创科技笔试题

笔试

1. 说一下减少DOM数量的办法，一次性给你大量的DOM怎么优化？

  • 分页加载内容
  • 按需加载内容
  • 使用伪元素代替部分标签元素

2. 描述一下script标签的async和defer的区别

defer会等到页面全部加载完成之后在进行脚本执行

async下载完毕会立即执行

此处可以说一下时间线的问题

3. 屏幕正中间有一个元素A，元素A中有文字A,随着屏幕宽度的变化，始终需要满足下列要求:（请用html css实现）

  1. 1. A元素垂直居中于屏幕中央
  2. 2. A元素距离屏幕左右边距各10px
  3. 3. A元素里面的文字A front-size：20px；水平垂直居中
  4. 4. A元素的高度始终是A元素宽度的50%（如果搞不定可以实现为a元素的高度，固定为200px）
  1. <style>
  2.     body {
  3.         padding: 0;
  4.         margin: 0;
  5.     }
  6.     .A {
  7.         position: fixed;
  8.         top: 0;
  9.         bottom: 0;
  10.         margin: auto 0;
  11.         font-size: 20px;
  12.         text-align: center;
  13.         height: calc(50vw - 10px);
  14.         left: 10px;
  15.         right: 10px;
  16.         background-color: aqua;
  17.     }
  18. </style>
  20. <div class="A">A</div>

4. ul内部除最后一个li以外设置右边框效果

  1.     ul li:not(:last-child) {
  2.         border-right: 1px solid #000;
  3.     }

5. 一个标签的class样式的渲染顺序, ID, class,标签,伪类的优先级

id > class = 伪类 > 标签

6. 写出代码的执行结果，并解释为什么

  1. function a() {
  2.     console.log(1);
  3. }
  4. (function() {
  5.     if (false) {
  6.         function a() {
  7.             console.log(2);
  8.         }
  9.     }
  10.     console.log(typeof a); // undefined
  11.     a(); // 报错
  12. })()

解析： 立即执行函数里面的作用域原本全局中有一个a变量值为function(){console.log(1)} 由于立即执行函数里面还存在函数声明因为此a的值改变但是并不为function a() {console.loh(2)}是因为if判断句并不能执行里面的声明语句，因此这个a的值变为undefined，即内部函数声明提升没有将函数完全提升，而是局部提升，因此后面打印的a 为undefined 类型为undefined a() 报错

7. 请写出弹出值，并解释为什么

  1. alert(a); // function a() {alert(10);}
  2. a(); // 10
  3. var a = 3; 
  4. function a() {
  5.     alert(10);
  6. };
  7. alert(a); // 3
  8. a = 6;
  9. a(); // 报错

原因：执行这段代码的时候经过了变量声明提升，以及函数声明提升的过程，首先变量声明提升 作用域中存在变量a 值为undefined，其次函数声明提升，作用域中a的值变成了function a() {alert(10)}， 接下来从上到下执行，执行aler(a)的时候作用域中的a为function a(){alert(10)} 接下来执行了a(); 打印 10,在接下来赋值语句 var a = 3 因此作用域中的a的值变为3 在接下来打印a的值也就为3，接着a又被赋值为6，因此后面执行a()的时候会报错

8. 写出下面程序的打印顺序，并简要说明原因

  2.     setTimeout(function () {
  3.         console.log("set1");
  4.         new Promise(function(resolve) {
  5.             resolve();
  6.         }).then(function () {
  7.             new Promise(function (resolve) {
  8.                 resolve();
  9.             }).then(function () {
  10.                 console.log("then4");
  11.             })
  12.             console.log('then2');
  13.         })
  14.     });
  15.     new Promise(function (resolve) {
  16.         console.log('pr1');
  17.         resolve();
  18.     }).then(function () {
  19.         console.log('then1');
  20.     });
  22.     setTimeout(function() {
  23.         console.log("set2");
  24.     });
  25.     console.log(2);
  27.     new Promise(function (resolve) {
  28.         resolve();
  29.     }).then(function () {
  30.         console.log('then3');
  31.     })

答案：pr1 2 then1 then3 set1 then2 then4 set2
解析： promise 对象里面的函数会立即执行，而定时器的function会插入到任务队列的最后执行