说一下 HTML5 drag api dragstart: 事件主体是被拖放元素,在开始拖放被拖放元素时触发。 darg: 事件主体是被拖放元素,在正在拖放被拖放元素时触发。 dragenter: 事件主体是目标元素,在被拖放元素进入某元素时触发。 dragover: 事件主体是目标元素,在被拖放在某元素内移动时触发。 dragleave: 事件主体是目标元素,在被拖放元素移出目标元素是触发。 drop: 事件主体是目标元素,在目标元素完全接受被拖放元素时触发。 dragend: 事件主体是被拖放元素,在整个拖放操作结束时触发。 web 性能优化 降低请求量: 合并资源,减少HTTP请求数,minify/gzip 压缩, webP,lazyLoad。 加快请求速度: 预解析 DNS,减少域名数,并行加载,CDN分发。 缓存: HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage。 渲染: JS/CSS 优化,加载顺序,服务端渲染,pipeline。 浏览器缓存机制 缓存分为两种: 强缓存和协商缓存 强缓存相关字段有 e ...

国庆假期 好不容易回家。 从小就听这句话: 五岳归来不看山,黄山归来不看岳。 这不,天气晴朗,就计划着跟家人自驾去黄山,毕竟一直心驰神往已久。✌️ 准备工作住宿: 山脚下汤口镇漫心酒店,可以提供免费停车(附近停车场白天一百,过夜四百贵的吓人)食物: 自带好水和食物(毕竟山上的也老贵了)票务和索道: 小程序黄山旅游官方平台直接预约购买 门票: 190 上行索道: 90 下行索道: 80 上山大巴: 19其它: 山脚下买了个木质小拐杖(2块钱,爬山全程就靠它) 做好防晒 路线: 玉屏索道上行——迎客松——玉屏宾馆网红阳台——莲花新道(莲花峰)——莲花亭——鳌鱼峰——海心亭——光明顶——701电视台——散花精舍——黑虎峰——白鹅峰——白鹅岭站——云谷索道下行 翡翠谷情人谷因为2号下午就到了,所以下午闲着无事就上去逛一下,门票: 40。 可能是因为干旱, 整体水流不是很大,有几个拍照的点。 总的来说一般般吧,没有什么令人眼前一亮的感觉,就当是提前呼吸一下新鲜空气。 黄山早上6点起床(五点多就听到外面有人走过了), 6点半酒店出发去坐大巴。 排队进展检查核酸和行程码, 人很多基本 ...

网络中使用最多的图片格式有哪些JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小。在ps以jpeg格式存储时，提供11级压缩级别。 请简述CSS盒子模型一个css盒子从外到内可以分成四个部分:margin(外边距)，border (边框)，padding(内边距)，content(内容)。默认情况下，盒子的width和 height属性只是设置content(内容)的宽和高。盒子真正的宽应该是:内容宽度+左右填充+左右边距+左右边框盒子真正的高应该是:内容高度+上下填充+上下边距+上下边框 视频/音频标签的使用视频: <video src=””></video> src 需要播放的视频地址 width/height 设置播放视频的宽高，和 img 标签的宽高属性一样 autoplay 是否自动播放 controls 是否显示控制条 poster 没有播放之前显示的展位图片 loop 是否循环播放 perload 预加载视频(缓存)与 autoplay 相冲突，设置了 autoplay 属 性，perload 属性会 ...

秋天到，兴致来，这不趁着周末报名了露营。 活动时间：2022年9月17日 13:00 - 21:00地点：浙江省湖州市德清尊蓝山居度假酒店活动通行券 298元/人 第一天约上小伙伴，开着借来的车(第一次开新能源车)，从上海出发。 经过长途跋涉，终于顺利抵达。 体验了各个项目，偷偷摸了很多别人家的狗狗，也都太好看了叭。 如果不是太凉，还想跳下泳池扑腾两圈，哈哈哈哈！ 晚上观看露天电影，好不惬意(也就被叮了几个包而已)。 散伙时，开车去往莫干山附近订的名宿。 当然晚上离不开烧烤饮料，伴随着夜晚凉爽山风，嬉闹声，水流声，虫鸣声，离开了城市的喧嚣，这一刻只有放肆。 当然咯，民宿的环境也是超级棒👍 第二天大早上往山上溜达了一圈，有不少蝴蝶🦋，山林郁郁葱葱，清风徐徐。 回来吃上了老板娘亲自做的早饭，很丰盛啦！ 时间尚早，K歌时间到，鬼哭狼嚎一上午。 中午尝了一家土菜馆，风卷残云一顿收拾，舒服了… 下午就驱车去今天的重头戏——漂流点蓝天、白云、绿树、乡道、电驴 不断映入眼帘 第一次漂流没什么经验，在激情尖叫的同时，全程当个无情的舀水工… 结束后，果不其然全身湿透了，山风一吹，楼梯 ...

