前端复习HTML+CSS+JavaScript（必问面试题）

2023-11-04

前端复习

HTML

常见的几种图片格式以及他们之间的区别是什么？

JPG：支持有损压缩、不支持透明、不支持动画、色彩还原度较好

PNG：不支持压缩、支持透明、半透明、不透明、不支持动画

GIF：支持有损压缩、不支持全透明、支持半透明、支持动画、图片大小很小

BMP：支持有损压缩、不支持透明、不支持动画、windows操作系统特有的图片

webp：支持无损压缩、支持透明、动画支持不完美、图片大小很小

简单叙述css盒子模型？

一个盒子从外到内可以分为四个部分，外边距（margin）、边框（border）、内边距（padding）、内容区（content）

默认情况下，盒子的width和height属性只是设置content的宽和高

盒子真实的宽为：内容宽度+左右填充+左右边距+左右边框

盒子真实的高为：内容高度+上下填充+上下边距+上下边框

简单叙述视频/音频标签的使用？

视频：<video src=""></video>

视频标签属性：

src 需要播放的视频地址

width/height 设置播放视频的宽高

autoplay 是否自动播放

controls 是否显示控制条

poster 没有播放之前显示的占位图片

loop 是否循环播放

muted 静音模式

音频: 音频属性与视频属性差不多，不过宽高与poster属性不能用

<audio><source src="" type=""> </audio>

HTML5新增的属性有哪些？

语义化标签

header、nav、article、section、aside、footer

多媒体标签

video、audio

表单类型

1.email，使用方法：<input type="email">输入邮箱格式
2.tel，使用方法：<input type="tel">输入手机号码格式
3.url，使用方法：<input type="url">输入url格式
4.number，使用方法：<input type="number">输入数字格式
5.search，使用方法：<input type="search">搜索框（体现语义化）
6.range，使用方法：<input type="range">自由拖动滑块
7.time，使用方法：<input type="time">小时分钟
8.date，使用方法：<input type="date">年月日
9.datetime，使用方法：<input type="datetime">时间
10.month，使用方法：<input type="month">月年
11.week，使用方法：<input type="week">星期年

表单属性

placeholder 提示用户输入、autofocus 自动获取焦点、multiple 多文件上传、autocomplete 自动填充、required 必填项、accesskey 快捷键

说说几种浏览器不同的内核？

Trident内核（代表：Internet Explorer） ， Gecko内核（代表：Mozilla Firefox） ， WebKit内核（代表：Safari、Chrome） ， Presto内核（代表：Opera）

页面导入样式时，使用link和@import有什么区别？

来源：link属于XHTML标签，import是CSS提供的方式。link方式除了CSS，还可以定义RSS，定义rel连接属性等，而import只能加载CSS。
顺序：link是页面加载时同时执行的，而import是在页面加载完之后，才会执行的（所以容易导致样式闪烁，即开始页面没有样式，突然会闪烁一下，然后就有了样式，就我个人比较喜欢link引用的方式）
js控制的差别：当页面需要使用javascript控制dom改变样式的时候，只能使用link标签，因为import不是js操作dom可以控制的。也不支持js操作dom来控制。

如何区分 HTML 和 HTML5？

核心是：DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素。

（长这个样子的是HTML ：

<html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

长这个样子的是HTML5：<!DOCTYPE html>

）

此外，还可以根据新增的结构、功能元素来加以区分：

html5新特性，有绘画 canvas 、用于媒介回放的 video 和 audio 元素、本地离线存储 localStorage 长期存储数据、sessionStorage，此外，还新增了以下的几大类元素：

内容元素，article、footer、header、nav、section。

表单控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

tite与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读，而i是展示强调内容
i内容展示为斜体，em表示强调的文本

网页的布局方式有哪些？

静态布局、流动布局、弹性布局、自定义布局、响应式布局、

px、em与rem的区别

px：绝对长度单位，像素的px是相对于显示器的分辨率

em：相对于当前对象内字体大小，通常字体大小默认为16px 即 1em=16px

rem：相对于页面根元素的字体大小

几种定位方式

相对定位、绝对定位、固定定位、粘滞定位

