结束
一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
使用canvas绘制弹窗
function createNoteCanvas(id){
var title =“居民负荷”;
var data = [
{name: “A相电压”, value: “10040863.2”},
{name: “B相电压”, value: “-8086002”},
];
var canvas = document.createElement(“canvas”);
var ctx=canvas.getContext(‘2d’);
canvas.width=550;
canvas.height=data.length*14+30;
canvas.style.border=“1px solid #ccc”;
ctx.fillStyle=“#0C4657”;
strokeRoundRect(ctx,0,0,canvas.width,canvas.height,4.5);
fillRoundRect(ctx,1,1,canvas.width-2,canvas.height-2,5);
var rectH=6;
var rectW=20;
var titleH=12;
ctx.scale(2,2)
ctx.lineWidth = 1;
ctx.strokeStyle = “#ccc”;
ctx.textAlign = “center”;
ctx.fillStyle = “#FFFFFF”;
ctx.fillText(title,32,titleH);
titleH += 14;
ctx.font=“5pt Arial”;
for(var i= 0;i<data.length;i++){
ctx.fillStyle = “#FFFFFF”;
ctx.textAlign=“right”;
ctx.fillText(data[i].name+“:”,60,rectH*i+titleH);
ctx.fillStyle = data[i].color != undefined?data[i].color:“#FFFFFF”;
ctx.textAlign=“left”;
ctx.fillText(data[i].value,60,rectH*i+titleH);
if((i+1)<data.length){
ctx.fillStyle = “#FFFFFF”;
ctx.textAlign=“right”;
ctx.fillText(data[i+1].name+“:”,200,rectH*i+titleH);
ctx.fillStyle = data[i+1].color != undefined?data[i+1].color:“#FFFFFF”;
ctx.textAlign=“left”;
ctx.fillText(data[i+1].value,200,rectH*i+titleH);
i++
}
}
return canvas;
}
使用THREE.SpriteMaterial让创建的弹窗信息永远正对屏幕
function createNote(id,x, z){
var oldId = “”;
if(spriteNote !=null){
oldId = spriteNote.name.split(“$”)[1];
scene.remove(spriteNote);
spriteNote.name =“设备$none”;
}
if(spriteNote ==null || id != oldId){
var canvas = createNoteCanvas(id);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
spriteNote = new THREE.Sprite( spriteMaterial );
var positionInfo =getNotePositionInfo(x, z);
spriteNote.position.set(positionInfo.x,positionInfo.y,1140);
spriteNote.scale.set(canvas.widthpositionInfo.radio,canvas.heightpositionInfo.radio,1);
spriteNote.name = “设备$” + id;
//图片自适应尺寸
spriteNote.material.map.minFilter = THREE.LinearFilter;
scene.add(spriteNote);
}
}
路径巡检
在工厂、园区中制度巡检路径,结合巡更点、设备和传感器实时数据、视频监控三维仿真巡更。在三维场景中模拟巡更路径第一人称漫游,同时设备数据报警和视频监控达到三维中巡检效果,高效代替人工巡检。
css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
onFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
[外链图片转存中…(img-0As94mle-1715662486552)]