笔试题--赞同

1. 页面布局模型（③种）

① 流动模型flow

默认的网页布局模式

• 块级元素：自上向下排序，块级元素以行的形式占据位置

• 行内元素：从左到右排序

② 浮动模型float

• float: left;

• float: right;

③ 层模型layout

• position: relative;

• position: absolute;

• position: fixed;

z-index属性适用于定位元素，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。

2. 哪些元素会生成新的BFC?（只要元素满足下面任一条件即可触发 BFC ）

• 根元素html（BFC的区域就是整个文档）

• float属性不为none(BFC的区域不会与float box重叠。)

• position为absolute或fixed(BFC的区域有自己的尺寸。)

• display为inline-block, table-cell, table-caption, flex, inline-flex(BFC的区域有自己的宽高)

• overflow不为visible(计算BFC的高度时，浮动元素也参与计算。)

3. 有关 z-index 属性叙述正确的一项是：

• A. 此属性必须和 position 属性一起使用才能起作用，此时 position 取任何值都可以

  • 错，取值static不行

• B. 此值越大，层的顺序越往上

  • 对

• C. 一般后添加的元素，其 z-index 值越大；

  • 对

• D. 即使上面的层没有任何内容也会挡住下面的层，使下面的层显示不出来；

  • 错

4. css可以通过inherit强制继承

5. c3动画效果的关键字：animation keyframe

@keyframes myName{
    from{}
    to{}
}
animation：myName 2s linear 1s infinite;

6. css边距

• 一个空元素的高度、边框、内边距都是0，上下外边距为20px，那么这个空元素的框模型的高度为40px

  • 错 为0

• 一个空元素的高度、边框、外边距都是0，上下内边距为20px，那么这个空元素的框模型的高度为40px

  • 对

7. 下面不是 JavaScript 的保留字有：

• A. undefined

• B. null 保留字

• C. NaN

• D. default 保留字

8. 阅读以下代码，假设 nodes.length 为 10，假如点击 index=5 的 div 标签时， 控制台输出的结果为： 10

var addClickHandler = function(nodes) {
  var i;
  for(i = 0; i < nodes.length; i++) {
    nodes[i].onclick = function(e) {
      console.log(i)
    }
  }
}
var nodes = document.getElementsByTagName('div')
addClickHandlers(nodes)

• A. 0

• B. 5

• C. 10

9. vue-router

• vue-router 在 hash 模式下，hash 虽然在 URL 中，但不被包括在 HTTP 请求中

• vue-router 在 history 模式下，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误

10. 以下关于跨域说法错误的是？AEF

• http://taobao.com/a.html 和 https://taobao.com/b.html 协议不同，是不相同的域名，不属于同源

• 通过 document.domain 的调用，可以使 ifram 内嵌的 http://a.taobao.com/page.html 通过父页面 http://taobao.com/home.html 的同源检测

• CSS 中通过@font-face 使用字体也会有跨域问题

  • 站点的域名为 www.domain.com，而静态文件的域名为 st.domain.com。

• Cookie，LocalStorage 和 IndexedDB 都会受到同源策略的限制

• JSONP CORS nginx反向代理都是常用的解决跨域的方案

• 错误：跨域资源共享(CORS)规范中规定了除了 GET 之外的 HTTP 请求，或者搭配 某些 MINE 类型的 POST 请求，浏览器都需要先发一个 OPTIONS 请求。

  • get也可以

11. 以下说法正确的是？AC

• A. 通过 new URL('www.taobao.com') ，可以解析 url 内容。

• B. console.log() 是异步调用 -- 因运行环境而不同

  • JavaScript 环境提供的异步函数一般分为两大类：I/O函数和计时函数。

  • console.log就是一个I/O函数。对于引用类型，console.log 会先储存一个引用，因此在打印引用类型时结果不一定准确。

  • Node的 console.log 是另一回事，它是严格同步的

• C. Async functions 本质上是 Generators 的语法糖

  • 使用 promise 来实现一个 generator 自执行器

