前端面试题(html、css、js、网络)

1. HTML
2. CSS
3. JS
4. 网络

HTML

H5

1. 行级元素和块级元素有哪些，怎样转换

行级元素有：span a img button input

块级元素有：h... div p ul li table form

特点：行级元素设置margin和padding时只有左右有效，上下无效

转换：通过display设置不同值进行转换

2. 说说对HTML语义化的理解

1. 结构清晰
2. 搜索引擎优化，利于爬虫抓取
3. 方便团队维护

3. ::before和:after中双冒号和单冒号之间的区别

:是伪类  ::是伪元素

4. 怎么让Chrome支持小于12px的文字

1. 缩放
span {
	font-size: 10px;
	display: inline-block;
	// 兼容写法
	-webkit-transform: scale(0.5); // 5px
}

5. rem和em的区别

1. em针对父元素的font-size
2. rem针对html的font-size

6. H5有哪些新元素和新特性

新元素：header aside footer article nav video audio canvas type=(date time email)等

新特性：

1. 本地存储 localStorage用于存储长期数据，浏览器关闭仍然存在，session Storage反之。
2. 地理位置 navigator.geolocation.getCurrentPosition获取当前位置，navigator.geolocation.watchPositon监控位置变化。
3. 拖放 draggable：使元素可以拖动 相关事件：dragover drop等。
4. webSockets: 提供浏览器和服务器质检简历全双工通信通道的方式。

7. script、script async、script defer的区别

script：脚本会在解析HTML文档到<script>时开始下载和执行，这个操作会阻塞HTML文档的解析，脚本在下载和执行完成之前，不会继续解析后续的HTML内容，可用在需立即执行并可能影响页面内容的脚本，如修改DOM的脚本。

script async：脚本异步下载，在解析HTML内容的同时，异步地下载脚本，脚本下载完成立即执行，执行顺序为哪个脚本线下载完成，适用于独立且不依赖DOM的脚本，如第三方解析工具或广告脚本。

script defer：脚本异步下载，在解析HTML内容的同时，异步地下载脚本，按照出现顺序执行，适用于需要在完整的HTML解析后执行，如操作DOM的初始化脚本。

8. 什么是DOCTYPE， 有什么作用

DOCTYPE时HTML5的声明文档，帮助浏览器理解使用的是哪种HTML版本，以便正确解析和渲染文档。使用后浏览器会严格遵循W3C（万维网联盟）的标准渲染页面。否则可能导致怪异模式，浏览器会模拟旧版本浏览器行为，以确保兼容早期浏览器，导致渲染不一致。

9. 什么是严格模式和混杂模式

严格模式：遵循浏览器支持的最高标准执行

混杂模式：向下兼容，容易导致样式混乱

10. 前端页面有哪三层构成，分别是什么

1. 结构层

   负责页面的内容和基本结构，也就是页面中的各个标签

2. 表现层

   通过css对网页的元素进行样式调整

3. 行为层

   通过js实现用户和亚眠的交互

​

11. iframe的作用以及优缺点

优点：

1. 独立，不会和其他元素冲突
2. 重用内容，减少代码冗余
3. 异步加载
4. 跨域内容嵌入

缺点：

1. 搜索引擎无法解析
2. 阻塞页面的onload事件
3. 和主页界面共享连接池，影响页面加载
4. 跨域问题，iframe中的内容和主页面交互受限
5. 安全风险，嵌入内容不可信的来源可能会受到跨站脚本攻击XSS

12. 自适应

1. 淘宝无限适配 搭配rem（移动端）

canvas

如何使用HTML5中的Canvas元素绘制图形

1. 设置一个canvas标签

2. 获取到canvas元素

3. 获取canvas2D绘图上下文

4. 通过各种属性进行绘制，如绘制原色，形状等

   <canvas id="textCanvas" width="200px" height="200px"></canvas>
   
   <script>
   const canvas = document.getElementById("textCanvas");
   const ctx = canvas.getContext("2d");
   // 设置填充颜色
   ctx.fillStyle = "blue"; 
   // 设置矩形
   ctx.fillRect(50, 50, 100, 100);
   </script>
   

存储

cookie、sessionStorage、localStorge的区别

	cookie	localStorage	sessionStorage
