# 第一集

# css3特性中的transform：translateZ(0)有什么作用

GPU加速，优化前端性能，堆叠上下文
关联文章
延伸文章-1
延伸文章-2

# 列举三种禁止浏览器缓存的头字段，并写出响应的设置值

Expires：告诉浏览器把回送的资源缓存多长时间 -1或0则是不缓存 简要：添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能，能在后续的页面中有效避免很多不必要的Http请求，WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。
例如：Expires:Thu，15 Apr 2010 20：00：00 GMT; 他告诉浏览器缓存有效性持续到2010年4月15日为止，在这个时间之内相同的请求使用缓存，这个时间之外使用http请求。 Cache-Control:no-cache Cathe-Control:max-age=315360000 Expires有一个非常大的缺陷，它使用一个固定的时间，要求服务器与客户端的时钟保持严格的同步，并且这一天到来后，服务器还得重新设定新的时间。 HTTP1.1引入了Cathe-Control，它使用max-age指定组件被缓存多久，从请求开始在max-age时间内浏览器使用缓存，之外的使用请求，这样就可以消除Expires的限制， 如果对浏览器兼容性要求很高的话，可以两个都使用。
Pragma:no-cache

# 精确获取页面元素位置的方式有哪些

getBoundingClientRect()方法。它获取某个元素相对于视窗的位置集合，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

可以参考的文章

# 正则从2018-10-07T11:48:47 Asia/zh-cn 提取出来结果[2018,10,07,11,48,47]

"2018-10-07T11:48:47 Asia/zh-cn".match( /\d{1,}/g )

# 如何判断object是数组类型？

• 从原型入手，Array.prototype.isPrototypeOf(obj)
• Array.isArray()方法
• obj instanceof Array返回true或者false
• Object.prototype.toString.call(obj) === '[object Array]'

# 已知数据结构users，请实现语法支持user.unique能够按照name字段去重，并输出结构为：["a","b"]

var users=[{
   id:1,name:"a"
},{
   id:2,name:"a"
},{
   id:3,name:"b"
},{
   id:4,name:"v"
}]

这是一个将类数组结构去重的问题

Array.prototype.unique = function () {
    var res;
    this.map(item => {
        this[item.id - 1] = item.name
    })
    // ES6里新添加了两个很好用的东西，set和Array.from
    // set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。
    res=new Set(this);
    console.log("new Set对象",res)
    // 但是这里大家可以看到，set返回的是一个对象，但是我们想要的是数组啊。
    // 这回，就该轮到Array.from出场了，它的作用，就是可以把类数组对象、可迭代对象转化为数组。
    res=Array.from(new Set(this));
    return  res//es6 数组去重
}
console.log(users.unique());

# 已知如下对象，请基于es6的proxy方法设计一个属性拦截读取操作的例子，要求实现去访问目标对象example中不存在的属性时，抛出错误：Property "$(property)" does not exist

const man={
    name:'jscoder',
    age:22
}
 //补全代码
const proxy = new Proxy(...)
proxy.name //"jscoder"
proxy.age //22
proxy.location //Property "$(property)" does not exist

考点 es6 javascript的Proxy 实例的方法 ,get() get方法用于拦截某个属性的读取操作。

var man = {
	name:'jscoder',
    age:22
};
var proxy = new Proxy(man, {
	get: function(target, property) {
		if(property in target) {
			return target[property];
		} else {
			throw new ReferenceError(`Property ${property} does not exist.`);
		}
	}
});
console.log(proxy.name)
console.log(proxy.age)
console.log(proxy.location)

# 给出如下虚拟dom的数据结构，如何实现简单的虚拟dom，渲染到目标dom树

//样例数据
let demoNode = ({
    tagName: 'ul',
    props: {'class': 'list'},
    children: [
        ({tagName: 'li', children: ['douyin']}),
        ({tagName: 'li', children: ['toutiao']})
    ]
});

构建一个render函数，将demoNode对象渲染为以下dom

<ul class="list">
    <li>douyin</li>
    <li>toutiao</li>
</ul>

看到虚拟DOM，是不是感觉很玄乎，但是剥开它华丽的外衣，也就那样:

1. 通过JavaScript来构建虚拟的DOM树结构，并将其呈现到页面中；
2. 当数据改变，引起DOM树结构发生改变，从而生成一颗新的虚拟DOM树，将其与之前的DOM对比，将变化部分应用到真实的DOM树中，即页面中。

构建虚拟DOM
虚拟DOM，其实就是用JavaScript对象来构建DOM树
其中有两种遍历构建的方法：

1. 深度优先遍历（DFS）
2. 广度优先遍历（BFS） 考虑到在DFS中子节点更容易进行插入操作，我们使用DFS。（递归实现）