20170921 当当和今日头条笔试题

居然忘了开屏幕录制!!!!

要气死啦!!

因为有挺多不错的题目的~

记一下记得的题吧

当当网:

1. 哪些操作属于es6的操作?

A var {foo:{bar}} = {baz:'baz'}

B var x;  {x} = {x:1};

C  var [a,b,c] = [1,2,3]

D var [,,c] = [1,2,3]

2. 下列说法中:

A 下载js脚本会阻塞渲染

B DOM树与render树是完全对应的

C link节点不会阻塞浏览器渲染

D img标签会阻塞渲染

3. 以下会引起BFC的是?

A visibility: hidden

B display: block;

C position: fixed;

D float: left;

解析:

对一个元素设置CSS，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC

Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

　　看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC

浏览器对于BFC这块区域的约束规则如下：

• 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
• 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

　　有道友对它做了分解，我们直接拿来：

1. 内部的Box会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

　　看到以上的几条约束，让我想起学习css时的几条规则

• Block元素会扩展到与父元素同宽，所以block元素会垂直排列
• 垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)
• 浮动元素会尽量接近往左上方（或右上方）
• 为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素
• ......

参考:  我对BFC的理解

4. 下列说法

A a.domain.com和domain.com/b.html之间可以共享cookie

B baidu.com和google.com之间可以共享cookie

C sessionStorage可以在本地长久存储

二 问答题

1. ie中float和margin产生

2. 对html5和css3的理解

3. html语义化的理解(至少三条)

4. 实现两个div的垂直水平居中

5. -webkit-下的border-radius

6. 至少举出5个块级元素和内联元素, 解释css中的盒模型

7. 前端角度,怎么优化SEO?

8. css sprites是什么?有什么优缺点?

9. CSS hack:  实现不同ie版本下的显示不一样

今日头条:

选择题:

1. js如何判断严格一个变量a是不是一个对象obj的实例? 假设它有属性"name"

A  if( a instanceof obj)

B  if( a.constructor === obj)

C  if("name" in a);

D  if(a.name)

解析:

在这里我主要在纠结前两个选项,不知道哪个更严格

2. js文件实现延迟加载的方法

A　　<script type="text/javascript" src="a.js" defer></script>

B　　<script type="text/javascript" src="a.js" async></script>

C　　var scr = document.createElement("script");
　　   scr.src = "a.js";
　　   document.appendChild(scr);

解析:

还有一个选项忘记了.

查了一下相关知识,

我们平时最常使用的就是这种同步加载形式：

<script src="http://yourdomain.com/script.js"></script> 

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

 js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。

以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。

 

简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。

 

async指的是异步加载, 

又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。

 

这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。

async属性是HTML5中新增的异步支持，见后文解释，加上好（不加也不影响）。

此方法被称为 Script DOM Element 法，不要求 js 同源。

 

将js代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍使用。

1. defer 属性

<script src="file.js" defer></script> 

defer属性声明这个脚本中将不会有 document.write 或 dom 修改。

浏览器将会并行下载 file.js 和其它有 defer 属性的script，而不会阻塞页面后续处理。

 

defer属性在IE 4.0中就实现了，超过13年了！Firefox 从 3.5 开始支持defer属性 。

注：所有的defer 脚本保证是按顺序依次执行的。

 

 

2. async 属性

<script src="file.js" async></script> 

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载。

 

所以说:  defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题. 好像只是推迟了执行时间,而不会影响加载时间

 

参考: Javascript 异步加载详解

附加题(3道):

1. 使用js实现对象的深度克隆

我从网上抄的答案:

function cloneObject(obj){ 
    var o = obj.constructor === Array ? [] : {}; 
    for(var i in obj){ 
       if(obj.hasOwnProperty(i)){ 
            o[i] = typeof obj[i] === "object" ? cloneObject(obj[i]) : obj[i]; 
        } 
    } 
    return o; 
}                         

参考:

javascript克隆对象深度介绍

 

2. 实现一个事件绑定函数和解绑函数

// target 是 DOM 元素
// eventName是事件
// handler 是事件处理函数
function on(target, eventName, handler){
    //todo

}

function off(target,eventName, handler){
    //todo
    //要求: 如果handler没有传入,则删除所有通过on方法在对象上绑定的事件

}

大概题目就是以上,我参考js高程写的,不知道对不对

function on(target, eventName, handler){
    
    //发现我这里原来写错了..
    //target.events = target.event || new Array();    //存储通过on方法绑定的事件 错误的
    target[eventName] = target[evetnName] || new Array();
    if(target.addEventListener){
        target.addEventListener(eventName, handler);
    } else {
        target.attachEvent("on"+eventName, handler);
    }
}

function off(target, eventName, handler){
    if(target.removeEventListener){
        if(handler){
            target.removeEventListener(eventName, handler);
            //这里应该也删除数组里的对应函数...也没有写
            for(var i = 0; i<target.events.length; i++){
               if(target[eventName][i] == handler){
                  target[eventName].splice(i,1);
                }
             }
        } else {
            for(var i = 0; i<target.events.length; i++){
                target.removeEventListener(eventName, target[eventName][i]);
            }
            target[eventName] = [];
        }
    } else {
      if(handler){
            target.detachEvent(eventName, handler);
            //这里应该也删除数组里的对应函数...也没有写
            for(var i = 0; i<target.events.length; i++){
               if(target[eventName][i] == handler){
                  target[eventName].splice(i,1);
                }
             }
        } else {
            for(var i = 0; i<target.events.length; i++){
                target.detachEvent(eventName, target[eventName][i]);
            }
            target[eventName] = [];
        }

3. 实现一个导航条