字节跳动 training camp题目_transform: translatez(0);

作者：算法设计者 | 2024-02-05 09:48:23

踩

transform: translatez(0);

1.判断obect是否为数组：之前的博客有写
判断object对象是否是数组
2.用纯css实现三角形：
要点：让元素的内容去为0，使三角形的两条边无线的接近
哪个边的方向想实现三角形就设置成真实的颜色，其他的设置为透明色，不要设置为白色，因为白色在有背景颜色时会显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #box{
            width: 0;
            height: 0;
            border:100px solid;
            border-top-color:red;
            border-bottom-color:transparent;
            border-left-color:transparent;
            border-right-color:transparent;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3.transform:translateZ(0)的作用：强制硬件加速的一项技术
自己也不知道，经过查资料后的理解：
浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能.
现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。
CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。

现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}
1
2
3
4
5

可是在一些情况下，我们并不需要对元素应用3D变换的效果，那怎么办呢？这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。

虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速。

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}
1
2
3
4
5
6
7
8

原生的移动端应用(Native mobile applications)总是可以很好的运用GPU，这是为什么它比网页应用(Web apps)表现更好的原因。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用，但是使用GPU有可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命，所以要小心使用这些方法。
参考文献
4.什么是同源策略，为什么会有这样的策略，本地开发时如何解决接口跨域的问题？
还没学到这个层次，后面再恶补，先贡上链接。
参考文献1
参考文献2
参考文献3
5.问打印的输出顺序？

async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2(){
  console.log('async2')
}
console.log('script start')
setTimeout(function(){
  console.log('setTimeout') 
},0)  
async1();
new Promise(function(resolve){
  console.log('promise1')
  resolve();
}).then(function(){
  console.log('promise2')
})
console.log('script end')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

预备知识：

因为我们（粗浅地）知道await之后的语句会等await表达式中的函数执行完得到结果后，才会继续执行。
MDN是这样描述await的：

async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。
阮一峰老师的解释更容易理解：

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。
所以，MDN描述的暂停执行，实际上是让出了线程（跳出async函数体）然后继续执行后面的脚本的。

async表达式的返回值

async function 声明将定义一个返回 AsyncFunction 对象的异步函数。
当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。

所以你现在知道咯，使用 async 定义的函数，当它被调用时，它返回的其实是一个Promise对象。

await表达式的作用和返回值

语法：[return_value] = await expression;
表达式（express）：一个 Promise 对象或者任何要等待的值。

返回值（return_value）：返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

所以，当await操作符后面的表达式是一个Promise的时候，它的返回值，实际上就是Promise的回调函数resolve的参数。

另外Promise是一个立即执行函数，但是他的成功（或失败：reject）的回调函数resolve却是一个异步执行的回调。当执行到resolve()时，这个任务会被放入到回调队列中，等待调用栈有空闲时事件循环再来取走它。

该代码执行的流程：

1.console.log(‘script start’)输出：script start
2.setTimeout异步调用，被放在宏队列中等待最后调用
3执行async1函数，输出async1 start，因为async 表达式定义的函数也是立即执行的。然后执行到 await async2()，发现 async2 也是个 async 定义的函数，所以直接执行了“console.log(‘async2’)”，同时async2返回了一个Promise，划重点：此时返回的Promise会被放入到回调队列中等待，await会让出线程，接下来就会跳出 async1函数继续往下执行。
4.然后执行到 new Promise，前面说过了promise是立即执行的，所以先打印出来“promise1”，然后执行到 resolve 的时候，resolve这个任务就被放到回调队列中等待，然后跳出Promise继续往下执行，输出“script end”。
同步的事件都循环执行完了，调用栈现在已经空出来了，那么事件循环就会去回调队列里面取任务继续放到调用栈里面了。

5.这时候取到的第一个任务，就是前面 async1 放进去的Promise，执行Promise时发现又遇到了他的真命天子resolve函数，**划重点：**这个resolve又会被放入任务队列继续等待，然后再次跳出 async1函数继续下一个任务。

6.接下来取到的下一个任务，就是前面 new Promise 放进去的 resolve回调啦 yohoo～这个resolve被放到调用栈执行，并输出“promise2”，然后继续取下一个任务。

7.此时调用栈再次空出来了，事件循环就取到了下一个任务：历经千辛万苦终于轮到的那个Promise的resolve回调！！！执行它（啥也不会打印的，因为 async2 并没有return东西，所以这个resolve的参数是undefined），此时 await 定义的这个 Promise 已经执行完并且返回了结果，所以可以继续往下执行 async1函数后面的任务了，那就是“console.log(‘async1 end’)”。
参考文献1
参考文献2
6.数组对象根据对象中指定的属性去重？

思想：遍历数组中的每一项，用map哈希结构去判断属性是否重复，在hash结构中，属性当作key，数组对象当作value.

 function unique(arr,key){  
        
        var map=new Map();
        for(var i=0;i<arr.length;i++)
        {
          if(map.has(arr[i][key]))
          {continue;}

          map.set(arr[i][key],arr[i]);
           
        }
        return [...map.values()];
      }    
     
1
2
3
4
5
6
7
8
9
10
11
12
13
14

数组遍历可以使用forEach代替，对数组的每一项运行传入的函数，没有返回之后，本质上和for迭代数组一样。

// function unique(arr,u_key) {
//   let map = new Map()
//   arr.forEach((item,index)=>{
//     if (!map.has(item[u_key])){
//       map.set(item[u_key],item)
//     }
//   })
     
//   return [...map.values()]
// }
1
2
3
4
5
6
7
8
9
10

7.实现一个DOM2JSON函数，可以把一个DOM节点输出JSON的格式？
网上找的正确的答案

function DOM2JSON(str) {
  let reg = /<(.+)>(.*?)<\/\1>/g
  let result = null
  let nodes = []
  while((result = reg.exec(str))!== null) {
    nodes.push({ tag: result[1], children: DOM2JSON(result[2])}) // exec返回的数组，[0]匹配的字符串 然后依次是捕获的分组 然后有index和input属性
  }
  return nodes.length > 1 ? nodes : nodes[0]
}

console.log(JSON.stringify(DOM2JSON('<div><span><a></a></span><span><a></a><a></a></span></div>')))
// {"tag":"div","children":[{"tag":"span","children":{"tag":"a"}},{"tag":"span","children":[{"tag":"a"},{"tag":"a"}]}]}

1
2
3
4
5
6
7
8
9
10
11
12
13

8.实现一个搜索框，边输入边自动搜索，搜索结果通过ajax请求获得，搜索结果实时渲染。
用户频繁的请求对服务器的压力，该如何优化？

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】