0517面试题扩展

BFC

块级格式化上下文 block formatter context

可以看做是一种属性 拥有BFC后即该元素变为一个隔离的容器,内部元素不会影响外部元素

触发BFC:

1. 根元素(html)

2. 浮动元素

3. 绝对定位元素

4. display 为 inline-block table-XXX flow-root

   ​ flex inline-flex inline-grid

5. overflow 不为 visible 的块级元素

6. contain 为layout content paint 的元素

7. 多列容器(元素的column-count或者column-width不为auto,包括column为1)

Web Worker

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。

用法

主线程

创建一个Worker线程

由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。

var worker = new Worker("work.js");

主线程调用worker.postMessage()方法，向 Worker 发消息。

worker.postMessage('message');

主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息。事件对象的data属性可以获取 Worker 发来的数据。

worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
}

主线程关闭worker对象

worker.terminate();

主线程可以监听 Worker 是否发生错误。如果发生错误，Worker 会触发主线程的error事件。

worker.onerror(function (event) {
  console.log([
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
  ].join(''));
});

Worker线程

子线程向主线程发送信息

self.postMessage("message");

Worker 线程内部需要有一个监听函数，监听message事件。self代表子线程自身,e的data属性包含主线程发来的数据。

self.onmessage = function(e){
    self.postMessage('You said: ' + e.data);
}

子线程关闭worker对象

self.close();

使用限制

Web Worker 有以下几个使用注意点。

1. 同源限制

   分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

2. DOM 限制

   Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

3. 通信联系

   Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

4. 脚本限制

   Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

5. 文件限制

   Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

WebSocket

WebSocket是一种用于在服务器和客户端之间实现高效的双向通信的机制

WebSocket API的用法

创建一个Socket实例

var socket = new WebSocket('ws://localhost:8080'); 

打开Socket

socket.onopen = function(event) { 

发送一个初始化消息

socket.send('I am the client and I\'m listening!'); 

监听消息

socket.onmessage = function(event) { 
	console.log('Client received a message',event); 
}; 

监听Socket的关闭

socket.onclose = function(event) { 
	console.log('Client notified socket has closed',event); 
}; 

关闭Socket…

socket.close() 

localstorage

保存数据

localStorage.setItem(key,value); 

读取数据

localStorage.getItem(key); 

删除单个数据

localStorage.removeItem(key); 

删除所有数据

localStorage.clear(); 

得到某个索引的key

localStorage.key(index); 

sessionStorage

保存数据到本地

// 第一个参数是保存的变量名，第二个是赋给变量的值
sessionStorage.setItem('Author', 'session');

从本地存储获取数据

sessionStorage.getItem('Author');

从本地存储删除某个已保存的数据

sessionStorage.removeItem('Author');

清除所有保存的数据

sessionStorage.clear();

cookie

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的 而cookie是运行在客户端的，所以可以用JS来设置cookie.

JS设置cookie:

document.cookie="name="+username; 

JS读取cookie:

假设cookie中存储的内容为：name=jack&password=123
 
则在B页面中获取变量username的值的JS代码如下：
使用字符串内置函数
var username=document.cookie.split("&")[0].split("=")[1]; 
或者使用正则函数

position 粘性定位

粘性定位 position:sticky 可以说是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

#box{
    positioni :sticky;
    top:0;
}

父元素不能overflow:hidden或者overflow:auto属性。

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

渲染树

render 树就是根据 可视化节点 和 css 样式表 结合诞生出来的树；

1. 浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree
2. 与此同时，进行 CSS 解析，生成 Style Rules
3. 接着将 DOM Tree 与 Style Rules 合成为 Render Tree
4. 元素在页面中布局，然后绘制

同源

如果两个 URL 的 protocol、port (如果有指定的话)和 host都相同

即代码服务器和端口相同

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html	失败	主机不同

图片延迟加载

首先将页面上的图片的 src 属性设为 loading.gif，而图片的真实路径则设置在 data-src 属性中，页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的 src 属性设置为 data-src 的值，这样，就可以实现延迟加载。