初始化	客户端或服务器	客户端	客户端
过期时间	手动设置	长期存储	当前页面关闭
是否能跟随HTTP请求	可以，通过设置请求头	否	否
容量	4KB	5MB	5MB
访问权限	任意窗口	任意窗口	当前窗口

CSS

1. 如何在HTML中引入CSS

1. 行内样式

   <p style="color: red;">文本</p>
   

2. 内部样式表

   <style>
   	...
   </style>
   

3. 外部样式表

   <link rel="stylesheet" href="./...">
   

2. 选择器优先级

!import > 内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > *

3. 浮动和清除

// 设置浮动
.content {
    float: left;
}

// 清除浮动
.content {
    clear: both;
}

4. 隐藏元素的方法有哪些

1. display: none; // 消失不占据空间
2. opacity: 0;  // 设置透明度为0
3. visibility: hidden;  // 元素小时且占据空间位置

5. 重排与重绘

重排(回流)： 根据样式计算出盒模型在页面中的大小和位置
重绘： 根据盒模型的特性进行绘制，如颜色和背景

6. 让一个元素垂直居中的方式有哪些

1. 定位+margin
父 {
	position: relative;
}
子 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
2. 定位+transform
父 {
	position: relative;
}
子 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
3. flex布局
{
	display: flex;
	align-items: center;
	justify-content: center;
}
4. grid布局

7. css哪些属性可以继承，哪些不可以

1. font

JS

js基本数据类型及区别

数据类型：Number、String、Object、Boolean、Symbol、Undefined、Null、BigInt

Symbol：代表独一无二的数据类型，主要解决全局变量冲突。

BigInt：可以表示任意精度格式的证书，使用可以安全的存储和操作大整数。

数据类型检测的方式有哪些

1. typeof 数组、对象、null都为object，其他正确

   typeof true  // Boolean
   

2. instanceof 只能判断引用类型，普通类型判断错误，运行机制为在原型链是否能找到该类型

   2 instanceof Number  // false
   
   [] instanceof Array  // true
   function() {} instanceof Function // true
   {} instanceof Object // true
   

3. constructor

   (2).constructor === Number // true
   (true).constructor === Bollean // true
   ({}).constructor === Object // true
   

判断数组的方式有哪些

1. instanceof

2. Array.prototype.constructor

   arr.constructor === Array
   

3. 通过Object.prototype.toString.call()

   Object.prototype.toString.call(arr) === '[object Array]'
   

4. Array.isArray()

请简述js的this

1. 全局上下文的this，指向全局对象

   this === window
   

2. 函数中的this

   function func() {
       console.log(this)
   }
   
   func() // this指向window，严格模式下为undefined
   

3. 方法中的this

   const obj = {
       name: 'Jone',
       greet: function() {
           console.log(`hello, ${this.name}`)
       }
   }
   
   obj.greet() // this指向obj
   

4. 构造函数中的this

   function Person(name) {
       this.name = name
   }
   
   const person = new Person('hang')
   console.log(person.name) // this指向创建的实例
   

5. 箭头函数中的this

   const obj = {
       count: 0,
       increment: function() {
           setInterval(() => {
               console.log(this.count++)
           }, 1000)
       }
   }
   obj.increment() // this指向obj，输出递增的值，箭头函数没有自己的this，会继承外层作用域的this值
   

6. 显式绑定this

   function greet() {
       console.log(`HEllo, ${this.name}`)
   }
   
   const person = { name: 'hang' }
   greet.call(person) // call()显式指定greet的this为person
   
   
   

AMD和CommonJS的区别

AMD：异步加载，使用define导出，required导入

CommonJS：同步加载，使用module.exports导出，required导入

ES6模块与CommonJS模块有什么异同

ES6:

1. 静态导入和导出，使用import和export，编译时解析和执行
2. 导出可以export default导出默认值，也可与export {…}导出多个变量，还可以export const/let/class 命名值
3. import defaultName from 'xxx’导入默认值或import {xxx} from 'xxx’导入命名值

CommonJS

1. 动态加载，使用required()动态加载模块，运行时解析和执行

2. 全局作用域，CommonJS 模块的变量和函数会自动添加到全局作用域，可以在模块外部访问和修改。

let、const、var的区别

1. let、const拥有块级作用域，var没有

