普睿德利 - 前端面试

面试时间:2023-03-15

公司全称:北京普睿德利科技有限公司(广州分公司)

公司位置:广州市越秀区越华路

面试题

谈谈对 DOM 的理解
查看答案

DOM 是文档对象模型。它以面向对象的方式描述对象模型,整个文档就是由一个个这样的对象以树形的结构组织在一起构建的。


说说常用 HTML 标签
查看答案

一般: h1~h6、div、span、p、a、img、video、table、ul、li。

语义化:header、nav、aside、main、article、section、footer。


table 标签下有哪些子标签
查看答案

th、tr、td、caption、thead、tbody、tfoot


谈谈对盒子模型的理解
查看答案

所有 HTML 元素都可以看作一个盒子,它的组成包括:content、padding、border、margin。


select 标签如何设置默认选中项
查看答案

方法一:通过 option 标签的 selected 属性设置

<select>
  <option value="1">第一</option>
  <option value="2" selected="selected">第二</option>
  <option value="3">第三</option>
</select>

方法二:通过 js 获取 option 元素设置 selected 属性值

<script type="text/javascript">
  window.onload = function () {
    document.querySelector('select')[1].selected = true
  }
</script>
</head>
<body>
<select>
  <option value="1">第一</option>
  <option value="2">第二</option>
  <option value="3">第三</option>
</select>
</body>

两个 html 页面如何共享全局变量
查看答案

方式一:使用会话存储或本地存储: 使用 window.sessionStorage.setItem() 存储变量,使用 window.sessionStorage.getItem() 获取变量; 也可以使用 window.localStorage 的 setItem() 和 getItem() 存取变量

方式二:使用路径传参: A页面跳转B页面时传递参数,如下

function goBPage() {
  window.location.href = 'b.html' + `?globalVar=${window.globalVar}`
}

B页面接收参数,如下

function getGlobalVar() {
  const globalVar = new URLSearchParams(window.location.search).get('globalVar')
}

JS 遍历的方式
查看答案

数组方法:forEach、map、filter、find、findIndex、some、every、reduce

其它方法:for、for...in、for...of


JS 如何创建一个类
查看答案

使用 class 关键字来创建一个类,类中可以定义成员变量、成员方法、构造函数。例子:

class ClassName {
  constructor() {
  }
}

JS 如何使用工厂函数创建对象
查看答案
  1. 定义一个工厂函数,定义形参,函数内部通过 new Object() 创建对象,并给对象赋值,最后返回创建的对象。例子如下:
function createPerson(name, age) {
  const obj = new Object()
  obj.name = name
  obj.age = age
  obj.intro = function() {
    console.log(`我叫${this.name},今年${this.age}岁。`)
  }
  return obj
}

const p1 = createPerson('Tom', 18)
p1.intro()

const p2 = createPerson('Andy', 19)
p2.intro()

前端性能优化的方案有哪些
查看答案

减少请求。比如使用精灵图、合并 css 和 js、资源缓存处理。

图片优化。比如图片压缩、图片懒加载。

CDN 加速。

代码压缩。比如 Gzip 压缩处理。


Contributors: tanqin