相对定位：相对于自身原本位置进行定位
绝对定位：是相对于最近的已定位（position 属性值为 fixed、absolute、relative 或 sticky）的祖先元素进行定位的。如果没有已定位的祖先元素，则相对于最初的包含块（最初的包含块是根据元素的 position 和 transform 属性来确定的，通常是 viewport 或者最近的 position 值为 relative 或者 fixed 的祖先元素）进行定位。在绝对定位的元素中使用 top、right、bottom、left 属性来确定其位置。
固定定位：相对于窗口进行定位
粘滞定位：当页面发生滚动时，到达设定位置后固定，相对于父级元素

CSS

CSS3新特性有哪些？

边框：

border-radius：边框弧度

border-shadow：边框阴影

border-image：设置边框图像

背景：

background-size：背景图片尺寸

background-origin：规定了background-position属性相对于什么位置进行定位

渐变：

linear-gradient：线性渐变

radial-gradient：径向渐变

文本效果：

word-break：定义如何换行

word-wrap：允许长的内容可以自动换行

text-overflow：指定当文本溢出后的样式

text-shadow：文字阴影

过渡：

transition-property：过渡属性名

Transition-duration 完成过渡效果需要花费的时间

Transition-timing-function 指定切换效果的速度

Transition-delay 指定什么时候开始切换效果

动画：animation

Animation-name 为@keyframes动画名称

animation-duration 动画需要花费的时间

animation-timing-function 动画如何完成一个周期

animation-delay 动画启动前的延迟间隔

animation-iteration-count 动画播放次数

animation-direction 是否轮流反向播放动画

清除浮动的方式有哪些？

clear：both；

清除bfc效应？

添加类 clearfix

.clearfix:before,

.clearfix:after{

content:"",

clear:both,

display:table


}

简单说说几种定位方式？

position：absolute、relative、fixed、sticky

绝对定位：

绝对定位（position: absolute）是相对于最近的已定位（position 属性值为 fixed、absolute、relative 或 sticky）的祖先元素进行定位的。如果没有已定位的祖先元素，则相对于最初的包含块（最初的包含块是根据元素的 position 和 transform 属性来确定的，通常是 viewport 或者最近的 position 值为 relative 或者 fixed 的祖先元素）进行定位。在绝对定位的元素中使用 top、right、bottom、left 属性来确定其位置。

相对定位：

是相对于元素本身的原始位置进行定位

固定定位：

永远参照于浏览器的视口进行定位，固定定位的元素不会随着网页的滚动而进行滚动

粘滞定位：

当元素的position属性设置为sticky时，粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

子元素如何在父元素中水平居中？

1.子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置浮动，否则居中失效

2.子父元素宽度固定，父元素设置text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效

3.父元素设置相对定位，子元素设置绝对定位，子元素left，right设置0，子元素margin:auto

4.父元素display：flex ，justify-content: center

如何让子元素如何在父元素中垂直居中？

1.设置子元素和父元素的行高一样 line-height

2.父元素设置相对定位，子元素设置绝对定位，子元素top，bottom设置0，子元素margin:auto

3.父元素设置display:table-cell，vertical-align: middle

4.弹性盒子，父元素display：flex，子元素align-items：center

如何让子元素如何在父元素中水平垂直居中？

1.父元素设置相对定位，子元素设置绝对定位，子元素的top、left、right、bottom设置为0 ，margin：auto
2.父元素设置 display：flex； justfy-content：center ；align-item：center；

content-box与border-box的区别？

content-box是标准盒子模式，width不包括padding与border，width设置多少，内容区宽度就为多少

border-box是怪异盒子模型，设置的width包括padding和border，改变padding或border会改变内容区的宽度

如何让Chrome浏览器显示的字体小于12px？

添加谷歌私有属性 -webkit-text-size-adjust：none
对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效
-webkit-transform:scale(缩放值)
大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

Css选择器有哪些，那些属性可以继承，优先级如何计算？Css3新增的伪类有哪些？

元素选择器、id选择器、类选择器、通配符选择器、后代选择器、兄弟选择器

查找第几个nth-child（n）

查找同一类型第几个nth-of-type

查找唯一类型 only-of-type

属性选择器：根据标签属性查找 [attr=value]

优先级（权重）：

元素选择器1

伪元素选择器1

class选择器10

伪类选择器10

属性选择器10

Id选择器100

内联样式的权重1000

包含选择器权重为权重之和

继承样式权重为0

哪些属性可以继承：

字母间距、段落间距、行高、字体颜色、字体种类、字体大小、字体样式、字体粗细、大小写字母文本、下划线

网页中有大量图片加载很慢你有什么办法进行优化？

1、图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小鱼后者，优先加载

2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

