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)等
新特性：
- 本地存储 localStorage用于存储长期数据，浏览器关闭仍然存在，session Storage反之。
- 地理位置 navigator.geolocation.getCurrentPosition获取当前位置，navigator.geolocation.watchPositon监控位置变化。
- 拖放 draggable：使元素可以拖动 相关事件：dragover drop等。
- 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. 前端页面有哪三层构成，分别是什么
-
结构层
负责页面的内容和基本结构，也就是页面中的各个标签
-
表现层
通过css对网页的元素进行样式调整
-
行为层
通过js实现用户和亚眠的交互
11. iframe的作用以及优缺点
优点：
- 独立，不会和其他元素冲突
- 重用内容，减少代码冗余
- 异步加载
- 跨域内容嵌入
缺点：
- 搜索引擎无法解析
- 阻塞页面的onload事件
- 和主页界面共享连接池，影响页面加载
- 跨域问题，iframe中的内容和主页面交互受限
- 安全风险，嵌入内容不可信的来源可能会受到跨站脚本攻击XSS
12. 自适应
1. 淘宝无限适配 搭配rem（移动端）
canvas
如何使用HTML5中的Canvas元素绘制图形
-
设置一个canvas标签
-
获取到canvas元素
-
获取canvas2D绘图上下文
-
通过各种属性进行绘制，如绘制原色，形状等
<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
-
行内样式
<p style="color: red;">文本</p> -
内部样式表
<style> ... </style> -
外部样式表
<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：可以表示任意精度格式的证书，使用可以安全的存储和操作大整数。
数据类型检测的方式有哪些
-
typeof 数组、对象、null都为object，其他正确
typeof true // Boolean -
instanceof 只能判断引用类型，普通类型判断错误，运行机制为在原型链是否能找到该类型
2 instanceof Number // false [] instanceof Array // true function() {} instanceof Function // true {} instanceof Object // true -
constructor
(2).constructor === Number // true (true).constructor === Bollean // true ({}).constructor === Object // true
判断数组的方式有哪些
-
instanceof
-
Array.prototype.constructor
arr.constructor === Array -
通过Object.prototype.toString.call()
Object.prototype.toString.call(arr) === '[object Array]' -
Array.isArray()
请简述js的this
-
全局上下文的this，指向全局对象
this === window -
函数中的this
function func() { console.log(this) } func() // this指向window，严格模式下为undefined -
方法中的this
const obj = { name: 'Jone', greet: function() { console.log(`hello, ${this.name}`) } } obj.greet() // this指向obj -
构造函数中的this
function Person(name) { this.name = name } const person = new Person('hang') console.log(person.name) // this指向创建的实例 -
箭头函数中的this
const obj = { count: 0, increment: function() { setInterval(() => { console.log(this.count++) }, 1000) } } obj.increment() // this指向obj，输出递增的值，箭头函数没有自己的this，会继承外层作用域的this值 -
显式绑定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:
- 静态导入和导出，使用import和export，编译时解析和执行
- 导出可以export default导出默认值，也可与export {…}导出多个变量，还可以export const/let/class 命名值
- import defaultName from 'xxx’导入默认值或import {xxx} from 'xxx’导入命名值
CommonJS
-
动态加载，使用required()动态加载模块，运行时解析和执行
-
全局作用域，CommonJS 模块的变量和函数会自动添加到全局作用域，可以在模块外部访问和修改。
let、const、var的区别
-
let、const拥有块级作用域，var没有
-
var存在变量提升，let、const没有，只能在变量声明之后使用
-
var声明的变量为全局变量，并会将该变量添加为全局对象也就是window的属性，let和const并不会
-
var可以重复声明，let和const不能
-
let和var可以不设置初始值，const必须设置
-
let可以修改指针指向，const不行，也就是不能重新赋值
new操作符的实现原理
-
创建一个空对象
-
链接到原型
-
绑定this指向
-
执行构造函数
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函数的区别
传参方式不一项
异步编程的实现方式
-
回调函数
-
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) => { }) -
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
- 接受一个promise组成的数组，返回一个新的promise，有两种情况，都成功时，新promise返回一个包含所有结果的数组进行resolve
- 如果数组中任意一个Promise被reject，新Promise立即被reject，并返回第一个reject的结果
Promise.race
接受一个promise组成的数组，当数组中任意一个首先resolve或reject时，新的Promise立即以相同的值或原因进行resolve或reject
对async/await的理解
async总是返回一个Promise，await只能在async函数中使用，用于等待一个Promise对象的结果，提高了代码的可读性和可维护性
浏览器的垃圾回收机制
js的垃圾回收机制是自动的，，常用的算法有两种，标记-清除和引用计数
标记-清除：垃圾回收器从跟对象开始遍历所有可达对象，并标记，若未被标记的被认为垃圾，清除释放
哪些情况会导致内存泄漏
-
意外的全局变量
// 如果js中没有使用var、let、const声明变量，会认为这个变量为全局，全局变量生命周期一直存在，无法回收 function leak() { leakAttr = 'this is a leak global attr' } -
闭包
-
未清理的事件监听 element.removeEventListener(event, func(args));清除监听
-
未清理的计时器或回调
ES6有哪些新特性
- 箭头函数
- 结构赋值
- 模板字符串
- promise
- symbol
- let const
- 导入导出
- forof
- 扩展运算符
- 展开运算符
- Proxy
- Class
- 默认参数
匿名函数的典型应用场景
-
回调函数
-
立即执行函数表达式
-
函数作为返回值
什么是事件循环，调度堆栈和任务队列之间有什么区别
事件循环是 JavaScript 引擎执行宏任务和微任务的机制。在事件循环中，JavaScript 引擎会不断地从调度堆栈中取出任务执行，执行完成后检查微任务队列，依次执行所有的微任务，然后再取出下一个宏任务执行，如此循环。
js有哪些设计模式
- 单例模式
- 工厂模式
- 构造函数模式
- 发布-订阅模式
- 装饰器模式
- 代理模式
网络
GET和POST的区别
传输方式：get显示在地址栏中，长度受限未2048字符，post放在请求体中，长度不受限制
安全性：get请求的数据暴露在url中，不适合敏感信息，post更安全
缓存：浏览器可以缓存get请求的相应，post默认不缓存，每次需要重新请求
HTTP2对于HTTP1有什么优势
-
2支持在单个TCP连接上发送多个请求，无需因为有图片，样式，脚本等简历多个连接，减少连接延迟
-
二进制传输
-
头部压缩
https为什么比http安全
- 通过SSL/TLS对数据加密传输
- 身份验证，要求服务器和客户端身份验证
- 数据完整性
- SEO加权
http状态码有哪些，代表什么意思
100：服务器接收到请求部分，客户端应继续发送剩余部分
200：成功
201：成功，并创建新资源
204：服务器成功处理请求，无需返回任何内容
301：请求资源永久移动到新位置
302：请求资源临时移动到新位置
400：客户端语法错误
401：请求需要用户身份验证
403：服务器拒绝请求，权限不足
404：请求资源未找到
500：服务器出现错误
502：作为网关或代理工作的服务器收到无效相应
post请求为什么会多发送一次option请求
- 复杂请求
- cors
- 自定义头部信息
输入url到看到页面全过程
- DNS解析，获取IP地址
- 建立TCP连接，三次握手
- 发起HTTP请求
- 服务器处理请求
- 返回http相应
- 浏览器渲染页面
- 加载资源
- 页面交互
- 加载完成
浏览器缓存优先级
强缓存 > 协商缓存 > 浏览器缓存
跨域问题
- 代理服务器
- cors
- jsonp 只能实现get请求，容易受到XSS攻击
浏览器渲染机制
浏览器首先下载html文件，并构建DOM数，然后下载CSS文件，构建CSSOM，渲染树由DOM树和CSSOM树结合，对节点几何信息进行计算，并绘制，当DOM结构发生变化，会触发重排和重绘。
进程和线程
一个进程包含多个线程
进程是系统分配资源的基本单位，拥有独立的地址空间。 线程是CPU调度的基本单位，共享所属进行的的资源
浏览器安全
- SQL注入
- 跨站脚本攻击XSS
- 跨站请求伪造CSRF
tcp/ip协议包含哪几层
物理层
链路层
网络层
传输层
会话层
表示层
应用层