2. var存在变量提升，let、const没有，只能在变量声明之后使用

3. var声明的变量为全局变量，并会将该变量添加为全局对象也就是window的属性，let和const并不会

4. var可以重复声明，let和const不能

5. let和var可以不设置初始值，const必须设置

6. let可以修改指针指向，const不行，也就是不能重新赋值

new操作符的实现原理

1. 创建一个空对象

2. 链接到原型

3. 绑定this指向

4. 执行构造函数

   function myNew(constructor, ...args) {
       const obj = Object.create(constructor.prototype)
       
       const result = constructor.apply(obj, args)
       
       return result instanceof Object ? result : obj
   }
   
   function Person(name, age) {
       this.name = name
       this.age = age
   }
   
   const person = myNew(Person, 'hang', 21)
   

数组有哪些原生方法

join toString pop push shift unshift concat slice splice every some filter map等等

forin和forof的区别

for in 适用于迭代对象的可枚举属性

const obj = {a: 1, b: 2, c: 3}

for(let prop in obj) {
    console.log(prop) // a, b, c
    console.log(obj[prop]) // 1, 2, 3
}

for of 适用于可迭代对象（数组，字符串，Map，Set），支持使用Symbol.iterator迭代器协议的对象

const arr = [1, 2, 3]
for(let num of arr) {
    console.log(num) // 1, 2, 3
}

数组的遍历方法有哪些

forEach map filter forof every some find reduce

原型和原型链

原型prototype，每个函数都有一个prototype属性，它指向一个对象，这个对象成为原型对象

function Person(name) {
    this.name = name
}

// 打印原型对象
console.log(Person.prototype) // 输出{}

// 原型对象上设置方法
Person.prototype.say = function() {
    console.log(`Hi, my name is ${this.name}`)
}

const person = new Person('hang')
person.say()

每个对象都有一个指向它的原型对象的引用__proto__，当方位对象的属性或方法时，如果对象本身没有定义，则会沿着原型链向上，

原型链的终点是null

person.__proto__ === Person.prototype

对闭包的理解

闭包

function func() {
    let count = 0
    return function() {
        count++
        return count
    }
}
const c = func()
c() // 1
c() // 2
c() // 3

call、apply、bind函数

call func.call(thisObj, arg1, arg2, …)

function func1(arg1, arg2) {
    console.log(arg1 + ',' + this.name + arg2)
}
const person = { name: 'hang' }
func1.call(person, 'hello', '!')  // hello，hang!

apply func.apply(thisObj, [argsArray])

func1.apply(person, ['hello', '!'])  // hello，hang!

bind func.bind(thisObj, arg1, arg2, …)

const bindObj = func1.bind(person, 'hello') // 可以传多个，也可以先传一个，支持加后续参数，不会立即执行，返回一个函数
bindObj('!') // hello，hang!

call、apply函数的区别

传参方式不一项

异步编程的实现方式

1. 回调函数

2. Promise，避免回调地狱

   const promise = new	Promise((resolve, reject) => {
       setTimeout(() => {
           resolve('Data fetched')
       }, 1000)
   })
   
   promise
       .then((data) => {
       	// data即为resolve返回的值Data fetched
       	return 'Another data'
   	})
   	.then((data) => {
       	// data即为上个返回值Another data
   	})
       .catch((error) => {
       
   	})
   

3. async/await

   function fetchData() {
       return new Promise((resolve, reject) => {
           setTimeut(() => {
               resolve('data')
           }, 1000)
       })
   }
   async function getData() {
       try {
           const data = await fetchData()
           consolelog(data)
       } catch(error) {
           console.error(error)
       }
   }
   
   getData()
   

setTimeout、Promise、async/await区别

回调函数：简单直接，但容易导致回调地狱，代码难以维护。

Promise：解决了回调地狱问题，代码更易读，但有时链式调用会显得冗长。

async/await：基于 Promise，使异步代码看起来像同步代码，最为推荐的方式。

Promise.all和Promise.race的区别和使用场景

Promise.all

1. 接受一个promise组成的数组，返回一个新的promise，有两种情况，都成功时，新promise返回一个包含所有结果的数组进行resolve
2. 如果数组中任意一个Promise被reject，新Promise立即被reject，并返回第一个reject的结果

Promise.race