3.使用csssprite或者svgsprite （雪碧图）

行内元素/块级元素有哪些？

行内元素：不能设置宽高、排列在同一行

span、img、a、input、select、textarea

块级元素：独占一行、可以设置宽高

div、h1-h6、p、table、ul、

Margin和padding在什么场合下使用？

Margin外边距自身边框到另一个边框之间的距离

Padding 内边距自身边距到自身内容之间的距离

当需要在border外侧添加空白时用margin，当需要在border内侧添加空白时用padding

对弹性盒子有什么了解简单说说？

flex-direction：弹性容器中子元素排列方式

flex-wrap：设置弹性盒子的子元素超出父容器

align-item：设置弹性盒子子元素在侧轴上的对齐方式（垂直的位置）

justify-content：设置弹性盒子子元素在主轴上的对齐方式（水平的位置）

align-content：设置行对齐

实现标签的禁用？

设置disabled属性

Flex布局原理

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

说说px 、rem、em的不同？

px 是绝对长度单位，像素的px是相对于显示器的分辨率来说的

em是相对于当前对象内字体大小来说的，通常字体大小默认为16px 即 1em=16px

rem是相对于页面根元素的字体大小

三栏布局方式两边固定中间自适应

 .left,.right{

        width: 300px;

        height: 600px;

      }

      .left{

        background-color: #bfa;

        float: left;

        margin-left:-100%;

      }

      .right{

        background-color: pink;

        float: left;

        margin-left: -300px;



      }

      .main{

        border: 2px blueviolet solid;

        width:100%;

        float: left;

      }

      .center{

        border: 1px red solid;

        height: 600px;

        margin: 0 300px;

      }

      <div class="main">
            <div class="center"></div>
        </div>
          <div class="left"></div>
          <div class="right"></div>

什么是响应式布局？

同一个网站兼容不同的大小的设备，页面能够根据不同设备的大小进行自适应的调节变化。

百分比布局
rem布局
媒体查询 @media screen
flex布局
vw 和vh（vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度）

说一说响应式布局中的媒体查询？

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。

解释页面的回流与重绘

重绘

简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。

回流

当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流

当页面布局和几何属性改变时就需要回流，比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

省略号实现

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;/*文字超出是否换行*/
text-overflow: ellipsis;/* 文字超出宽度则显示ellipsis省略号 */
width: 100%;

css画三角形

使用 border 绘制三角形，三边透明，一边设置颜色即可
使用 linear-gradient 绘制三角形，线性渐变45°，一边设置透明，一边设置颜色即可
transform: rotate 配合 overflow: hidden 绘制三角形

你知道的浏览器兼容问题有哪些？以及对应的解决方法。

图片问题（IE6及其更低的版本）

png24 位的图片在 IE6 浏览器上图片不透明，会出现背景。解决方案是改成 png8 格式，也可以引用一段脚本进行处理。
浏览器默认的margin和padding不同
解决方案是用一个全局的*{margin：0；padding：0；} 来统一它们。
3像素bug问题（IE6及其更低的版本）
当相邻的两个元素，一个是浮动的，另一个非浮动，那么在IE6 下面将会产生3像素bug。
解决方案：让另一个元素也浮动，或者给浮动的元素添加 _margin-right：-3px;（下划线 _ 是IE6及更低版本的hack，只会被IE6识别）。
双边距bug问题（IE6及其更低的版本）
双边距bug是指在块属性标签 float 后又有横行的 margin（margin-left 或者 margin-right）时，在 IE6 中显示的 margin 比设置的大。
解决方案：在样式控制中加入 _display：inline；将其转换为行内属性。因为元素是浮动的，所以这么设置不会影响元素在浏览器的显示。
Firefox浏览器点击链接会出现虚线框
Firefox浏览器在点击链接时，会自动在元素周围添加一个虚线边框。
解决方案：去掉虚线框，可以给a标签设置 outline 属性，例如：

 a{outline:none;}

 a:focus{outline:none;}

移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局

@media screen and (min-width: 400px) and (max-width: 700px) { … }

@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

使用 CSS 预处理器吗？喜欢哪个？

sass、less
用的比较多的是less，再less中，可以实现css代码的嵌套，能够使得各个样式之间的层级关系更加的明了清楚。

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：

JavaScript

说说基本数据类型？

u so nb！

undefined symbol、string、object、null、number、Boolean，其中symbol是ES6新加入的数据类型

一个页面的加载经历了哪些方面？

