苏州高端模板建站,音乐版权购买网站,广州市学校网站建设公司,网站开发做网站1. react 和 vue的区别 还有jquery#xff1f;
#xff08;1#xff09; jquery 和 vue、react 的区别#xff1a; vue 和 react : 数据和视图分离 以数据驱动视图#xff0c;只关心数据变化 dom 操作被封装#xff08;数据驱动#xff09;
jquery#xff1a;依靠 do…1. react 和 vue的区别 还有jquery
1 jquery 和 vue、react 的区别 vue 和 react : 数据和视图分离 以数据驱动视图只关心数据变化 dom 操作被封装数据驱动
jquery依靠 dom 操作去组合业务逻辑事件驱动
2React 和 Vue 变化都是基于js前端框架
· 两者本质区别
1. vue 本质是 MVVM 框架由MVC发展而来
2.React本质是前端组件化框架由后端组件化发展而来
· 模版的区别
1. Vue-使用模版最初由Angular提出
2. React-使用JSX
3. 模版语法上更倾向于JSX
4. 模版分离上更倾向于Vue (React 模版与JS混在一起未分离)
· 组件化的区别
1. React 本身就是组件化没有组件化就不是 React
2. Vue 也支持组件化不过是在MVVM上扩展
3. 对于组件化更倾向于 React 做的彻底而清新
相同点
1. 都支持组件化
2. 都是数据驱动视图
2. TS 和 JS 的区别 TS的好处
TypeScript 是 JavaScript 类型超集支持 ES6 语法支持面向对象编程的概念如类、接口、基础 和 泛型等。
TypeScript 特性
类型批注和编译时类型检测在编译时批注变量类型类型推断ts 中没有批注变量类型会自动推断变量的类型类型擦除在编译过程中批注内容和接口会在运行时利用工具擦除接口ts 中用接口来定义对象类型枚举用于取值被限定在一定范围内的场景Mixin可以接受任意类型的值泛型编程写代码时使用一些以后才指定的类型名字空间名字只在该区域内有效其他区域可重复使用该名字而不冲突元组元组合并了不同类型的对象相当于一个可以装不同类型数据的数组 3. TS 一些常用的类型
typescript 数据类型
boolean 布尔类型number 数字类型string 字符串类型array 数组类型tuple 元组类型enum 枚举类型any 任意类型null 和 undefined 类型void 类型nerver 类型object 类型
面经一
1对低代码的理解
低代码 是借助低代码工具的情况下开发人员编写少量代码快速开发出企业级应用系统并帮助企业团队进行数字化转型。低码开发平台借助一整套功能组件功能分类包括数据表、工作流、自动化、自定义API、图表视图、脚本、拓展包、权限设置等内容。开发人员可利用这些内置功能高效开发出新的流程和系统软件。低代码开发平台还有一个显著特征就是利用“拖拉拽”的可视化、图形化的开发环境高效实现系统开发。
2对路由守卫的理解有哪些怎么设置作用是什么
路由守卫钩子函数执行输出顺序
全局前置守卫 beforeEach路由独享守卫 beforeEnter组件路由守卫 beforeRouterEnter此时this并不指向该组件实例全局解析守卫 beforeResolve全局后置守卫 afterEach组件生命周期 beforeCreate - create - beforeMount - mounted组件路由守卫 beforeRouterEnter 的 next 回调
vue的路由守卫包括
全局路由守卫 前置路由守卫、全局路由守卫 钩子函数顺序beforeEach、beforeResolve、afterEach
组件路由守卫: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
路由独享守卫
export default new VueRouter({routes: [{path: /,name: home,component: Home,beforeEnter: (to, from, next) {// ...}}]
})
3权限的操作动态路由
4你觉得公司开发一个项目和大学课程上有什么区别
5组件之间通信
vue 组件之前通信
父子组件之间的通信、兄弟组件之间的通信祖孙与后代组件之间的通信非关系组件间之间的通信
组件间通信的方案
通过 props 传递通过 $emit 触发自定义事件使用 refEventBus 中央事件总线parent 或 rootattrs 与 listenersProvide 与 InjectVuex
react 组件之间通信
父组件向子组件传递子组件向父组件传递兄弟组件之间的通信父组件向后代组件传递非关系组件传递
6父子传值和vuex的区别和应用场景
父子传值通过props 属性来实现父组件通过props将数据传递给子组件子组件接收并使用这些数据。
vuex 全局状态管理 适用于大型复杂应用程序中共享和管理状态
7100张图片需要加载怎么优化图片懒加载
1.延迟加载初始页面加载时只加载可是区域内的图片其余图片暂不加载。
2.监听页面滚动监听用户滚动事件当用户滚动到一个图片的位置时再加载该图片。
3.设置占位符在图片未加载时 使用一个占位符比如一个小的loading动画或者灰色方框代替
4.图片懒加载属性将图片的src属性替换成一个自定义属性比如data-src并将实际图片地址存储在该属性中。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleLazy Loading Images/titlestyle.image-container {display: flex;flex-wrap: wrap;}.image-item {width: 200px;height: 200px;margin: 10px;border: 1px solid #ccc;}/style
/head
bodydiv classimage-container idimageContainer!-- 占位符 --div classimage-itemdiv classplaceholder/div/div!-- 其他图片 --div classimage-itemimg classlazy-image data-srcimage1.jpg altImage 1/divdiv classimage-itemimg classlazy-image data-srcimage2.jpg altImage 2/div!-- ... 其他图片 --/divscriptdocument.addEventListener(DOMContentLoaded, function() {const lazyImages document.querySelectorAll(.lazy-image);function lazyLoad() {lazyImages.forEach(image {if (image.offsetTop (window.innerHeight window.pageYOffset)) {image.src image.dataset.src;image.classList.remove(lazy-image);}});}lazyLoad();document.addEventListener(scroll, lazyLoad);window.addEventListener(resize, lazyLoad);});/script
/body
/html图片懒加载的实现方式 8怎么获取图片是不是在可视区域内有哪些方法 9创建一个对象的原理如果返回的不是对象而是一个数字呢 10xss攻击
XSS 跨站脚本攻击 存储型 反射型 DOM型
CSRF 跨域请求伪造
SQL 注入攻击
存储型
攻击者将恶意代码提交到目标网站的数据库中用户打开目标网站时网站服务端将恶意代码从数据库取出拼接在 HTML 中返回给浏览器用户浏览器接收到响应后解析执行混在其中的恶意代码也被执行恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作
反射型
攻击者构造出特殊的 URL其中包含恶意代码用户打开带有恶意代码的 URL 时网站服务端将恶意代码从 URL 中取出拼接在 HTML 中返回给浏览器用户浏览器接收到响应后解析执行混在其中的恶意代码也被执行恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作
DOM型
攻击者构造出特殊的 URL其中包含恶意代码用户打开带有恶意代码的 URL用户浏览器接收到响应后解析执行前端 JavaScript 取出 URL 中的恶意代码并执行恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作
CSRF 跨站请求伪造攻击者诱导受害者进入第三方网站在第三方网站中向被攻击网站发送跨站请求。
阻止不明外域的访问 同源检测Samesite Cookie提交时要求附加本域才能获取的信息 CSRF Token双重Cookie验证
11事件代理和proxy为什么要有事件代理
事件代理把一个元素响应事件click、keydown .......的函数委托到另一个元素
事件流都会经过三个阶段捕获阶段 - 目标阶段 - 冒泡阶段而事件委托就是在冒泡阶段完成
事件委托会把一个或者一组元素的事件委托到它的父层或者更外层元素上真正绑定事件是外层元素而不是目标元素。
当事件响应到目标元素上时会通过时间冒泡机制从而触发它的外层元素绑定事件然后在外层元素上去执行函数。
12为什么选前端为什么不选后端或者算法
13有没有实习过主要做什么工作 vuex 全局事件总线 state 用来存放共享变量的地方getter (state 中的计算属性) 用来获得共享变量的值mutation 用来存放修改 state 的值action 用来存放修改 state 的方法但是 action 是在 mutations 的基础上进行的。
面经二
金山效率真的高两天前一面昨天通知二面
1自我介绍
2项目相关
3学过ts吗用过ts吗
4学过Vue3吗
5讲讲Vue2和Vue3的区别 1.vue2和vue3的双向数据绑定原理发生了改变。
vue2 双向数据绑定是利用ES5中的一个API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue2的双向数据绑定原理通过object.defineProperty中的set方法来实现数据劫持但是无法监听数组内部的数据变化
vue3 使用ES6语法的proxy对象来实现双向数据绑定的可以检测到数组内部数据的变化。
Proxy用于修改某些操作的默认行为相当于在目标对象之前架设一层拦截外部所有的访问都必须先通过这层拦截因此提供了一种机制可以对外部的访问进行过滤和修改。
2. vue3支持碎片化Fragments
// vue2
templatediv classform-elementh2 {{ title }} /h2/div
/template// vue3
templatediv classform-element/divh2 {{ title }} /h2
/template
3. Composition API
Vue2 与vue3 最大的区别是vue2使用选项类型api对比vue3合成型api。
旧得选项型api在代码里分割了不同得属性data,computed,methods等
4. 建立数据data
vue2-把数据放入data属性中
export default {props:{title: String},data(){return {username: ,password: }}
} 在Vue3.0 需要使用一个新的setup() 方法次方法在组件初始化构造时触发。
6vue 的双向绑定
Vue 是双向数据绑定的框架双向数据绑定由三个重要部分构成
数据层Model应用的数据及业务逻辑视图层View应用的展示效果各类UI组件业务逻辑层ViewModel框架封装的核心它负责将数据与视图关联起来 1. new Vue() 首先执行初始化对 data 执行响应函处理这个过程发送Observe中
2. 同时对模版执行编译找到其中动态绑定的数据从 data 中获取并初始化视图这个过程发生在 Compile 中
3. 同时定义一个更新函数和 Watcher将来对应数据变化时 Watcher 会调用更新函数
4. 由于 data 的某个 key 在一个视图中可能出现多次所以每个 key 都需要一个管家 Dep 来管理多个 watcher
5. 将来data中数据一旦发生变化会首先找到对应的 dep通知所有 Watcher 执行更新函数
7了解哪些设计模式
单例模式工厂模式策略模式代理模式中介者模式装饰者模式
8观察者模式和发布订阅模式的区别是什么
观察者模式定义了对象间一种一对多的依赖关系当一个对象的状态发生改变时所有依赖于它的对象都将得到通知并自动更新。 发布订阅模式是一种消息方式消息的发送者发布者不会将消息直接发送给特定的接受者订阅者。而是将发布的消息分为不同的类别无需了解哪些订阅者如果有的话可能存在。
同样的订阅者可以表达对一个或者多个类别的兴趣只接收感兴趣的消息无需了解哪些发布者存在。 9html渲染的过程
解析HTML生成DOM树解析CSS生成CSSOM将DOM树和CSSOM树结合生成渲染树Render TreeLayout回流根据生成树的渲染树进行回流Layout得到节点的几何信息位置、大小Painting重绘根据渲染器以及回流得到的集合信息得到节点的绝对像素Display将像素发送GPU展示在页面上
10Dom树中的所有结构都会在渲染树中显示吗 Dom 树 11实习过程中遇到的协作上的问题有哪些
12为什么选择前端
13如何评判一个前端项目的好坏 14前端性能的衡量指标 vue 的性能优化 1.编译优化 不要把所有数据都放在data中 v-for 时给每个元素绑定事件用事件代理 keep-alive 缓存组件 尽可能拆分组件提高复用性、维护性 key 值保证唯一 合理使用路由懒加载异步组件 数据持久化存储的使用尽量用防抖、节流优化 2.加载优化 按需加载 内容懒加载 图片懒加载 3.用户体验 骨架屏 4.SEO优化 预渲染 服务端 ssr 5. 打包优化 CDN 形式加载第三方模块 多线程打包 抽离公共文件 6. 缓存和压缩 客户端缓存、服务端缓存 服务端 Gzip 压缩
15
面经三
1水平垂直居中分别都说出两种 2block和inline的区别
block块级元素
inline行内元素 block 特点 独占一行可以设置height,width,padding,margin一般情况下可以包含其他内联元素或者块级元素宽度缺省时默认为100%占满和整个父级元素的宽度 inline 特点 不会换行连续排列width 和 height 属性将不起作用。 垂直方向的内边距padding、外边距margin以及边框border会被应用但是不会把其他处于 inline 状态的盒子推开。水平方向的内边距padding、外边距margin以及边框border会被应用而且也会把其他处于 inline 状态的盒子推开。行内元素只能包含数据和其他行内元素默认为基线对齐即text-align baseline inline-block 特点 width,height,margin,padding,border都起作用但是不会换行是上述两种类型的综合 内联块级元素标签 img、input、td、select、textarea、label,button 3选择器的优先级
全局选择器通配符*标签选择器body, div, p, ul, li类选择器.
! important 行内样式 ID选择器 Class选择器 标签选择器 通配符
4BFC讲一下创建条件作用
BFC 块级格式化上下文
内部的盒子会在垂直方向上一个接一个的放置对于同一个BFC的俩个相邻的盒子的margin会发生重叠与方向无关每个元素的外边距与包含块的左边界相接触从左到右即使浮动元素也是如此BFC的区域不会与float的元素区域重叠计算BFC的高度时浮动子元素也参与计算BFC就是页面上的一个沟里的独立容器容器里面的子元素不会影响到外面的元素。
触发 BFC 的条件包含不限于
根元素即HTML元素浮动元素float 值为left、rightoverflow值 不为 visible为 auto、scroll、hiddendisplay的值 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-gridposition 的值为 absolute或fixed
5relative和absolute的区别
position 的属性值
1. Absolute绝对定位是相对于最近的且不是static定位的父元素来定位
2. Fixed绝对定位是相对于浏览器窗口来定位是固定的不会根屏幕一起滚动
3. Relative相对定位是相对于其原本的位置来定位的
4. Static默认值没有定位。
5. Inherit继承父元素position值。
6判断js数据类型哪些方法 typeof() instanceof() constructor Object.prototype.toString.call() 7防抖节流手撕
防抖把触发非常频繁的时间合并成一次去执行。 节流事件按照一段时间的间隔来进行触发。 8读代码输出题关于this指向的还有settimeoutasync等同步任务、微任务执行顺序之类的
9localstorage和sessionstorage的区别
10同源策略以及跨域解决方案
11cora跨域是在后端还是前端设置
12项目中使用过什么跨域方法
13CSRF攻击说一下还有什么其他的攻击
14TCP三次握手和四次挥手为什么是三次握手而不是两次为什么是四次挥手而不是三次
15为什么项目不用vue3做
16webpack了解嘛描述一下
17vue的生命周期以及ajax请求在哪个周期发送
面经四
1有没有听说过事件循环并简述事件循环的作用和机制 JS 是一个单线程的脚本语言 主线程 执行栈 任务队列 宏任务 微任务 主线程先执行同步任务然后才去执行任务队列里的任务如果在执行宏任务之前有微 任务那么要先执行微任务 全部执行完之后等待主线程的调用调用完之后再去任务队列中查看是否有异步任务 这样一个循环往复的过程就是事件循环 2有没有听说过跨域跨域是如何产生的如何解决
3有没有听说过闭包以及闭包的作用和应用场景 4简述一下原型链和原型的概念以及作用
5简述一下浏览器从输入url到显示页面的过程
6简述三次握手的过程
7有没有听说过回流与重绘重排与重绘什么时候会触发回流或重绘
8有哪些比较印象深刻的项目答的实习项目和社团内部的一个项目
9在社团项目中是如何参与工作的以及做了哪些工作
10简述一下实习中为什么要对项目进行重构
11在重构项目前进行了哪些工作
12在项目中如何判断设备类型
13如何根据设备类型去进行适配用的rem方案
14为什么使用vue进行重构有哪些考量
15重构时使用的是vue2还是vue3
16有没有了解过vue的diff算法简述一下 17vue-router的hashRouter和historyRouter有什么区别
18如何理解MVVM框架
数据层Model应用的数据及业务逻辑视图层View应用的展示效果各类UI组件业务逻辑层ViewModel框架封装的核心它负责将数据与视图关联起来
19react有哪些生命周期 20react的优化过程中如何对重复渲染进行处理答的用useMemo
21react的class组件中如何优化重复渲染
22有没有了解过react fiber
23如何去理解虚拟dom
24如何理解webpack中的loader和plugin这两个的作用是什么
25对于react和vue两个框架优缺点的个人理解
面经五
1css的flex布局属性有哪些
css 设置为 flex 布局以后子元素的float、clear和vertical-align 属性将失效。
容器的属性有6个分别是
flex-direction flex-wrap flex-flow justify-content align-items align-content
① flex-direcion属性
作用控制主轴的方向 默认值row
flex-direction: row | row-reverse | column | column-reverse;
② flex-wrap属性
作用默认情况下项目都排在一条线又称轴线上。flex-wrap属性定义如果一条轴线排不下如何换行。 默认值nowrap
flex-wrap: nowrap | wrap | wrap-reverse;
③ flex-flow属性
作用该属性是flex-direction属性和flex-wrap属性的简写形式
默认值row nowrap
④ justify-content属性
作用定义项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
默认值flex-start
⑤ align-items属性
作用定义项目在交叉轴上如何对齐。
align-itemsflex-start | flex-end | center | baseline | stretch
默认值flex-start
26个卡片每行3个flex如何实现
div classcard-containerdiv classcardCard 1/divdiv classcardCard 2/divdiv classcardCard 3/divdiv classcardCard 4/divdiv classcardCard 5/divdiv classcardCard 6/div
/div
.card-container {display: flex;flex-wrap: wrap;justify-content: space-between;
}
.card {width: 30%;margin-bottom: 10px;background-color: #f0f0f0;padding: 10px;
}
.card-container是一个容器它被设置为flex容器允许子元素进行弹性布局。flex-wrap: wrap;允许子元素在需要时换行确保在小屏幕上也能正常显示。justify-content: space-between;将卡片在容器内水平分布两端对齐。
360个卡片呢 你刚刚方法可能不行换60个呢 4伪类的了解
伪类是css中的一种选择器它允许在特定的状态或条件下选择元素并为其应用样式。伪类通常以冒号(:) 开头用于对元素的特定状态或行为进行定位和样式化。
选择器描述:hover鼠标悬停时应用样式。常用于链接和交互元素。:active元素被激活例如按钮被点击时应用样式。:focus元素获得焦点时应用样式通常用于表单元素。:visited已访问链接的样式。:nth-child(n)选择父元素下的第n个子元素。:nth-of-type(n)选择特定类型的父元素下的第n个子元素。:not(selector)排除特定选择器的元素。:first-child选择父元素下的第一个子元素。:last-child选择父元素下的最后一个子元素。:first-of-type选择父元素下特定类型的第一个子元素。
5浏览器输入URL整个过程
查询该域名的ip地址 下载浏览器本地缓存如果浏览器有本地缓存如果浏览器由本地缓存且未过期则返回结果 否则向上一级 DNS 服务器域名系统查询直到DNS根服务器浏览器和服务器建立 TCP 连接浏览器发送 HTTP 请求三次握手服务器通过 HTTP 响应把首页的html文件发送给浏览器TCP释放连接四次挥手浏览器首页解析 html 文件 并展示给用户
6http2.0,1.1,1.0,3.0有啥区别吗 7https加密过程
1. 浏览器请求 URL找到服务器向服务器发送请求。服务器将自己的整数包含服务器公钥、对称加密算法种类以及其他相关信息返回给浏览器。
2. 浏览器检测CA证书是否可依赖确认证书有效。
3. 如果不是给服务器发警告询问是否可以继续使用。
4. 如果是浏览器使用公钥加密一个随机对称秘钥包含加密的 URL 一起发送给服务器。
5. 服务器用自己的密钥解密浏览器发送的钥匙然后用这把对称加密的钥匙给浏览器请求的 URL 连接解密。
6. 服务器用浏览器发送的对称钥匙给请求的网页加密浏览器使用相同的钥匙就可以解密网页。
8页面渲染有重绘 重排这俩有了解吗 9强缓存和协商缓存 10http的Keep-Alive 11JS原型链 原型就是一个普通对象它是为构造函数的实例共享属性和方法所有实例中引用的原型都是同一个对象。 使用 prototype 可以把方法挂在原型上内存只保存一份。 __proto__可以理解为指针实例对象中的属性指向了构造函数的原型prototype。 12你对前端工程化的了解
13webpack的一些原理
14babel的了解
15poltillbabel的 词语不知道怎么拼
16webpack的tree-Dom的了解
17网络安全的xsscsrf
18https为了防御什么攻击
19前端js排序底层是哪一种排序
20js 中 sort 函数的底层实现机制
js中的sort()方法用于对数组元素进行排序V8 引擎 sort 函数只给出了两种排序 InsertionSort 和 QuickSort数组长度小于等于 22 的用插入排序 InsertionSort比22大的数组则使用快速排序 QuickSort。
21文档中有敏感词怎么办
22你的项目经验有webreactvue哪个用得熟一点
23有了解vue的原理吗
24说一下数据的双向绑定
通过数据劫持和发布订阅者模式来实现同时利用 Object.defineProperty() 劫持各个属性的 setter 和 getter在数据发生改变的时候发布消息给订阅者触发对应的监听回调渲染视图也就是说数据和视图时同步的数据发生改变视图跟着发生改变视图改变数据也会发生改变。
第一步需要 observer 的数据对象进行递归遍历包括子属性对象的属性都加上 setter
和 getter。
第二步compile 模板解析指令把模板中的变量替换成数据然后初始化渲染视图同时
把每个指令对应的节点绑定上更新函数添加订阅者如果数据变化收到通知更新视图
第三步Watcher 订阅者是 Observer 和 Compile 之间的通信桥梁作用 1.在自身实例化的时候在订阅器内添加自身 2.自身要有一个 update()方法 3.等待属性变动时调用自身的 update 方法触发 compile 这种的回调
第四步MVVM 作为数据绑定的入口整合了 observer、compile 和 watcher 三者通
过 observer 来监听自己的数据变化通过 compile 解析模板指令最后利用 watcher 把
observer 和 compile 联系起来最终达到数据更新视图更新视图更新数据更新的效果。
25vue2 or vue3
26vue3对2来说 架构上做的什么变化
27状态管理这块的理解或者某个状态管理的理解用来解决什么问题
28学习或者项目中遇到比较难的问题自己怎么解决的
29为啥不用socket这种方式呢
30还有什么其他比较难得问题吗
31数据有嵌套怎么办呢
使用ES6进行对象解构。
最基本的结构 在对象中提取某个字段
const user {id: 123,name: hehe
};
const {name} user;
console.log(name); //prints: hehe
解构并使用别名 有时接口定义的字段往往带有下划线但我们的前端更便好于驼峰式命名那么可以使用别名(rename)
const user {id: 123,nick_name: hehe
};
const {nick_name: nickName} user;
console.log(nickName); //prints: hehe解构嵌套对象
const user {id: 123,name: hehe,education: {degree: Masters}
};
const {education: {degree}} user;
console.log(degree); //prints: Masters
32数据比较多渲染成table比较卡顿有没有遇到这种问题
33前端如何做大数据量展示的优化
前端如何进行性能优化 1. 编码优化 不要把所有数据都放在 data 中 v-for 时给每个元素绑定事件用事件代理 keep-alive 缓存组件 尽可能拆分组件提高复用性、维护性 key 值要保证唯一 合理使用路由懒加载异步组件 数据持久化存储的使用尽量用防抖、节流优化 2. 加载优化 按需加载 内容懒加载 图片懒加载 3. 用户体验 骨架屏 4. SEO 优化 预渲染 服务端渲染 ssr 5. 打包优化 CDN 形式加载第三方模块 多线程打包 抽离公共文件 6. 缓存和压缩 客户端缓存、服务端缓存 服务端 Gzip 压缩 34问问了base、技术栈、产品
面经六
1讲一下闭包
2怎么封装一个轮播图组件
1.基本组件拆分和布局
2.自动轮播
3.悬停控制启动和停止
4.手动控制切换
5.销毁定时器
6.抽取相关的参数
解决项目中 问题一轮播图实现
① 获取轮播图数据虽然找到接口了但是由于XHR请求在浏览器端会有跨域的限制不能直接请求QQ官网的接口地址需要做一层Proxy代理 获取响应数据 获取轮播图数据使用BetterScroll的基本配置项监听slideWillChange事件
onMounted(() {const sliderVal slider.value new BScroll(wrapperRef.value, {click: true,scrollX: true,scrollY: false,momentum: false,bounce: false,probeType: 2,slide: true})sliderVal.on(slideWillChange, (page) {currentPageIndex.value page.pageX})}) 掘金方法
1.数据驱动动画 首先把轮播图播放动画当中能用到的状态变量进行初始化。
// main.vue
data(){return {reversing:false,//控制动画播放到首尾时无缝跳转的开关swiperItemCount:0,// 初始化传入的轮播图个数index:0 // 控制轮播图当前位置的索引}
},
computed:{scrollItemCount(){ // 内容实际存在的图片个数return this.swiperItemCount2 // 组件初始化以后需要复制传进来的首尾两张图片到指定位置所以这里需要加上2}
}2. 通过更改index索引值以驱动图片的位置移动这样就有了视觉上动画的效果。 watch: {index(newIndex, oldIndex) {const endIndex this.scrollItemCount - 1if (newIndex endIndex newIndex oldIndex) {setTimeout(() {this.reversing truethis.index 1setTimeout(() {this.reversing false}, 100)}, this.duration)} else if (newIndex 0 newIndex oldIndex) {setTimeout(() {this.reversing truethis.index endIndex - 1setTimeout(() {this.reversing false}, 100)}, this.duration)}},}这里通过观测动画播放的当前位置这个变量我们在相应的时机更改它的值来达到整个包装容器的瞬间移动这样也就产生了图片播放连续的动画效果了。
3场景提一个长列表通过滚动加载更多内容怎么优化整个过程 分页加载 将列表分成多个页面每次只加载当前页面的内容当用户滚动到底部时再加载下一页的内容。这样可以减轻一次性加载大量数据的压力。 虚拟列表 只渲染用户可见区域内的列表项对于不在视口中的项只在需要时才进行渲染。这可以显著减少DOM元素的数量提升性能。 节流和防抖 使用节流和防抖技术来控制滚动事件的频率避免在短时间内触发大量的数据加载请求。 异步加载 使用异步加载来确保页面在加载数据时不会被阻塞。可以使用async/await或者Promise来管理异步操作。 懒加载 对于非必要的资源如图片等可以采用懒加载技术只在用户接近可见区域时才加载。 缓存 如果数据是静态的或者相对稳定的可以考虑将部分数据进行缓存减少重复请求。 分块加载 将数据分成多块进行加载而不是一次性加载全部内容。这可以减少单次请求的数据量提升加载速度。 减少不必要的重绘和回流 在操作DOM时尽量批量处理避免频繁的对DOM进行修改以减少浏览器的重绘和回流。 优化图片和媒体资源 使用适当的图片格式和大小以及懒加载技术来优化图片的加载。 使用Web Workers 将一些计算密集型的任务放到Web Workers中进行处理以保持主线程的流畅性。 监测性能指标 使用工具监测页面性能及时发现和解决性能瓶颈。 利用浏览器缓存 使用合适的HTTP缓存策略确保重复请求的数据可以从缓存中获取。 综合使用以上策略可以有效地优化长列表的滚动加载过程提升页面的性能和用户体验。根据具体的场景和需求可以选择合适的优化方法。 如何实现呢
1.实现一个监听器Observer用来劫持并监听所有属性如果有变动的就通知订阅者。
2.实现一个订阅者Watcher每一个Watcher都绑定一个更新函数watcher可以收到属性的变化通知并执行相应的函数从而更新视图。
3.实现一个解析器Compile可以扫描和解析每个节点的相关指令v-modelv-on等指令如果节点存在v-modelv-on等指令则解析器Compile初始化这类节点的模板数据使之可以显示在视图上然后初始化相应的订阅者Watcher。
设置use-pull-up-load 进行下拉框加载
onMounted(() {const scrollVal scroll.value new BScroll(rootRef.value, {pullUpLoad: true,observeDOM: true,click: true})scrollVal.on(pullingUp, pullingUpHandler)async function pullingUpHandler() {if (preventPullUpLoad.value) {scrollVal.finishPullUp()return}isPullUpLoad.value trueawait requestData()scrollVal.finishPullUp()scrollVal.refresh()isPullUpLoad.value false}
4如何实现图片懒加载
① 图片懒加载的实现原理
实现过程中注意优化的点
避免重复设置 src。滚动事件监听添加节流。加载图片的时间点可以适当提前。避免出现布局抖动。响应式图片要额外处理。seo 不友好的问题。
vue-lazy是基于vue下的图片懒加载库
ulli v-forimg in listimg v-lazyimg.src //li
/ul
② 图片懒加载的实现方法
原理在没有可视区域的图片暂时不加载图片等进入可视区域后再加载图片这样可以减少初始页面加载
方案一img的loading属性设为“lazy”。lazy 告诉用户代理推迟图片加载直到浏览器认为其需要立即加载时才去加载。img srcxxx.jpg loadinglazy /
方案二通过offsetTop来计算是否在可视区域内。
方案三通过 getBoundingClientRect 来计算是否在可是区域内。
把获取图片元素 offsetTop 改成 getBoundingClientRect 方法获取离可视区顶端的距离。
方案四通过IntersectionObserver来判断是否在可视区域内。
5webpack 的操作流程
从启动到结束会依次执行以下三大步骤
初始化流程从配置文件和 Shell 语句中读取与合并参数并初始化需要使用的插件和配置插件等执行环境所需要的参数编译构建流程从 Entry 发出针对每个 Module 串行调用对应的 Loader 去翻译文件内容再找到该 Module 依赖的 Module递归地进行编译处理输出流程对编译后的 Module 组合成 Chunk把 Chunk 转换成文件输出到文件系统
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);let htmlWebpackPlugin new HtmlWebpackPlugin({// 虚拟的html文件名 index.htmlfilename: index.html,// 虚拟html的模板为 src下的index.htmltemplate: path.resolve(__dirname, ./src/index.html)
});module.exports {// 开发模式mode: development,// 配置入口文件entry: ./src/index.tsx,// 出口文件目录为根目录下dist, 输出的文件名为mainoutput: {path: path.resolve(__dirname, dist),filename: main.js},// 配置开发服务器, 并配置自动刷新devServer: {// 自动压缩代码compress: true,// 服务端口为1208port: 1208,// 自动打开浏览器open: true,// 根目录下dist为基本目录static: path.join(__dirname, dist),},// 装载虚拟目录插件plugins: [htmlWebpackPlugin],module: {// 根据文件后缀匹配规则rules: [// 配置js/jsx语法解析{test: /\.(js|ts|jsx|tsx)$/,use: [{loader: esbuild-loader,options: {loader: tsx,target: es2015,},}]},{test: /\.scss$/,use: [style-loader, // creates style nodes from JS stringscss-loader, // translates CSS into CommonJSsass-loader // compiles Sass to CSS]},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},{test: /.(woff|woff2|eot|ttf|otf)$/i,type: asset/resource,},{test: /\.css$/,use: [// 将 JS 字符串生成为 style 节点style-loader,// 将 CSS 转化成 CommonJS 模块css-loader,],},]},resolve: {extensions: [.js, .jsx, .ts, .tsx],},
}
6loader和plugin区别
loader 是文件加载器能够加载资源文件并对这些文件进行一些处理诸如编译、压缩等最终一起打包到指定的文件中。运行在打包文件之前plugin 赋予了 webpack 各种灵活的功能例如打包优化、资源管理、环境变量注入等目的是解决 loader 无法实现的其他事。在整个编译周期都起作用 7用的什么路由模式
8hash模式的特点
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时浏览器并不会重新发起请求而是会触发 onhashchange 事件。 hash模式和history模式的区别 1.hash 的路由地址上有#号history 模式没有 2.在做回车刷新的时候hash 模式会加载对应页面history 会报错 404 3.hash 模式支持低版本浏览器history 不支持因为是 H5 新增的 API 4.hash 不会重新加载页面单页面应用必备 5.history 有历史记录H5 新增了 pushState 和 replaceState()去修改历史记录并 不会立刻发送请求 6.history 需要后台配置 9了解过栅栏布局吗grid网格
设置 displaygrid/inline-grid 的元素就是网格布局容器这样就能发出浏览器渲染引擎的网格布局算法。
display属性 displaygrid 则该容器是一个块级元素 display: inline-grid 则容器元素为行内元素
grid-template-colums 属性grid-template-rows属性
grid-template-columns 属性设置列宽grid-template-rows 属性设置行高
10ES6新特性
11内存泄漏 12怎么在一个盒子中加入一模一样的上千个子元素怎么优化速度
13TCP三次握手
