2022/7/4前端开发面经

第一轮笔试

一、选择题

1.下述有关css 属性position的属性值的描述，说法错误的是?

A. static:没有定位，元素出现在正常的流中

B. fixed:生成绝对定位的元素，相对于父定位元素进行

C. relative:生成相对定位的元素，相对于元素本身正常位置进行定位。

D. absolute:生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位。

2.下面有关浏览器中使用js跨域获取数据的描述，说法错误的是?

A.域名、端口相同，协议不同，属于相同的域

B. js可以使用jsonp进行跨域

C.通过修改document.domain来跨子域

D.使用window.name来进行跨域

3.下面有关JavaScript中call和apply的描述，错误的是?

A.call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

B.两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

C. apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

D.call传入的则是直接的参数列表。call方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

二、简答题:

1.display: none;与visibility: hidden;的区别

2.下面代码的输出是什么?

for (var i = 0; i< 3; i++) {

setTimeout(() =console.log(i),1);}

3.请给出这段代码的运行结果

var bb = 1;

function aa(bb) {

bb = 2;

alert(bb);}

aa(bb);

alert(bb);

4.请写出下面代码运行之后的结果

function func1(){

var n=99

nAdd = function(){

this.n+=1

console.log(this.n)}

function func2(){console.log(n)}

return func2}

var result = func1()result()

nAdd()result()

5.请描述一下cookies, sessionStorage和 localStorage 的区别?

6.请写出数组的冒泡排序方法

7.new操作符具体干了什么呢?

8.实现一个函数计算求和，支持这两个情况: sum(2,3)和sum(2)(3)

9..实现一个函数将字符串转驼峰，例如border-bottom-color ---> borderBottomColor

10..编写一个javscript函数fn，该函数有一个参数n(数字类型)，其返回值是一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是【2,32】。提示:可以使用getRand()函数

11.编写一个函数实现继承的例子

12.数据表

--1.学生表

Student(Sld,Sname,Sage,Ssex)

--Sld 学生编号,Sname学生姓名,Sage出生年月,Ssex 学生性别

--2课程表

Course(Cld,Cname,Tld)

--Cld 课程编号,Cname 课程名称, Tld教师编号

--3.教师表

Teacher( Tld, Tname)

--Tld教师编号, Tname教师姓名

--4.成绩表

sc(Sld,Cld,score)

--Sld学生编号,Cld课程编号,score分数

学生表Student

create table Student(Sld varchar(10),Sname varchar(10),Sage datetime,Ssex varchar(10));insert into Student values(01'，'赵雷', "1990-01-01','男');