项目目前用的React版本是 17.0.2 react-redux负责状态管理，使用toolkit插件可以更加方便。 toolkit官网 1. 安装redux12npm install react-redux@latestnpm install @reduxjs/toolkit 2. 使用tookit 配置一个reduxStore 1234import { configureStore } from '@reduxjs/toolkit';export const store = configureStore({ reducer: {},}); 把store发布到react项目中 12345678910import { Provider } from 'react-redux';import { store } from './app/store';import App from './App'; ...

项目目前用的React版本是 17.0.2 React Hooks是什么？ Hooks是React 16.8.0版本增加的新特性/新语法 可以让你在函数组件中使用state以及其他的React特性 简单输入框，类组件和函数组件写法比较： 类组件123456789101112131415161718192021222324252627282930313233/** * @name 类组件*/import React from 'react';export default class Home extends React.Component { constructor(props) { super(props); this.state = { name: 'world' }; } componentDidMount() { console.log('组件挂载后要做的操作') } componentWillUnmo ...

项目目前用的React Router版本是 V5 原理 利用React.lazy与import()实现了渲染时的动态加载 利用Suspense来处理异步加载资源时页面应该如何显示的问题 利用React.loadable实现组件按需加载 React.lazy 通过lazy()api来动态import需要懒加载的组件 import的组件目前只支持export default的形式导出 123456789import { BrowserRouter as Router, Route } from 'react-router-dom';import {lazy } from 'react';//懒加载需要写成const Home = lazy(()=>import（'./Home'）)return ( <Router> <Route exact path="/" component={Home}/> & ...

项目目前用的React Router版本是 V5 快速开始 首先,安装create-react-app并用它创建一个新的项目 123npm install -g create-react-appcreate-react-app demo-appcd demo-app yarn 安装 React Routeryarn add react-router-dom@5.3.0 主要组件React Router中的组件主要分为三类: 路由器: 例如BrowserRouter和HashRouter 路由匹配器: 例如Route和Switch 导航: 例如Link, NavLink, Redirect 简单例子如下: 1234567891011121314151617// React 应用中的 App.js 文件import React from 'react';import { BrowserRouter, Route } from 'react-router-dom'import Home from './ ...

react脚手架配置代理总结 方法一 在package.json中追加如下配置 1"proxy": "http://localhost: 5000" 说明: 优点：配置简单，前端请求资源时可以不加任何前缀 缺点：不能配置多个代理 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该清求会转发给5000（优先匹配前端资源） 方法二 第一步：创建代理配置文件 1在src下创建配置文件：src/setupProxy.is //起名随意 编写setupProxy.js配置具体代理规则: 12345678910111213141516171819const proxy = require ('http-proxy-middleware')module. exports = function (app) { app.use( proxy('/api', { //api是需要转发的请求(所有带有/api前缀的请求都会转发给5000） target: & ...

1) react/vue中的key有什么作用?(key的内部原理是什么?)2) 为什么遍历列表时,key最好不要用index 虚拟DOM中key的作用 简单的说: key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用 详细的说: 当状态中的数据发生交化时,react会根据[新数据]生成[新的虚拟DOM]随后React进行[新虚拟DOM]与[旧虚拟DOM]的diff比较, 比较规则如下: 旧虚拟DOM中找到了与新虚拟DOM相同的key: 若虚拟DOM中内容没变, 直接使用之前的真实DOM 若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM 旧虚拟DOM中未找到与新虚拟DOM相同的key: 根据数据创建新的真实DOM, 随后渲染到页面 用index作为key可能会引发的问题 若对数据进行: 逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新 ==> 界面效果没问題，但效率低。 如果结构中还包含输入类的DOM: 会产生错误DOM更新 ===> 界面有问题 注意: 如果不存在对数据的逆序添加、逆序删除 ...