+ .space
+ .up
+ .down
+ .left
+ .right**系统修饰符**
+ .ctrl
+ .alt
+ .shift
+ .meta**鼠标按钮修饰符**
+ .left
+ .right
+ .middle
-
43、vue 事件中如何使用 event 对象?
- 获取事件对象，方法参数传递 $event 。注意在事件中要使用 $ 符号
<button @click="Event($event)">事件对象</button>
- 44、组件传值方式有哪些
- 父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值
- 子传父：子组件通过 this.$emit(‘fnName’,value) 来传递,父组件通过接收 fnName 事件方法来接收回调
- 其他方式：通过创建一个bus，进行传值
- 使用Vuex
-
45、vue 中子组件调用父组件的方法?
- 直接在子组件中通过 this.$parent.event 来调用父组件的方法。
- 在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了。
- 父组件把方法传入子组件中，在子组件里直接调用这个方法。
-
46、 如何让 CSS 只在当前组件中起作用？
在组件中的 style 前面加上 scoped -
47、如何获取 dom?
ref="domName" 用法：this.$refs.domName -
48、vue路由跳转
-
(一)声明式导航router-link
- 不带参数：
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name- 带参数：<router-link :to="{name:'home', params: {id:1}}"> <router-link :to="{name:'home', query: {id:1}}"> <router-link :to="/home/:id"> //传递对象 <router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>-
(二)this.$router.push()
- 不带参数：
this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'})- query传参1.路由配置： name: 'home', path: '/home' 2.跳转： this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) 3.获取参数 html取参: $route.query.id script取参: this.$route.query.id- params传参1.路由配置： name: 'home', path: '/home/:id'(或者path: '/home:id') 2.跳转： this.$router.push({name:'home',params: {id:'1'}}) 注意： // 只能用 name匹配路由不能用path // params传参数(类似post) 路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失 3.获取参数 html取参:$route.params.id script取参:this.$route.params.id- 直接通过path传参1.路由配置： name: 'home', path: '/home/:id' 2.跳转： this.$router.push({path:'/home/123'}) 或者： this.$router.push('/home/123') 3.获取参数： this.$route.params.id- params和query的区别 query类似 get，跳转之后页面 url后面会拼接参数，类似?id=1。 非重要性的可以这样传，密码之类还是用params，刷新页面id还在。 params类似 post，跳转之后页面 url后面不会拼接参数。-
(三)this.$router.replace()
- 用法同上
-
(四)this.$router.go(n)
- 向前或者向后跳转n个页面，n可为正整数或负整数
-
区别:
- this.$router.push
跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面 - this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面) - this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
- this.$router.push
-
-
49、Vue.js 双向绑定的原理
Vue.js 2.0 采用数据劫持（Proxy 模式）结合发布者-订阅者模式（PubSub 模式）的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器)
-
50、Computed和Watch的区别
-
computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的 属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
-
watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每 当监听的数据变化时都会执行回调进行后续操作。
-
运用场景：
- 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed的缓存特性,避免每次获取值时,都要重新计算。
- 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率, 并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
- 多个因素影响一个显示，用Computed；一个因素的变化影响多个其他因素、显示，用Watch;
-
Computed 和 Methods 的区别
- computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ，只要发生重新渲染，
- method 调用总会执行该函数
-
-
51、过滤器 (Filter)
- 在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤(格式化)数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示。
- 使用场景： 比如需要处理时间、数字等的的显示格式；
-
52、axios是什么
易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。 -
53、sass是什么？如何在vue中安装和使用？
sass是一种CSS预编译语言安装和使用步骤如下。
- 用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
- 在 webpack.config.js中配置sass加载程序。
- 54、Vue.js页面闪烁
Vue. js提供了一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下。
[v-cloak]{
display:none;
}
<div v-cloak>{{ title }}</div>
- 55、如何解决数据层级结构太深的问题
在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码:span 'v-text="a.b.c.d">, 可以使用vm.$set手动定义一层数据:vm.$set("demo"，a.b.c.d) - 56、vue常用指令
- v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
- v-bind 动态绑定 作用： 及时对页面的数据进行更改
- v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
- v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
- v-show 显示内容 （同angular中的ng-show）
- v-hide 隐藏内容（同angular中的ng-hide）
- v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
- v-else-if 必须和v-if连用
- v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
- v-text 解析文本
- v-html 解析html标签
- v-bind:class 三种绑定方法
- 对象型 ‘{red:isred}’
- 三元型 ‘isred?“red”:“blue”’
- 数组型 ‘[{red:“isred”},{blue:“isblue”}]’
- v-once 进入页面时 只渲染一次 不在进行渲染
- v-cloak 防止闪烁
- v-pre 把标签内部的元素原位输出
-
57、
$route和$router的区别- $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
- $router是“路由实例”对象包括了路由的跳转方法，钩子函数等
-
58、怎样理解 Vue 的单项数据流
- 数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解。
- 注意：在子组件直接用 v-model 绑定父组件传过来的 props 这样是不规范的写法，开发环境会报警告。
- 如果实在要改变父组件的 props 值可以再data里面定义一个变量，并用 prop 的值初始化它，之后用$emit 通知父组件去修改。
-
59、虚拟DOM是什么？有什么优缺点？
由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。- 优点：
- 1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，他的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
- 2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好 View-Model的 代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
- 3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
- 缺点：
- 1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
- 2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。
- 优点：
-
60、Vuex 页面刷新数据丢失怎么解决？
- 需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
- 推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。
-
61、Vuex 为什么要分模块并且加命名空间？
- 模块： 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能会变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
- 命名空间： 默认情况下，模块内部的 action、mutation、getter是注册在全局命名空间的 — 这样使得多个模块能够对同一 mutation 或 action 做出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced:true 的方式使其成为带命名的模块。当模块被注册后，他所有 getter、action、及 mutation 都会自动根据模块注册的路径调整命名。
-
62、vue 中使用了哪些设计模式？
- 1、工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。 - 2、单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。 - 3、发布-订阅模式。（vue 事件机制）
- 4、观察者模式。（响应式数据原理）
- 5、装饰器模式（@装饰器的用法）
- 6、策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。
- 1、工厂模式 - 传入参数即可创建实例
-
63、你都做过哪些 Vue 的性能优化？
这里只列举针对 Vue 的性能优化，整个项目的性能优化是一个大工程。- 对象层级不要过深，否则性能就会差。
- 不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
- v-if 和 v-show 区分使用场景
- computed 和 watch 区分场景使用
- v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
- 大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
- 防止内部泄露，组件销毁后把全局变量和时间销毁
- 图片懒加载
- 路由懒加载
- 异步路由
- 第三方插件的按需加载
- 适当采用 keep-alive 缓存组件
- 防抖、节流的运用
- 服务端渲染 SSR or 预渲染
-
64、Vue.set 方法原理
在两种情况下修改 Vue 是不会触发视图更新的。- 1、在实例创建之后添加新的属性到实例上（给响应式对象新增属性）
- 2、直接更改数组下标来修改数组的值。
- Vue.set 或者说是 $set 原理如下
因为响应式数据 我们给对象和数组本身新增了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性，首先会把新的属性进行响应式跟踪 然后会触发对象 ob 的dep收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组。
-
65、函数式组件使用场景和原理
函数式组件与普通组件的区别- 1、函数式组件需要在声明组件时指定 functional:true
- 2、不需要实例化，所以没有this，this通过render函数的第二个参数context代替
- 3、没有生命周期钩子函数，不能使用计算属性，watch
- 4、不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
- 5、因为函数组件时没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
- 6、函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop，而普通的组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上（可以通过inheritAttrs属性禁止）优点：1.由于函数组件不需要实例化，无状态，没有生命周期，所以渲染性要好于普通组件2.函数组件结构比较简单，代码结构更清晰
使用场景：
一个简单的展示组件，作为容器组件使用 比如 router-view 就是一个函数式组件。 “高阶组件”—用于接受一个组件为参数，返回一个被包装过的组件。
相关代码如下：
if (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件 return createFunctionalComponent(Ctor, propsData, data, context, children); } const listeners = data.on; data.on = data.nativeOn; installComponentHooks(data); // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）
- 66、子组件为何不可以修改父组件传递的 Prop？
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 - 67、vue项目创建。路由配置、环境配置以及组件传值等
css、html面试题
- HTML和HTML5有什么区别？
主要有三个区别：
+ 1、文档声明区别
HTML：超文本标记语言，一种纯文本类型的语言。
HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。
+ 2、结构语义区别
html：没有体现结构语义化的标签，如：`<div id="nav"></div>`
html5：添加了许多具有语义化的标签，如：`<article>、<aside>、<audio>、<bdi>...`
+ 3、绘图区别
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。
-
什么是盒子模型？
- 一个盒子我们会分成几个部分：内容区(content)、内边距(padding)、边框(border)、外边距(margin)，也就是盒模型的组成由margin，padding，boder，content组成
- 盒子模型分为标准盒子模型和IE盒子模型
-
如何理解HTML5语义化？
- HTML语义化标签
- header – 标题
- nav – 导航
- article – 文章
- section – 节或段
- aside – 侧边栏
- footer – 页脚
-
语义化的好处？
- 在没有css代码的情况下，也能很好的呈现内容结构、代码结构（让非技术员也能看懂代码）
- 提高用户体验，比如：title，alt用于解释名词和图片信息
- 利于SEO。语义化能和搜索引擎建立更好的联系，优化搜索
- 便于团队开发与维护，语义化更具有可读性
- cookies、sessionStorage、localStorage的区别是什么？(浏览器)
1、cookie
（1）本身用于客户端和服务端通信
（2）但是它有本地存储的功能，于是就被“借用”
（3）document.cookie = …获取和修改即可
（4）cookie用于存储的缺点
①存储量太小，只有4kb
②所有http请求都带着，会影响获取资源的效率
③api简单，需要封装才能用document.cookie
2、localStorage,sesseionStorage
（1）html5专门为存储而设计，最大容量5M
（2）api简单易用
（3）lcoalStorage.setItem(key, value);localStorage.getItem(key);
（4）ios safari隐藏模式下:localStorage.getItem会报错，建议统一使用try-catch封装
3、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 - 常见的浏览器内核有哪些？
**Trident内核：**代表浏览器是ie浏览器，因此Trident内核又称E内核，此内核只能用于Windows平台，并且不是开源的。
**Gecko内核：**代表浏览器是Firefox浏览器。Gecko内核是开源的，最大优势是可以跨平台。
webkit ：Webkit内核:代表浏览器是Safari(苹果的浏览器)以及低版本的谷歌浏览器，是开源的项目。
**Presto内核：**代表浏览器是Opera浏览器(中文译为“欧朋浏览器”)，Presto内核是世界公认最快的渲染速度的引擎，但是在2013年之后，Open宣布加入谷歌阵营，弃用了该内核。
**Blink内核：**由谷歌和Opera开发，2013年4月发布，现在Chrome内核是Blink。
-
谈谈你对web标准以及W3C的理解？
- web标准：
web标准主要分为结构、表现、行为3部分
结构：指我们平时在body里面写的标签，主要是由HTML标签组成
表现：指更加丰富HTML标签样式，主要由CSS样式组成
行为：指页面和用户的交互，主要由JS部分组成
- W3C：
W3C对web标准提出了规范化的要求，即代码规范
- 对结构的要求
1、标签字母要小写
2、标签要闭合
3、标签不允许随意嵌套
- 对表现和行为的要求
1、建议使用外链CSS和js脚本，实现结构与表现分离、结构与行为分离，能提高页面的渲染效率，更快地显示网页内容
-
如何实现浏览器响应式布局？
- 使用媒体查询（@media）
- 使用flex弹性布局
- 使用百分比单位
- 使用rem单位
- 使用VH、HW单位
-
CSS选择器以及优先级的理解？
- 常用的CSS选择器
ID选择器、类选择器、标签选择器、属性选择器、伪类选择器、后代选择器
- 权重划分在同一层级下：
!important > 内联样式 > ID选择器 > 类选择器 > （标签选择器、伪类选择器、属性选择器）
不同层级下：
正常来说权重值越高的优先级越高，但是一直以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高
-
谈谈你对回流和重绘的理解？
-
什么是回流？
- 当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，就产生了回流
-
什么是重绘？
- 当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘
- 什么时候会进行回流？
添加或者删除可见的 DOM 元素的时候
元素的位置发生改变
元素的尺寸发生改变
内容改变
页面第一次渲染的时候 - 什么时候会进行重绘？
列举一些相关的 CSS 样式：color、background、background-size、visibility、box-shadow
-
-
opacity: 0、visibility: hidden、display: none有什么区别？
- opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
- visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
- display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
-
css 预处理器
- less
- sass
-
<img>的 title 和 alt 有什么区别- 通常当鼠标滑动到元素上的时候显示
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
-
行内元素和块级元素有哪些？img属于什么元素
块元素
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
内联元素
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
img属于行内替换元素，效果与块元素一致
-
表单中readonly和disabled的区别
- 共同点：能够使用户不能改变表单中的内容
- 不同点：
1、readonly只对input和textarea有效，但是disabled对所有的表单元素都是有效的，包括radio、checkbox
2、readonly可以获取到焦点，只是不能修改。disabled设置的文本框无法获取焦点
3、如果表单的字段是disabled，则该字段不会发送（表单传值）和序列化
浏览器
- 1、浏览器中输入url到网页显示，整个过程发生了什么
域名解析
发起tcp三次握手
建立tcp连接之后发起htttp请求
服务器端响应http请求，浏览器得到html代码
浏览器器解析html代码，并请求html代码中的资源
浏览器对页面进行渲染呈现给用户
- 2、cookie的弊端
每个特定的域名下最多生成的cookie的个数有限制
IE和Opera会清理近期最少使用的cookie，firefox会随机清理cookie
cookie最大为4096字节，为了兼容一般不超过4095字节
安全性问题，如果cookie被人劫持，就可以获得所有的session信息
- 3、主流浏览器及内核
Google chrome：webkit/blink
safari：webkit
IE：trident
firefox：gecko
Opera：presto/webkit/blink
- 4、sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话session中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被销毁。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期的。
- 5、谈谈对bfc规范的理解
bfc是block formatting context即格式化上下文
bfc是页面css视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域
bfc最重要的一个效果是，让处于bfc内部与外部的元素相互隔离，使内外的元素的定位不会相互影响
- 6、请说出至少三种减少页面加载时间的方法
尽量减少页面中重复的http请求
css样式放置在文件头部、js脚本放置在文件末尾
压缩合并js、css代码
服务器开启gzip压缩
-
7、 如何进行网站性能优化？
- content 方面
- 减少 HTTP 请求：合并文件、CSS 精灵、inline Image
- 减少 DNS 查询：DNS 缓存、将资源分布到恰当数量的主机名
- 减少 DOM 元素数量
- Server 方面
- 使用 CDN
- 配置 Etag
- 对组件使用 Gzip 压缩
- Cookie 方面
- 减少cookie大小
- css 方面
- 将样式表放到页面顶部
- 不使用 CSS 表达式
- 使用
<link>不使用@import
- Javascript 方面
- 将脚本放到页面底部
- 将 javascript 和 css 从外部引入
- 压缩 javascript 和 css
- 删除不需要的脚本
- 减少 DOM 访问
- 图片方面
- 优化图片：根据实际颜色需要选择色深、压缩
- 优化 css 精灵
- 不要在 HTML 中拉伸图片
- content 方面
-
8、浏览器存储？
- 短暂性的时候，我们只需要将数据存在内存中，只在运行时可用
- 持久性存储，可以分为 浏览器端 与 服务器端
- 浏览器:
- cookie : 通常用于存储用户身份，登录状态等，http 中自动携带， 体积上限为 4K ， 可自行设置过期时间
- localStorage / sessionStorage : 长久储存/窗口关闭删除， 体积限制为 4~5M
- indexDB
- 服务器
- 分布式缓存 redis
- 数据库
- 浏览器:
-
9、get / post？
- get : 缓存、请求长度受限、会被历史保存记录
- 无副作用(不修改资源)，幂等(请求次数与资源无关)的场景
- post : 安全、大数据、更多编码类型
- get : 缓存、请求长度受限、会被历史保存记录
-
10、安全性问题？
- XSS 攻击: 注入恶意代码
- cookie 设置 httpOnly
- 转义页面上的输入内容和输出内容
- CSRF : 跨站请求伪造，防护:
- get 不修改数据
- 不被第三方网站访问到用户的 cookie
- 设置白名单，不被第三方网站请求
- 请求校验
- XSS 攻击: 注入恶意代码
性能优化
-
1、性能优化的几个方面?
- 资源压缩合并,减少HTTP请求
- 非核心代码异步加载
- 利用浏览器缓存
- 使用CDN
- 预解析DNS
-
2、异步加载?
- 动态脚本加载
- defer
- async
-
3、加载方式区别？
- defer是在html解析完毕才执行,如果有多个则按加载顺序执行
- async是加载完毕后立即执行,如果是多个,执行顺序与加载顺序无关
-
4、预加载?
- 在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。
- 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载
<link rel="preload" href="http://example.com">- 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。
-
5、DNS 预解析?
- DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//yuchengkai.cn"> - 在https协议中默认a标签不会开启预解析,因此需要手动设置meta
- DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
-
6、懒执行?
懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。 -
7、懒加载?
懒加载就是将不关键的资源延后加载。
懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。
懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。
react面试题
1、什么时候使用状态管理器?
- 从项目的整体看
- 目用户的使用方式复杂
- 不同身份的用户有不同的使用方式（比如普通用户和管理员）
- 多个用户之间可以协作
- 与服务器大量交互，或者使用了 WebSocket
- View 要从多个来源获取数据
- 从组件角度看
- 某个组件的状态，需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
- 组件有相当大量的，随时间变化的数据
- state 需要有一个单一可靠数据源
- 所有 state 放在顶层组件已经无法满足需求了
2、说说 React 有什么特点?
- 它使用**虚拟 DOM **而不是真正的 DOM。
- 它可以用服务器端渲染。
- 它遵循单向数据流或数据绑定
3、列出 React 的一些主要优点?
- 它提高了应用的性能
- 可以方便地在客户端和服务器端使用
- 由于 JSX，代码的可读性很好
- React 很容易与 Meteor，Angular 等其他框架集成
- 使用 React，编写 UI 测试用例变得非常容易
4、什么是 JSX?
- 它 JSX 是 J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能
- 例子
render() {
return(
<div>
<h1> Hello World </h1>
</div>
)
}
5、说说为什么浏览器无法读取 JSX?
- 浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使
浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为
JavaScript 对象，然后再将其传给浏览器
6、你理解“在 React 中，一切都是组件”这句话?
- 组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个
组件彼此独立，而不会影响 UI 的其余部分
7、 React 中 render()的目的?
- 每个 React 组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如
<form>、<group>、<div>等。此函数必须保持纯净，即必须每次调用时都返回相同的结果
8、什么是 Props?
- Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据
9、React 中的状态是什么？
- 状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与 Props 不同，它们是可变的，并创建动态和交互式组件。可以通过this.state() 访问它们。
10、区分状态和 Props?
| 条件 | State | Props |
|---|---|---|
| 从父组件中接受初始值 | Yes | Yes |
| 父组件可以改变值 | No | Yes |
| 在组件中设置默认值 | No | Yes |
| 在组件的内部变化 | Yes | No |
| 设置子组件的初始值 | Yes | Yes |
| 在子组件的内部改变 | No | Yes |
11、如何更新组件的状态?
- 使用
this.setState()更新组件的状态
12、React 组件生命周期的阶段是什么?
- React 组件的生命周期有三个不同的阶段：
- 初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。
- 更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段
- 卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除
13、你对 React 的 refs 有什么了解?
- Refs 是 React 中引用的简写。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对 render()返回的特定元素或组件的引用。当需要进行 DOM 测量或向组件添加方法时，它们会派上用场
- 列出一些应该使用 refs 的情况?
- 需要管理焦点、选择文本或媒体播放时
- 触发式动画
- 与第三方 DOM 库集成
14、如何模块化 React 中的代码?
- 可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件
15、什么是高阶组件 HOC?
- 高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件
16、你能用 HOC 做什么?
- HOC 可用于许多任务:
- 用代码重用，逻辑和引导抽象
- 渲染劫持
- 状态抽象和控制
- Props 控制
17、 React 中 key 的重要性是什么?
- key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能
算法刷题
大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。
写在最后
最后，对所以做Java的朋友提几点建议，也是我的个人心得：
-
疯狂编程
-
学习效果可视化
-
写博客
-
阅读优秀代码
-
心态调整
8561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