url解析
进行三次握手
发送http请求，请求数据包
服务器返回资源
断开连接
页面渲染先渲染css再加载js

如何判断一个数据是NAN？

1、先判断是不是number类型，再用isNAN（）进行判断

2、利用NAN不等于自身的特点，进行判断，n!==n

js中null与undefined的区别？

null表示一个值被定义了，且这个值是空值

undefined表示一个变量被声明了，但是没有赋值

闭包是什么？有什么特性？

闭包可以简单理解成定义在一个函数内部的函数，且这个函数调用了外部函数的变量时，就形成了闭包！

特点：

1、函数嵌套函数

2、能够延长变量的生命周期

3、参数和变量不会被垃圾回收机制回收

优点：

1、变量长期存储在内存中te

2、避免全局变量污染

3、私有成员的存在

缺点:

会造成内存泄漏

事件委托是什么？

事件委托又称事件代理，是js中常用的绑定事件的技巧，事件委托就是把原本需要绑定在子元素的响应事件委托给父元素，让其父元素担任事件监听的职务，其原理就是DOM原生的事件冒泡。

简单说说什么是事件传播？

事件的传播机制分为三个阶段，当事件触发时，会在子元素与父元素之间传递。

事件传播机制是指当一个元素触发某个事件时，该事件会在 DOM 树中进行传播的过程。DOM 树中的每个节点都有三个阶段，即事件捕获阶段、目标阶段和事件冒泡阶段。事件传播机制按照从外到内（事件捕获阶段）和从内到外（事件冒泡阶段）的顺序依次执行，直到事件传播到根节点。在这个过程中，如果某个节点绑定了相应的事件处理程序，就会被触发执行。其中，目标阶段是在事件捕获和事件冒泡之后执行的，它是在事件传播到目标元素时触发该元素上的事件处理

捕获阶段—目标阶段—冒泡阶段

捕获：从window对象传导到目标节点（从外到里），这个极端不会影响任何事件

目标：在目标节点上触发

冒泡：从目标阶段传导回window对象（从里到外）

本地储存与cookie的区别?

cookie:存储的内容很小一般只有4k左右，在有效期之内都可用，默认是浏览器关闭后失效

local storage：存储大小为4M左右，多个会话窗口共用，一直存在，手动删除

session storage：存储大小为4M左右，只在当前会话有效，关闭会话/关闭浏览器，数据消失

数组去重

const array = [2, 2, 'a', 'a', true, true, 15, 17]
const newArr = array.filter((item, i, arr) => {
      return arr.indexOf(item) === i
    })
console.log(newArr);//打印 [2, 'a', true, 15, 17]

ES6中有哪些新特性？

const和let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、for…of和for…in

var 存在变量提升，let与const不存在变量提升

let与const会形成块级作用域

let可以先声明后赋值，但赋值后值可修改但不可重复定义

const在声明时必须赋值，且赋值后不可修改不可重复定义

模板字符串可以让处理字符串的时候更加方便，将变量简化成表达式

箭头函数作为匿名函数是不能作为构造函数的，不能使用new

箭头函数this指向具备穿透特性，会捕获其所在上下文中的this值

箭头函数没有原型属性

箭头函数对上下文的绑定时强制的，无法通过call和apply进行改变

call与apply方法功能一样，只是调用传入的参数不一样，都是将一个对象的方法给另一个对象去用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2EsHUK5g-1649917563071)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220406215040645.png)]$

for…in遍历数组时，返回的是数组的下标，遍历对象时，返回的变量属性名

for…of遍历数组时，返回的是数组对应的值，遍历对象时，会报错

数组方法有哪些？

arr.push() 从后面添加元素，返回值为添加完后的数组的长度

arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素

arr.shift() 从前面删除元素，只能删除一个返回值是删除的元素

arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度

arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

arr.concat() 连接两个数组返回值为连接后的新数组

str.split() 将字符串转化为数组

arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的

arr.reverse() 将数组反转,返回值是反转后的数组

arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

arr.forEach(callback) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组

arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。

arr.filter(callback) 过滤数组，返回一个满足要求的数组

简单讲一下原型与原型链？

每个对象都有一个方法，叫做隐式原型（原型），原型就是指向其父类的指针。对象找方法/属性，自身没有，找不到，但是又要调用，就会去原型中寻找，（就是父类中寻找），原型就是指向父类的指针，找到了就调用。

