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协议包含哪几层
物理层
链路层
网络层
传输层
会话层
表示层
应用层