接受一个promise组成的数组，当数组中任意一个首先resolve或reject时，新的Promise立即以相同的值或原因进行resolve或reject

对async/await的理解

async总是返回一个Promise，await只能在async函数中使用，用于等待一个Promise对象的结果，提高了代码的可读性和可维护性

浏览器的垃圾回收机制

js的垃圾回收机制是自动的，，常用的算法有两种，标记-清除和引用计数

标记-清除：垃圾回收器从跟对象开始遍历所有可达对象，并标记，若未被标记的被认为垃圾，清除释放

哪些情况会导致内存泄漏

1. 意外的全局变量

   // 如果js中没有使用var、let、const声明变量，会认为这个变量为全局，全局变量生命周期一直存在，无法回收
   function leak() {
       leakAttr = 'this is a leak global attr'
   }
   

2. 闭包

3. 未清理的事件监听 element.removeEventListener(event, func(args));清除监听

4. 未清理的计时器或回调

ES6有哪些新特性

1. 箭头函数
2. 结构赋值
3. 模板字符串
4. promise
5. symbol
6. let const
7. 导入导出
8. forof
9. 扩展运算符
10. 展开运算符
11. Proxy
12. Class
13. 默认参数

匿名函数的典型应用场景

1. 回调函数

2. 立即执行函数表达式

3. 函数作为返回值

什么是事件循环，调度堆栈和任务队列之间有什么区别

事件循环是 JavaScript 引擎执行宏任务和微任务的机制。在事件循环中，JavaScript 引擎会不断地从调度堆栈中取出任务执行，执行完成后检查微任务队列，依次执行所有的微任务，然后再取出下一个宏任务执行，如此循环。

js有哪些设计模式

1. 单例模式
2. 工厂模式
3. 构造函数模式
4. 发布-订阅模式
5. 装饰器模式
6. 代理模式

网络

GET和POST的区别

传输方式：get显示在地址栏中，长度受限未2048字符，post放在请求体中，长度不受限制

安全性：get请求的数据暴露在url中，不适合敏感信息，post更安全

缓存：浏览器可以缓存get请求的相应，post默认不缓存，每次需要重新请求

HTTP2对于HTTP1有什么优势

1. 2支持在单个TCP连接上发送多个请求，无需因为有图片，样式，脚本等简历多个连接，减少连接延迟

2. 二进制传输

3. 头部压缩

https为什么比http安全

1. 通过SSL/TLS对数据加密传输
2. 身份验证，要求服务器和客户端身份验证
3. 数据完整性
4. SEO加权

http状态码有哪些，代表什么意思

100：服务器接收到请求部分，客户端应继续发送剩余部分

200：成功

201：成功，并创建新资源

204：服务器成功处理请求，无需返回任何内容

301：请求资源永久移动到新位置

302：请求资源临时移动到新位置

400：客户端语法错误

401：请求需要用户身份验证

403：服务器拒绝请求，权限不足

404：请求资源未找到

500：服务器出现错误

502：作为网关或代理工作的服务器收到无效相应

post请求为什么会多发送一次option请求

1. 复杂请求
2. cors
3. 自定义头部信息

输入url到看到页面全过程

1. DNS解析，获取IP地址
2. 建立TCP连接，三次握手
3. 发起HTTP请求
4. 服务器处理请求
5. 返回http相应
6. 浏览器渲染页面
7. 加载资源
8. 页面交互
9. 加载完成

浏览器缓存优先级

强缓存 > 协商缓存 > 浏览器缓存

跨域问题

1. 代理服务器
2. cors
3. jsonp 只能实现get请求，容易受到XSS攻击

浏览器渲染机制

浏览器首先下载html文件，并构建DOM数，然后下载CSS文件，构建CSSOM，渲染树由DOM树和CSSOM树结合，对节点几何信息进行计算，并绘制，当DOM结构发生变化，会触发重排和重绘。

进程和线程

一个进程包含多个线程

进程是系统分配资源的基本单位，拥有独立的地址空间。 线程是CPU调度的基本单位，共享所属进行的的资源

浏览器安全

1. SQL注入
2. 跨站脚本攻击XSS
3. 跨站请求伪造CSRF

tcp/ip协议包含哪几层

物理层

链路层

网络层

传输层

会话层

表示层

应用层