当进行多次原型的寻找，这一链路下来就形成了原型链。

如何监听div的宽高变化？

一、js监听window变化的方法

1、onsize只能监听window对象的变化

(1)、 window对象原生、jQuery方法

//原生写法

window.onsize = function(){undefined

console.log("11");

}

//jquery写法

$(window).resize(function(){undefined

console.log("22");

})

//注意：浏览器窗口大小改变时，这段代码会执行多次，对性能影响大，容易造成浏览器假死。

(2)、实现不管窗口怎么改变，只在停止改变之后才执行代码

var resizeTimer = null;

$(window).resize(function(){undefined

if(resizeTimer){undefined

clearTimeout(resizeTimer);

}

resizeTimer = setTimeout(function(){undefined

console.log("窗口改变")

},100)

})

//通过使用定时器的方式来让代码延迟执行，每次窗口改变的时候就清除事件，只有停下改变之后才会继续再执行，解决resize执行多次的问题。

二、js监听div容器变化的方法

1、MutationObserver

(1)、介绍： MutationObserver 可以用来监听整个DOM中的变化。

(2)、构造函数，参数为回调函数

构造函数为window.MutationObserver，它在监听到DOM中的改变并且一系列改变结束后触发回调函数。他与事件不同的是：它在DOM变化时，会记录每一个DOM的变化(为一个MutationRecord对象)，到DOM变化结束时触发回调函数。DOM变化可能是一系列的(比如同时改变宽和高)，那么这一系列的变化就会产生一个队列，这个队列会作为参数传递给回调函数。

由于浏览器差异。一些版本的浏览器各自支持了构造函数，但是用法一致的。实例化一个观察者，代码如下：

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

let observer = new MutationObserver(callback);

轮播图的原理是什么？

将一一系列图片方式ul的li中，将ul水平布局。通过设置外层div的大小显示图片的大小，超出部分通过overflow：hidden，属性进行隐藏。通过设置定时调用， setTimeout ，来指定一段时间后，整个ul左移或者右移，以达到显示下一张图片的效果。

webpack打包流程简单说一说？