insert into Student values('02',钱电', "1990-12-21'，"男);

insert into Student values(03’，"孙风', "1990-12-20'，'男');

insert into Student values('04','李云',"1990-12-06’,'男");

insert into Student values('05",'周梅’,"1991-12-01','女');

insert into Student values('06",'吴兰', "1992-01-01','女');

insert into Student values('O7”，'郑竹’,"1989-01-01','女');

insert into Student values(09', "张三',2017-12-20'，'女);

insert into Student values('10”,'李四',"2017-12-25'，"女');

insert into Student values('11','李四”，'2012-06-06",'女);

insert into Student values('12','赵六', '2013-06-13','女');

insert into Student values('13',孙七'，"2014-06-01','女');

科目表Course

create table Course(Cld varchar(10),Cname nvarchar(10), Tld varchar(10));insert into Course values(01'，'语文',"02');

insert into Course values(02'，"数学",'01');insert into Course values(03'，"英语”,"03');教师表Teacher

create table Teacher( Tld varchar(10),Tname varchar(10));

insert into Teacher values('01", "张三');

insert into Teacher values('02”, "李四');

insert into Teacher values(03','王五');

成绩表sc

create table sC(Sld varchar(10),Cld varchar(10),score decimal(18,1));

insert into sC values('01 ,'01" , 80);

insert into sc values('01', '02 , 90);

insert into sc values('01' , '03' , 99);

insert into sC values(02 ,'01",70);

insert into sC values('02,"02', 60);

insert into sc values(02" , '03' , 80);

insert into sC values('03', '01' ,80);

insert into sC values('03' , 'o2' , 80);

insert into sC values('03' , '03' , 80);

insert into sC values('o4' , '01' , 50);

insert into sC values(04' , '02' , 30);

insert into sC values('04’ , '03',20);

insert into sC values('05', '01 ,76);

insert into sC values('05', '02 ,87);

insert into sC values('06' , '01' ,31);

insert into sC values('06' , '03' , 34);

insert into sC values('o7' , '02' , 89);

insert into sC values('O7' , '03', 98);

1.查询同时存在"01"课程和"02"课程的情况

2.按平均成绩从高到低显示所有学生的所有课程的成绩以及平均成绩

3.查询同名学生名单，并统计同名人数，找到同名的名字并统计个数

第二轮现场笔试

一、选择题

1、新口打开网页，用到以下哪个值(B)

 A.self  B._blank  C._top   D. _parent

2、元素的alt和title有什么异同，选出正确的说法?(B)

A、不同的浏览器，表现一样

B、alt和title同时设置的时候，alt 作为图片的替代文字出现，title 是图片的解释文字

C、alt和title同时设置的时候，title 作为图片的替代文字出现，alt 是图片的解释文字

D、以上说法都不正确

3, [“1”, “7”,“15"].map(parselnt)执行结果(D)

A: ["1", "7”,“15”];  B:[1,7,15]    C:[0,7,15]    D:[1,NaN,NaN]

4、多选题input元素的type属性的取值可以是(Bcd)

A、image        B、checkbox     C、button    D、select

5、多选题css中可继承的属性有哪些(BE)

A.height        B.font-size       C.border       D、width       E、color

6、vue-router有哪几种导航钩子，以下哪种选项不是vue-router的导航钩子?(C)

A.全局导航钩子 B组件内的钩子   C页面钩子     D单独路由独享组件

二、问答

1.擅长技术栈，还原设计稿比例。用一句话评价自己(性格特质/优势/劣势)

2.JavaScript 有几种类型?

①.简单数据类型:Nomber.String.Boolear.Bigint.Symbol.Null.urdefined

②.复杂数据类型:Object(包含数组，函数等)

3. 什么是深浅拷贝，用js实现一个深拷贝?

浅拷贝:只拷贝一层，把地址给新对象

深拷贝:拷贝多层，完全拷贝对象，即使嵌套了对象也不影响

用js实现深拷贝①封装函数;②判断属性值的数据类型;获取属性值;分别判断是否为数组、对象，进行拷贝，若嵌套，则利用递归实现多层拷贝。

4.说出几种vue当中的指令和它的用法?

V-on:绑定监听事件

V-Show:根据条件真假来决定显示与否

V-model:数据双向绑定，一般用于input、textera等

V-bind:绑定属性.

 V-for:循环

v-if/v-else:判断

5.请说下封装vue组件的过程

①使用vue-cli脚手架搭建项目;

②将组件都放在同一目录下;

③import…form…引入所需组件或资源

④注册组件，在components中写明组件

6.数组去重然后排序var arr=['1','2','1','12','12','78','12','32'];

排序:arr.sort (function (a,b){

Return a-b

});

去重：for (var i=0;i<arr.lenqth;i++){

for(var j=i+1;j<arr.lenqth;i++){

If(arr[i]==arr[j]){

Arr.splice(j,1)

j--;

}}

第三轮现场面试

1. 自我介绍
2. Vue2跟vue3的区别？
3. 组件间怎么传值？祖孙组件怎么传值？
4. 怎么实现垂直居中？
5. 项目中有使用的3d地图吗？
6. 有做过响应式布局的项目吗？
7. 讲一下用JS实现深拷贝的方法。还有其他实现的方式吗？
8. ...忘记了

第四轮人事面

1. 通勤问题。如果入职的话考虑公司附近租房吗？
2. 加班问题。接受加班吗？
3. 出差问题，接受出差吗？

网上查找面经准备

1. html5新增了哪些新特性

1.1语义化标签

使得页面的内容结构化，见名知义

1.2 音频audio标签

<audio>

            <audio src="someaudio.wav">

            您的浏览器不支持 audio 标签。

</audio>

1.3 视频video标签

<video>

    <video src="/i/movie.ogg" controls="controls">

    your browser does not support the video tag

</video>

1.4 canvas、svg

canvas是一个可以通过脚本语言（主要指JavaScript）来绘制图形的HTML元素，

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序。例如地图
能够以 .png或 .jpg 格式化保存结果图像	复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

1.5 webStorage

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。

Web Storage的两个主要目标是：

1. 提供一种在cookie之外存储会话数据的途径。
2. 提供一种存储大量可以跨会话存在的数据的机制。

• localStorage

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

•  sessionStorage

用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

1.6 增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型：描述

• color主要用于选取颜色
• date 从一个日期选择器选择一个日期
• datetime 选择一个日期（UTC 时间）
• datetime-local 选择一个日期和时间 (无时区)
• email 包含 e-mail 地址的输入域
• month 选择一个月份
• number 数值的输入域
• range 一定范围内数字值的输入域
• search 用于搜索域
• tel 定义输入电话号码字段
• time 选择一个时间
• url URL 地址的输入域
• week 选择周和年
• HTML5 也新增以下表单元素

表单元素 描述

元素规定输入域的选项列表使用 元素的 list 属性与 元素的 id 绑定

提供一种验证用户的可靠方法标签规定用于表单的密钥对生成器字段。

用于不同类型的输出比如计算或脚本输出

1.7 HTML5 新增的表单属性

• placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
• required 属性，是一个 boolean 属性。要求填写的输入域不能为空
• pattern 属性，描述了一个正则表达式用于验证 元素的值。
• min 和 max 属性，设置元素最小值与最大值。
• step 属性，为输入域规定合法的数字间隔。
• height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
• autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
• multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。

1. src和href的区别

• 相同：src 和 href 都是用来引入外部资源的属性，例如：图片、视频、CSS 文件、JavaScript 文件等。
• 区别：src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。
• href属性通过指定Web资源的位置，来定义当前元素或者当前文档与目标资源之间的链接或关系；
• src属性会将资源嵌入到当前文档中元素所在位置。浏览器解析到这句代码时，页面的加载和解析都会暂停，直到浏览器拿到并执行完这个JavaScript文件，这就相当于将JavaScript文件中的内容全部嵌入到script标签中。在HTML5出现之后，我们可以通过给script标签添加async或defer属性来使JavaScript脚本异步加载。

1. 盒子模型

Css盒模型分为：标准盒模型、怪异盒模型

（1）标准盒模型（W3C盒子模型）

标准盒模型：盒子总宽/高 = width/height  +padding + border + margin

（即width/height只是内容高度，不包含padding和border）

（2）怪异盒模型（IE盒子模型）

怪异盒模型：盒子总宽/高 = width/height + margin

（即width/height包含了 padding 和 border 值）

1. Vur-router 路由模式有几种 区别是什么

vue-router实现原理

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

1、Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。

2、History模式：

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

//main.js文件中

const router = new VueRouter({

    mode:'history',

    routes:[...]

})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面

3、使用路由模块来实现页面跳转的方式、

方式1：直接修改地址栏

方式2：this.$router.push(‘路由地址’)

方式3： <router-link to="路由地址"></router-link>

1. mvvm和mvc的区别

（1）MVC：MVC框架即Model View Controller，是模型Model-视图View-控制器Controller的缩写。

• Model：模型，是应用程序中用于处理数据逻辑的部分，通常模型对象负责在数据库中存取数据。
• View：视图，用户界面显示，通常视图是根据模型数据创建的。
• controller：控制器，数据模型和视图之间通信的桥梁。控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
• MVC思想：Controller负责将Model的数据用View显示出来。
• MVC优点：
  1. 耦合度低（运用MVC的应用程序的三个部件是相互独立的，改变其中一个不会影响其他两个）；
  2. 重用性高（多个视图可以使用同一个模型）
  3. 生命周期成本低
  4. 部署快（业务分工明确）
  5. 可维护性高
• 缺点：
  1. 不适合小型项目开发
  2. 视图与控制器联系过于紧密，妨碍了它们的独立重用

（2）MVVM：由Model，View，ViewModel三部分构成。

• M(Model)：数据模型（Vue的data）
• V(View)：视图，即UI，用来展示数据（Vue的el）
• ViewModel：是一个对象，用来同步视图View和模型Model
• 双向绑定：View和Model之间没有直接联系，通过ViewModel进行交互（即双向数据绑定），View的变化可以引起Model的变化，Model的变化也可以引起View变化（类似于浅拷贝）。
• 通过双向数据绑定，View 和 Model 之间的同步工作完全是自动的，因此开发过程中不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
• 可以实现双向绑定的标签：Input，textarea，select标签等（可以输入或改变标签内容的标签）
• MVVM优点：
  1. 低耦合
  2. 可重用性
  3. 双向数据绑定，它实现了View和Model的自动同步
  4. Vue就是使用的MVVM框架。
• 区别：MVVM和MVC都是一种设计思想。MVVM与MVC最大的区别就是：它实现了View和Model的自动同步（当Model属性改变时，不用手动操作Dom元素去改变View的显示。而是改变属性后，该属性对应View的显示会自动改变）。

1. 节流和防抖的区别

1. 防抖：n秒后执行函数，如果n秒内重复触发，则重新计时。

• 应用场景：登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
• 文本编辑器实时保存，当无任何更改操作n秒后进行保存

2 . 节流：n秒内只运行一次，若在n秒内重复触发，只有一次生效。

• 应用场景：scroll 事件，每隔一秒计算一次位置信息等；浏览器播放事件，每个一秒计算一次进度信息等；input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

1. Vue2跟vue3的区别

1. vue2和vue3双向数据绑定原理发生了改变

• vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。
• 相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。

3. Composition API

Vue2 与vue3 最大的区别是vue2使用选项类型api，对比vue3合成型api。旧得选项型api在代码里分割了不同得属性：data,computed,methods等；新得合成型api能让我们使用方法来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

1. 建立数据data

vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触发。使用一下三个步骤来简=建立反应性数据： 1. 从vue引入reactive；使用reactive() 方法来声明数据为响应性数据；3. 使用setup()方法来返回我们得响应性数据，从而template可以获取这些响应性数据。

1. 生命周期

vue2     ---------------------------- vue3

beforeCreate                         ->   setup()

Created                              ->   setup()

beforeMount                          ->   onBeforeMount

mounted                              ->    onMounted

beforeUpdate                         ->    onBeforeUpdate

updated                              ->    onUpdated

beforeDestroyed                      ->    onBeforeUnmount

destroyed                            ->     onUnmounted

activated                            ->     onActivated

deactivated                          ->     onDeactivated

6. 父子传参不同，setup()函数特性

setup()函数接收两个参数：props、context(包含attrs、slots、emit)

setup函数是处于生命周期beforeCreated和created俩个钩子函数之前

执行setup时，组件实例尚未被创建（在setup()内部，this不会是该活跃实例得引用，即不指向vue实例，Vue为了避免我们错误得使用，直接将setup函数中得this修改成了undefined）

与模板一起使用时，需要返回一个对象

因为setup函数中，props是响应式得，当传入新的prop时，它将会被更新，所以不能使用es6解构，因为它会消除prop得响应性，如需解构prop，可以通过使用setup函数中得toRefs来完成此操作。

父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象；在vue3中得setup()中得第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

在setup()内使用响应式数据时，需要通过 .value 获取

import { ref } from 'vue'

const count = ref(0)

console.log(count.value)

从setup() 中返回得对象上得property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加.value。

setup函数只能是同步的不能是异步的。

1. 回流和重绘

（1）什么是回流

当render tree中的因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(Reflow)。而每个页面至少会进行一次回流，在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建Render Tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。具体引起回流的点如下：

• 添加或者删除可见的DOM元素；
• 元素位置改变；
• 元素尺寸改变——边距、填充、边框、宽度和高度
• 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
• 页面渲染初始化；
• 浏览器窗口尺寸改变——resize事件发生时，因为回流是根据视口的大小来计算元素的位置和大小的；

（2）什么是重绘

完成回流后，浏览器会重新绘制受影响的部分到屏幕中，当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

（3）重绘与回流的区别

回流必将引起重绘，而重绘不一定会引起回流，这个是一个关键点，只有颜色改变的时候就只会发生重绘而不会引起回流，回流往往伴随着布局的变化，代价较大，重绘只是样式的变化，结构不会变化

1. 原型链

当访问一个对象的属性时， 会在这个对象的属性上去找，如果没有找到就会去这个对象的--proto-- 对象原型上去找，即构造函数prototype 原型对象上找，如果没有会一直在--proto-- 对象原型上找，直到最顶层，不到即为undefined 。这样一层一层地向上，就彷佛一条链子串起来，所以就叫原型链。

1. Map foreach的区别

（1）相同点：

• 都是循环遍历数组（对数组每一项进行遍历）
• 每次执行函数都包含三个参数，分别为value（当前项），index（索引值），arr（原数组）

（2）不同点

• map()会分配内存空间存储新数组并返回（一定程度上费内存），forEach()不会返回新数据，返回undefined。

• forEach()可更改原数组。map()可返回新数组。

11.有没有对elementui组件进行过二次封装

12.深拷贝 浅拷贝区别

（1）浅拷贝:只是拷贝一层, 更深层次对象级别的只拷贝引用。（浅拷贝是把地址给新对象）无论在新旧数组进行了修改，两者都会发生变化，我们把这种复制引用的拷贝方法称为浅拷贝。

ES6 新增可浅拷贝方法：Object.assign(target,…sources)

（2）深拷贝:拷贝多层, 每一级别的数据都会拷贝。完全的拷贝一个对象，即使嵌套了对象，两者也互相分离，修改一个对象的属性，不会影响另一个。

1. javascript继承的方法有哪些

一、原型继承

实现方式：把父类的实例作为子类的原型

缺点：子类的实例中共享了父类原型上的引用属性二、构造函数继承

实现方式：调用父类的构造函数，改变this的指向，指向子类

缺点：只能继承父类的属性，不能继承父类的方法

三、组合继承

实现方式：构造函数继承 + 原型继承

缺点：调用父类的构造函数两次，造成消耗

四、寄生组合式继承

实现方式： 构造函数继承 + 原型继承,原型继承的方式调整，不继承父类的属性

五、ES6 extends继承

1. 说说你对语义化的理解

1. 语义化的背景：

以前的HTML的结构，基本上就是DIV+CSS。然而，DIV它并没有什么任何的意义，全靠CSS显示页面的样式。那么近几年呢，开发者提出了HTML结构的语义化，所以W3C就制定出了语义化标签。

2. 什么是语义化

语义化就是构成HTML结构的标签要有意义。

比如有这样的标签：

1. header表示页面头部
2. main表示页面主题
3. footer表示页面底部

 那么这些标签构成的HTML结构就是有意义的，也是语义化的。

​ 如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。

3. 怎么知道页面结构是否语义化了呢？

​ 去掉CSS，看HTML代码的结构，是否清晰，再看页面内容呈现，是否可以正常显示

4. 为什么要语义化

• 对于编写代码的人来说，有语义化标签的HTM的结构，更加清晰，方便编写代码；
• 对于团队来说，方便团队的开发与维护；
• 对于爬虫，有利于SEO；
• 对于浏览器，更加方便解析，
• 对于用户，假如因为网速的原因导致没有加载CSS，页面也能呈现出良好的结构；某些标签属性如alt，title能带来良好的用户体验，还有用好label标签更利于用户交互；在特殊终端如视障阅读器中语义化的 HTML 可以呈现良好的结构。

5. 怎么做才能写出语义化的HTML呢？

​ 少使用/不使用 div 和 span 标签；

​ 用 p 标签代替 div 标签；

​ 不使用样式标签，如： b 标签、font 标签；

强调文本放在 strong 或者 em 标签中，不要用 b 和 i 标签；

使用表格 table 时，标题要用 caption，表头要用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围；表头用 th，单元格用 td。表单域用 filedset 包裹，用 lengend 标签说明表单的用途。

input 标签通过 id 属性或 for 属性与 label 标签关联。

html 语义化，css 类名也要语义化。

1. 请讲一下对HTML5离线存储的理解

1. 对vue响应式的理解

双向绑定包括两个方面：1.视图变化更新数据；2.数据变化更新视图。

（1）视图变化更新数据

对于视图变化更新数据，可以使用事件监听，比如input标签监听‘input’事件就可以实现。

（2）数据变化更新视图

• 在Vue2中是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter；在数据变动时发布消息给订阅者，触发相应的监听回调。

设置一个set函数，当数据发生改变就会触发这个函数，所以我们只需要将一些需要更新的方法放在这个set函数里面就可以实现数据变化更新视图了。

• 在vue3中双向数据绑定使用的是代理。与Vue2相比的好处在于不消耗性能，因为Vue2使用Object.defineProperty()方法嵌套深层的话需要使用递归比较耗性能，而Vue3使用代理则不用。

17.问项目细节

18.你比较擅长的技术有哪些？你觉得你还原设计稿能力怎么样？

19.解释一下TCP三次握手、为什么建立连接需要二次握手?

建立连接的过程是利用客户服务器模式，假设主机A为客户端，主机B为服务器端。

（1）TCP的三次握手过程：主机A向B发送连接请求；主机B对收到的主机A的报文段进行确认；主机A再次对主机B的确认进行确认。

（2）采用三次握手是为了防止失效的连接请求报文段突然又传送到主机B，因而产生错误。失效的连接请求报文段是指：主机A发出的连接请求没有收到主机B的确认，于是经过一段时间后，主机A又重新向主机B发送连接请求，且建立成功，顺序完成数据传输。考虑这样一种特殊情况，主机A第一次发送的连接请求并没有丢失，而是因为网络节点导致延迟达到主机B，主机B以为是主机A又发起的新连接，于是主机B同意连接，并向主机A发回确认，但是此时主机A根本不会理会，主机B就一直在等待主机A发送数据，导致主机B的资源浪费。

（3）采用两次握手不行，原因就是上面说的失效的连接请求的特殊情况。

20.0*undefined和0*null分别输出什么？原理是什么？

NULL、0

null 是空或者不存在的值

undefined 通常是一个变量已经被声明，但是没有赋值

21.填空题：姓名：             身份证号：                          年龄：        性别：        

请把填空题中的  转成input输出框。（注意每个位置的  数量长短不定）

22.计算出let A="The highest frequency"中哪个字母出现频率最多。

 let s="hasdfhdsfjhdjfaleeee";

    let ss=s.split('');

    console.log(ss);      //输出分割后的数组

    let f={};

    for(let i=0;i<ss.length;i++){

        if(f[ss[i]]==undefined){

            f[ss[i]]=1;

        }else {

            f[ss[i]]++;

        }

    }

    let max=0;

    const v=function () {

        for( e in f ){

            if(f[e]>max){

                max=f[e];

                req=e;

            }

        }

        return req

    }();

    console.log(f);   //输出map

    console.log(v)    //输出出现频率最高的