H5新增特性
1、拖拽释放(Drap and drop)API ondrop
2、画布canvas;
getContext()方法返回一个用于在画布上绘图的环境
canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.
3、自定义属性 data-id
4、用于媒介播放的video和audio,如果浏览器不支持自动播放怎么办?在属性中添加autoplay
5、新的语义化标签:article,header,nav,section,footer, aside;
对语义化的理解:
对开发者友好,让人更容易读懂,利于代码可读性;
对机器友好,让搜索引擎更容易读懂,利于seo。
6、新的本地存储:localStorage(长期存储浏览器关闭后数据不丢失),sessionStorage;
7、新的表单控件:calendar , date , time , email , url , search , tel , file , number;
8、新的技术:websocket,web worker,geoloacation(基于地理位置的应用)。
CSS3新增元素
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)};
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient (red, green, blue);
阴影 box-shadow:3px 3px 3px rgba (0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
转换:旋转 transform: rotate(20deg)、倾斜 transform: skew (150deg, -10deg)、缩放 transform: scale 、位移 transform: translate (20px, 20px);
元素居中
.div{ position:absolute; width:100px; height:100px; top:0; left:0; right:0; bottom:0; margin:auto; }
.div{ display:flex; justify-content:center; align-items:center; }
.div{ position:absolute; top:50%; left:50%; transform:translate(-50%;-50%) }
数组常用方法
- push() 新增
- shift() 删除第一个元素
- unshift() 在数组开头新增元素
- pop() 删除最后一个元素
- join() 将所有元素放入一个字符串中,并指定分隔符分隔
- split() 将一个字符串分隔成字符串数组
- splic() 在指定下标删除/添加元素 a.splic(1,0,3,4)意为从下标1开始删除0个元素,添加元素3,4
- sort() 排序
- reverse() 颠倒顺序
- filter() 筛选出符合的元素,返回新数组 a.filter(item => item>2)
- map() 依次处理每一个元素,返回新数组 a.map(x => x+1)
- forEach() 调用每个元素,并将元素传递到回调函数中 a.forEach(item=>{})
- isArray() 判断对象是否为数组
- every() 判断每个元素是否符合条件
- indexOf() 返回元素第一次出现的位置,如无,则返回-1
- includes() 判断是否包含某个元素
- concat() 合并多个数组
改变原数组:push、pop、unshift、shift、reverse、sort、splice
不改变原数组(即返回新数组):concat、filter、map、join、toString
数组去重
- es6中的Set结构
let newArray = [...new Set(oldArray)]
- filter()+indexOf()
var newArr = arr.filter(function(item,index){ return arr.indexOf(item) === index; // 因为indexOf 只能查找到第一个 });
- for+indexOf()
for(var i=0;i<arr.length;i++) { if(newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); }
常见数据类型
Number、Null、String、Boolean、Undefined
Object、Array
Css样式权重
!important 、内联选择器、 id、 class 、标签/伪类 、通配符 、行内样式
flex布局常用属性
display:flex 开启 弹性布局
- flex-direction:row(主轴为水平)/ column(主轴为垂直)
- justify-content:center(主轴居中对齐)/ space-between(两端对齐,间隔相等) / space-around(间隔相等)
- align-items:center(交叉轴居中对齐)
- flex-wrap:warp(换行) / nowarp(不换行)
Vue的生命周期
- beforCreate
- created
- beforMount
- mounted
- beforUpdate
- updated
- beforDestroy
- destoryed
Vue组件传值方式
- 父子传值
父传子:props
子传父:$emit事件 - Vuex
- EventBus 传值:
$emit事件触发,
$on接受
Vue2与Vue3的区别
-
响应式底层逻辑不同
vue2通过es5的Object.defindProperty()进行数据劫持,结合发布订阅模式实现,仅能监听某个属性
vue3通过es6的Proxy API进行代理,可对整个对象进行监听 -
碎片化程度
vue2只能有一个根节点
vue3可以有多个根节点 -
生命周期
Vue3需要提前引入生命周期钩子函数,Vue2可直接调用 -
同时存在v-if 和 v-for时
Vue2中,v-for优先于v-if
Vue3中,v-if 优先于v-for
es5与es6的区别?
- es5中使用var声明变量,es6中使用let与const
- es6新增 块级作用域、箭头函数、字符串模板(``)、类与继承、模块化概念(导入import/引出export)、解构赋值、Promise对象等。
http常见状态码
- 1xx 请求处理中
- 200 服务器响应成功,成功处理请求
- 3xx 重定向,表需要进一步操作才能完成请求。
301 永久重定向,指请求的资源被分配了新的URL
302 临时重定向,指请求的资源被分配了新的URL,但该新URL可能会再次更新 - 4xx 客户端错误,表请求出错,服务器无法处理
400 发送的请求存在语法错误(服务器不能理解请求的语法)
401 发送的请求需要有HTTP认证信息
403 服务器拒绝访问(没有权限访问)
404 服务器没有找到请求的资源(网站) - 5xx 服务器错误
500 服务器本身出现了错误,无法完成请求
503 服务器停机/超负载,无法处理请求
Promise + 定时器 的执行顺序
console.log(1);
setTimeout(()=>{
console.log(2);
},2000)
setTimeout(()=>{
console.log(3);
},0)
Promise.resolve().then(()=>{
console.log(4);
})
Promise.resolve().then(()=>{
console.log(5);
},6000)
console.log(6);
//以上代码打印结果为 : 1 6 4 5 3 2
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {console.log('async2 end')}
async1()
setTimeout(function () {console.log('setTimeout')}, 0)
new Promise(resolve => {
console.log('Promise')
resolve()
}).then(function () {
console.log('promise1')
}).then(function () {
console.log('promise2')
})
console.log('script end')
// 结果如下
// script start
// async2 end
// Promise
// script end
// async1 end
// promise1
// promise2
// setTimeout
执行顺序:
1、同步先执行
promise的 resolve也属于同步,跟在 promise外面效果是一致的
2、同步结束以后在执行异步里面的微任务
比如 promise的 then
3、最后是宏任务 定时器
前端性能优化
- 减少http请求次数,减少请求资源大小(JS、CSS源码文件压缩、图片大小等。
- 避免图片和iFrame等的空Src(空Src会重新加载当前页面,影响速度和效率);
- 图片懒加载,下拉加载更多
- 利用浏览器缓存
页面从输入URL到加载渲染的过程
-
浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;
-
服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);
-
浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);
-
载入解析到的资源文件,渲染页面,完成。
节流和防抖
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效(每过指定时间后执行)
const throttle = (fun,wait) => {
let isRunning = false;
return (obj) => {
if(!isRunning){
isRunning = true;
setTimeout(() => isRunning = false,wait)
fun(obj);
}
}
}
//应用
const a = throttle( x =>{},1000);
防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
const debounce = (fun,interval) => {
var handle;//这里使用提升变量时防抖只执行一次。如使用let,则interval秒后会执行n次。
return (obj)=>{
clearTimeout(handle);
handle = setTimeout(() => fun(obj),interval);
}
}
//应用
const a = debounce(x => {},1000);
实现防抖在指定时间内只执行第一次:
let debounceTimer = null;
export function debounce(callback, duration, isFirstExecution) {
return function (...args) {
let ctx = this;
const delay = function () {
debounceTimer = null;
console.log('定时器函数执行了')
if (!isFirstExecution) callback.apply(ctx, args);
};
let executeNow = isFirstExecution && !debounceTimer;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(delay, duration);
if (executeNow) callback.apply(ctx, args);
};
};
// isFirstExecution为true时只执行第一次,为false时只执行最后一次
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/Yukinoshita_kino/article/details/117566902
深拷贝和浅拷贝
浅拷贝:复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存;当拷贝的新对象发生改变时,原对象也会发生相同的改变,也就是说,浅拷贝会影响原来的元素
var arr = [1,2,3]
var newarr = arr;
newarr[1] = 5;
console.log(arr,newarr);//[1, 5, 3],[1, 5, 3]
深拷贝:只拷贝内容,两个对象拥有不同的地址,当拷贝出来的对象发生改变时,原对象内容不会改变,两者互不影响
//递归
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj; // 非对象类型直接返回
}
const copy = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (typeof obj[key] === 'object') {
copy[key] = deepCopy(obj[key]);
}else{
copy[key] = obj[key]
}
}
return copy;
//JSON.stringify() JSON.parse()方法
const copy = JSON.parse(JSON.stringify(obj))
//使用js库lodash中的_.cloneDeep()
bind、call、apply的区别
1、相同点
三个都是用于改变this指向;
接收的第一个参数都是this要指向的对象;
都可以利用后续参数传参。
2、不同点
call和bind传参相同,多个参数依次传入的;
apply只有两个参数,第二个参数为数组;
call和apply都是对函数进行直接调用,而bind方法不会立即调用函数,而是返回一个修改this后的函数。
箭头函数与普通函数的区别
1、外形不同:箭头函数使用箭头定义,普通函数中没有。
2、 箭头函数全都是匿名函数:普通函数可以有匿名函数,也可以有具名函数
3、箭头函数不能用于构造函数:普通函数可以用于构造函数,以此创建对象实例。
4、箭头函数中 this 的指向不同:在普通函数中,this 总是指向调用它的对象,如果用作构造函数,它指向创建的对象实例。
5、箭头函数不具有 arguments 对象:每一个普通函数调用后都具有一个
arguments 对象,用来存储实际传递的参数。但是箭头函数并没有此对象。
6、其他区别:箭头函数不具有 prototype 原型对象。箭头函数不具有 super。
箭头函数不具有 new.target
Webpack
模块化开发、代码压缩
常用loader(loader用于加载某些资源文件
css-loader读取 合并CSS 文件
style-loader把 CSS 内容注入到 JavaScript 里
sass-loader 解析sass文件
url-loader将文件转换为base64 URI。
vue-loader处理vue文件。
Vite
优点:1.使用 esbuild 对依赖进行预构建,esbuild 的打包速度很快。
2.按需加载。只需要在浏览器请求源码时进行转换并按需提供源码,根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。
3.vite 使用 http 缓存来加速页面的重新加载,源码模块会进行协商缓存,依赖模块会进行强缓存。
localStorage/sessionStorage/cookie
sessionStorage为临时保存,浏览器关闭则失效; localStorage为永久保存.
localStorage / sessionStorage都遵守同源(域名+协议+端口 相同)策略。
解决跨域
jsonp跨域
document.domain + iframe 跨域
nodejs中间件代理跨域
后端在头部信息里面设置安全域名