前提是已经安装好node.js 因为webpack就是基于node.js写的
nodejs中文官网
webpack官网
/*搭建webpack步骤

1.初始化环境 npm init -y
2.安装webpack npm install webpack webpack-cli -D
3.创建src目录和配置文件webpack.config.js
4.进行webpack配置mode、entry、output、plugins等
5.打开网页需要配置npm install html-webpack-plugin -D 用于解析html
6.之后还需安装npm install webpack-dev-server -D 用于启动服务
7.引入html-webpack-plugin插件，写入插件即内容
8.配置devServer
9.运行 npm run build 进行打包
10.运行 npm run dev 运行网页

说一说vue.js与原生js 的区别？

一、控件跟数据自动绑定，可以直接使用data里面的数据值来提交表单，而不需要再使用$(“#myid”).val()那一套方法来获取控件的值，对控件赋值也方便很多，只需要改变data的值，控件就会自动改变值。将复杂的界面操作，转化为对数据进行操作。

二、页面参数传递和页面状态管理。

页面传值对于vue来说，可供选择的方法非常多。比如使用子组件实现，通过对props属性传值；也可以使用页面url参数的方法传值；或使用vuex全局状态管理的方法页面传值等等。而原生开发的时候，在页面有多个参数的时候，页面传值和初始化，要复杂很多。而vue直接将参数保存在对象里面，直接给子组件的属性或vuex存储一个对象就行了，比如 , 这样就可以将userinfo传到自定义组件。

三、模块化开发、无刷新保留场景参数更新

比如一个列表页面里面有添加功能，有修改功能，这时候我们可以通过引用子组件的形式，当子组件内容更新的时候，修改主组件的数据，比如修改了一条数据后，我们需要列表页同时刷新，但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个，需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数，但假如你用vue开发，将变得非常简单。

四、代码的可阅读性

vue天生具有组件化开发的能力，因此不同的功能基本都是写在不同的模块里面，因此代码的可阅读性非常高。当一个新手接手一个旧项目的时候，基本上可以做到一天就能定位到要修改的代码，进行修改，快速接手项目。

五、基于强大的nodejs，添加新的组件库，基本一句npm命令就能安装，比如当我需要使用axios组件的时候，直接npm install axios安装一下，就可以使用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。

六、主路由、子路由、主页面、子组件的方式，可以让我们彻底抛弃iframe。写过前端的同学都知道，因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构友好。而且使用vue非常简单方便的实现系统菜单、导航等固定布局。

七、各子组件样式不冲突：各个组件之间，可以使用相同的样式名，但有不同的样式属性。比如组件A和组件B的button都绑定了class=“btn”, 但在两个组件里，我们可以实现两个不同的btn样式属性，互不影响。

js new一个对象发生了什么

以构造器的prototype为原型，创建一个新的空对象

通过 this 将属性和方法添加至这个对象

如果构造器没有手动返回对象，则返回创建的新对象，如果有，则舍弃掉第一步创建的新对象，返回手动return的对象

有了解过promise吗？

Promise 是异步编程的一种解决方案，其实就是一个构造函数，自己身上有all、resolve、reject这几个方法，原型上有.then、.catch等方法。

promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)。

什么是懒加载？

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。

懒加载的优点：

提升用户体验，加快首屏渲染速度；
减少无效资源的加载；
防止并发加载的资源过多会阻塞 js 的加载；
懒加载的原理：

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载。

GET和POST请求方式有什么区别？

GET请求方式把参数包含在URL中，而POST通过request body来传递参数。

GET请求在URL中传送的参数是有长度限制的，而POST没有。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

由于GET的参数直接暴露在URL上，所以相对来说，GET的安全性没有POST高，不能用来传递敏感信息。

在发送post请求前会先进行option请求测试。

判断 js 类型的方式

typeof
可以判断出’string’,‘number’,‘boolean’,‘undefined’,‘symbol’
但判断 typeof(null) 时值为 ‘object’; 判断数组和对象时值均为 ‘object’
instanceof
原理是构造函数的 prototype 属性是否出现在对象的原型链中的任何位置
function A() {}
let a = new A();
a instanceof A //true,因为 Object.getPrototypeOf(a) === A.prototype;
Object.prototype.toString.call()

常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined

Object.prototype.toString.call(null)//“[object Null]”
Object.prototype.toString.call(undefined)//“[object Undefined]”
Object.prototype.toString.call(Object)//“[object Function]”
4. Array.isArray()

用于判断是否为数组。

typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别
typeof是一个运算符，用于检测数据的类型，比如基本数据类型null、undefined、string、number、boolean，以及引用数据类型object、function，但是对于正则表达式、日期、数组这些引用数据类型，它会全部识别为object

instanceof同样也是一个运算符，它就能很好识别数据具体是哪一种引用类型。它与isPrototypeOf的区别就是它是用来检测构造函数的原型是否存在于指定对象的原型链当中；

而isPrototypeOf是用来检测调用此方法的对象是否存在于指定对象的原型链中，所以本质上就是检测目标不同。

节流与防抖

防抖（n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时）
当事件被触发时，开启一个定时器，如果在规定时间内再次被触发，则清除上一个定时器，重新开启一个定时器，当在规定时间内没有再次触发，则响应对应操作。

节流（ n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效）
设置一个时间间隔，当达到规定时间间隔后，触发事件，否则，在规定时间内的所有事件都不触发。

深拷贝与浅拷贝深拷贝有哪些方法？

深拷贝和浅拷贝都是指在进行对象复制时生成新的对象副本的过程。它们的区别在于复制的程度和复制后的结果。

浅拷贝只复制了对象的引用，而不是对象本身。也就是说，新对象和原对象仍然共享同一个内存地址，修改其中任一个对象的属性值，另一个对象也会受到影响。浅拷贝通常使用“切片”（slice）或“拼接”（concatenation）等方法实现。

深拷贝则会复制对象及其所有的子对象，生成一个全新的对象副本，新对象和原对象完全独立。修改其中任一个对象的属性值，另一个对象不会受到影响。深拷贝通常使用递归或序列化等方法实现。

总之，浅拷贝只复制了对象的引用，而深拷贝则复制了整个对象及其子对象的值，因此深拷贝需要更多的时间和空间。在使用时，应根据具体情况选择适当的拷贝方式。

深拷贝是指重新创建一个与原始对象值相同的新对象，且新对象与原始对象完全独立，修改新对象不会影响原始对象。以下是几种深拷贝的方法：

递归拷贝（Recursive Copy）：对于对象中的每个属性，如果是基本类型，则直接拷贝；如果是对象类型，则递归拷贝对象中的属性。

function deepCopy(obj) {
  if (typeof obj === "object") {
    let result = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
      result[key] = deepCopy(obj[key]);
    }
    return result;
  } else {
    return obj;
  }
}

JSON 序列化和反序列化：将对象序列化成字符串，再反序列化成新的对象。

let newObj = JSON.parse(JSON.stringify(oldObj));

但是这种方法有一些限制，例如无法拷贝函数和 undefined 等特殊值。

使用第三方库：例如 Lodash 的 cloneDeep 方法。

let newObj = _.cloneDeep(oldObj);

无论哪种方法，都需要注意循环引用的问题，即对象中存在相互引用的情况。可以使用 WeakMap 来解决该问题。

你知道的性能优化的方法有哪些？

减少 HTTP 请求次数，控制CSS Sprite、JavaScript 与 CSS 源码、图片的大写，使用网页Gzip、CDN托管、data缓存、图片服务器。
通过前端模板 JavaScript 和数据，减少由于 HTML 标签导致的带宽浪费，在前端用变量保存 Ajax 请求结果，每次操作本地变量时，不用请求，减少请求次数。
用 innerHTML 代替 DOM 操作，减少 DOM操作次数，优化 JavaScript 性能。
当需要设置的样式很多时，设置 className 而不是直接操作 Style，如margin-top margin-left 合为margin。
少用全局变量，缓存 DOM 节点查找的结果，减少 I/O 读取操作。
避免使用 CSS 表达式，它又称为动态属性。
预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳。
避免在页面的主体布局中使用表（table），表要在其中的内容完全下载之后才会显示出来，显示的速度比 DIV+CSS 布局慢。

Javascript如何实现继承？

1.原型链继承

function Parent () {this.name = 'aa';}

Parent.prototype.getName = function () {

    console.log(this.name);

}

function Child () {}

Child.prototype = new Parent();

var child = new Child();

console.log(child.getName()) // aa

特点：

非常纯粹的继承关系，实例是子类的实例，也是父类的实例
父类新增原型方法/原型属性，子类都能访问到
简单，易于实现
缺点：

要想为子类新增属性和方法，必须要在new Child()这样的语句之后执行，不能放到构造器中
无法实现多继承
来自原型对象的引用属性被所有实例共享
创建子类实例时，无法向父类构造函数传参

2.构造函数继承

   function a2() {this.color=[1,2,3,4];  }
     
    function b2() {a2.call(this);  }

 




    var instance2=new b2();
     
    instance2.color.push(5);
     
    console.log(instance2.color);//[1, 2, 3, 4, 5]

 




    var instance3=new b2();
     
    console.log(instance3.color);//[1, 2, 3, 4]

//上面两个例子主要想指出，instance2对构造函数的数组做修改是不会影响到其他的实例，
//因为它改的是属于它自己的那一份，不像原型那样大家共享
//------------------------//

 function a3(name) { this.name=name; }

    function b3() {a3.call(this,"ww");this.age=29;  }

    var instance4=new b3();
     
    console.log(instance4.name);//ww
     
    console.log(instance4.age);//29

//这个例子说明构造函数继承可以传参数

特点：

解决了原型链继承中，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）
缺点：

实例并不是父类的实例，只是子类的实例
只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

谈谈This对象的理解。

调用的上下文环境包括全局和局部

全局环境就是在

<script></script>

里面，这里的this始终指向的是window对象，

局部环境

1、在全局作用域直接调用函数，this指向window

2、对象函数调用，哪个对象调用就指向哪个对象

3、使用new实例化对象，在构造函数中的this指向实例化对象。

4、使用call或apply改变this指向

5、 箭头函数不绑定this，箭头函数没有自己的this关键字
如果在箭头函数中使用this，this关键字将指向箭头函数定义位置的this，且箭头函数的 this 永远指向该函数构造时的环境。

特别注意：

1、用于区分全局变量和局部变量，需要使用this

var age=20

function show（age）{

this.age=age

}

2、返回函数当前的对象，通过return this

3、将当前的对象传递到下一个函数

什么是window对象? 什么是document对象?

window 指窗体。document 指页面。document 是 window 的一个子对象。
用户不能改变 document.location(因为这是当前显示文档的位置)。但是可以改变 window.location (用其它文档取代当前文档)window.location 本身也是一个对象, 而 document.location 不是对象。

Ajax 是什么? 如何创建一个Ajax？

什么是跨域，如何解决跨域问题?

同源策略限制了一下行为：

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去

说的更直白一点，就是我们在前端使用ajax发送异步请求，如果这个请求的URL地址与当前地址栏中的URL地址协议不同、域名不同、端口不同时，都成为跨域，**

跨域解决方案
通过jsonp跨域
document.domain + iframe跨域
location.hash + iframe
window.name + iframe跨域
postMessage跨域
跨域资源共享（CORS）
nginx代理跨域
nodejs中间件代理跨域
WebSocket协议跨域

异步加载的方式有哪些？

script dom element

onload时的异步加载

document.write和 innerHTML的区别?

1.document.write是直接将内容写入到页面，但是在写之前如果没有调用document.open, 那么浏览器就会自己去调用document.open，而且每次写完之后我再去关闭浏览器然后再去打开会重新调用该函数，而此时就会导致页面被重写。

2.innerHTML则是DOM元素的一个属性，会精确读取到html的某一个DOM元素。并且可以对此DOM元素来进行更改，当我的innerHTML将内容写入某个DOM元素时，不会导致页面全部重绘

.call() 和 .apply() 以及bind（）的含义和区别？

都是将一个对象的方法让另一个对象进行调用

不同的是 call 和 bind 可以传入多个参数

apply只能传入两个参数

apply与call都是立即调用函数，而bind方法不会立即调用函数，而是返回一个修改this后的函数

哪些操作会造成内存泄漏？

内存泄漏指不用拥有或需要任何对象（数据）之后，它们仍然存在于内存中。

闭包会形成内存泄漏、 setTimeout的第一个参数使用字符串而非函数，会引发内存泄漏。控制台日志

JQuery

JQuery的源码看过吗？能不能简单概况一下它的实现原理？

jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

jquery中如何将数组转化为json字符串，然后再转化回来？

JSON.stringfy(对象)
JSON.parse（json字符串）

jQuery 的队列是如何实现的？队列可以用在哪些地方？

JQuery一个对象可以同时绑定多个事件，这是如何实现的？

针对 jQuery性能的优化方法？

jQueryUI如何自定义组件?

其他问题

设计模式知道什么是singleton, factory, strategy, decrator么?

工厂模式创建对象

套路：通过工厂函数动态常见对象并返回

适用场景：需要创建多个对象

问题:对象没有一个具体的类型，都是object类型

function createPerson(name,age){

      var obj={

        name:name,

        age:age,

        serName:function(name){

          this.name=name

        }

      }

      return obj

    }

    //创建两个人

    var p1=createPerson("lisa",34)

    var p2=createPerson("bob",24)

自定义构造函数模式

套路：自定义构造函数，通过new创建对象

适用场景：需要创建多个类型确定的对象

问题：每个对象都有相同的数据，浪费内存

 function Person(name,age){

      this.name = name 

      this.age = age 

      this.Setname= function(name){

        this.name = name

             }

      this.Setage = function(age){

        this.age=age

            }

    }

    var lisa=new Person("lisa",12)

    lisa.Setage(24)

    console.log(lisa)

构造函数+原型组合模式

套路：自定义构造函数，属性在函数中初始化，方法添加到原型上

适用场景：需要创建多个类型确定的对象

function Person(name,age){

      this.name = name

      this.age = age

    }

    Person.prototype.Setname=function(name){

      this.name = name

    }

    var p1 = new Person("tom",13)

    var p2 = new Person("jack",44)

    console.log(p1,p2)

原型链继承

套路

1、定义父类型构造函数

2、给父类型的原型添加方法

3、定义子类型的构造函数

4、创建父类型的对象赋值给子类型的原型

5、将子类型原型的构造属性设置为子类型

6、给子类型原型添加方法

7、创建子类型的对象：可以调用父类型的方法

关键

子类型的原型为父类型的一个实例对象

在这里插入图片描述

你有用过哪些前端性能优化的方法？

代码层优化：

v-if和v-show分场景使用

computed和watch分场景使用

v-for遍历必须为item添加key，且避免同时使用v-if

长列表性能优化

时间的销毁

图片资源懒加载

路由懒加载

第三方插件按需引入

优化无线列表性能

服务器端渲染ssr或预渲染

webpack层优化:

webpack对图片进行压缩

提取公共代码

提取组件的css

优化sourceMap

Vue项目的编译优化

基础的web技术优化:

开启gzip压缩

浏览器缓存

http状态码有那些？分别代表是什么意思？

200请求成功

301 域名问题

404 页面找不到

405 请求方式不正确

500 内部后台服务器错误

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？