• D. 在发布 NPM 模块时，版本号可以任意

  • X.Y.Z

  • X 主版本号 不向下兼容的版本

  • Y 次版本号 向下兼容的修改

  • Z bug修改

• E. process.nextTick() 和 setImmediate() 执行时机一致

  • process.nextTick 是在当前代码执行完毕后立即执行

  • setImmediate 是加入到轮询,空闲后立即执行

A()
B()
C()

A()
process.nextTick(B)
C()

A()
setImmediate(B)
C()

12. 以下关于 JavaScript 运算符的断言，正确的有 ACD

• A. 使用 delete 运算符并不会删除原型链中的任何对象

  • 可删除对象属性

  • 删除不了变量

  • 删除不了原型链的变量

• B. 尝试检索一个 undefined 值将会导致 TypeError 异常，可以通过“||”运算符 来避免错误

  • 尝试检索一个undefined值将会导致TypeError异常。这可以通过&&运算符来避免错误

• C. 使用 delete 运算符并不会删除通过 var 定义的对象

• D. 在 JavaScript 中，关于属性存取“.”、“[]”及函数调用“()”这 3 个运算符 相较于其他运算符优先级最高

13. 以下关于 JavaScript 函数的断言，正确的有 BCD

• 在参数传递时，任何类型的值都可以被传递给参数，JavaScript 不会对参数 值进行类型检查

• 在函数传递中，实际参数（arguments）的格式和形式参数（parameters） 的个数不匹配不会导致运行时错误

• 通过 object.hasOwnProperty(variable)可以确定这个属性名是该对象的成员 还是从其原型链里找到的

• 在 JavaScript 的 for-in 循环中，枚举对象的属性包括对象实例属性，包括从原型链中继承而来的属性

14. 以下关于 Web 应用性能优化的断言，正确的有

• A. 下载单个 100KB 的文件将比下载 4 个 25KB 的文件慢，因为并发请求会比逐 个请求快

  • 主要是网络原因

  • 并发也是有可能，如果他的服务器是多个的，单个下载只能跑到一个服务器去下载100k, 4个的话就可能跑到四个服务器下载25k

• B. 当页面存在大量元素时，不要将事件绑定在单独的元素中，而应该使用事件 委托或事件代理技术，如使用事件冒泡（Bubble）原理将事件都绑定在最外层 元素中

• C. 使用 JavaScript 实现的动画效果，应该使用绝对定位，让元素脱离 DOM 树， 以减少重排

• D. 一般浏览器使用并行方式下载 CSS 文件，因此动态加载 CSS 文件并没有太 大的网络性能优化的意义

  • CSS会阻塞渲染：在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。

15. JavaScript 的循环机制

• 通常来说，switch 总是比 if-else 快，但并不总是最佳解决方案，在判断条件 比较多时，使用查找表比 if-else 和 switch 更快

• 避免使用 for-in 循环。错误：[不要使用 for-in 遍历数组对象]-->除非你需要遍历一个属性数量未知的对象

• 改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数

• 浏览器的调用栈大小限制了递归算法在 JavaScript 中的应用，栈溢出错误会导致其他代码中断运行

16. 以下关于 webpack 描述正确的有 ABCD

• A. loader 是使 webpack 拥有加载和解析非 js 文件的能力

• B. uglifyJsPlugin 是用于压缩 js 代码的 webpack 插件

• C. 使用 PostCSS 来为 CSS 代码自动添加适应不同浏览器的 CSS 前缀

• D. Babel 是 webpack 的一个插件

17. 打印

  var name = 'World';
  (function() { 
    if(typeof name === 'undefined') { 
      var name = "Jack"; 
      console.info('Goodbye '+ name); 
    } else {
      console.info('Hello ' + name); 
    }
  })(); // Goodbye Jack

  var obj = function() {}, 
  ins = new obj();
  obj.prototype.actor = 'Kin';
  console.log(obj.actor, ins.actor); //第一次输出 undefined 'Kin'
  ins.actor = 'Kin';
  console.log(obj.actor, ins.actor); //第二次输出

• 所谓访问原型上的属性 是__proto__上的属性

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1) 
} // 3 3 3
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1) 
} // 0 1 2