• 单线程 ：只有一个线程，只能做一件事
• 原因 ： 避免 DOM 渲染的冲突

• 作用域链可以理解为一组对象列表，包含 父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数

• 所有的函数都有prototype属性（原型）
• 在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。

• 因为javaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
• 组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，他们值负责各自维护数据，不会造成混乱。而单纯的写成对象形式，就是所有组件实例共用了一个data，这样改一个全部都会修改。

• 主张最少
• 可以根据不同的需求选择不同的层级

• vue双向数据绑定是通过数据劫持、组合、发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变
• 核心：关于vue双向数据绑定，其核心是Object.defineProperty()方法

• 单页面应用（SPA），通俗的说就是指只有一个主页面的应用，浏览器一开始就加载所有的js、html、css。所有的页面内容都包含在这个主页面中。但在写的时候，还是分开写，然后再加护的时候有路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多用于pc端。
• 多页面（MPA），就是一个应用中有多个页面，页面跳转时是整页刷新
• 单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离，页面效果会比较酷炫
• 单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。初次加载时耗时多；页面复杂度提高很多。

• 更准确
  因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。
  
• 更快
  利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。
  

• 加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 父组件更新过程父 beforeUpdate -> 父 updated
• 销毁过程父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

• npm install 下载 node_modules 资源包的命令
• npm run dev 启动 vue-cli 开发环境的 npm 命令
• npm run build vue-cli 生成 生产环境部署资源 的 npm 命令
• npm run build–report 用于查看 vue-cli 生产环境部署资源文件大小的 npm 命令

• build 文件夹是保存一些 webpack 的初始化配置。
• config 文件夹保存一些项目初始化的配置
• node_modules 是 npm 加载的项目依赖的模块
• src 目录是我们要开发的目录:
  assets 用来放置图片
  components 用来放组件文件
  app.vue 是项目入口文件
  main.js 项目的核心文件
  
  
  
  

• 共同点：都是动态显示 DOM 元素
• 区别点：
  • .stop 阻止事件继续传播

    
    讯享网
    

  • .prevent 阻止标签默认行为
  • .capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
  • .self 只当在 event.target 是当前元素自身时触发处理函数
  • .once 事件只会触发一次
  • .passive 告诉浏览器你不想阻止事件的默认行为v-model 的修饰符
  • .lazy 通过这个修饰符，转变为在 change 事件再同步
  • .number 自动将用户输入值转化为数值类型
  • .trim 自动过滤用户输入的收尾空格键盘事件修饰符
  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right系统修饰符
  • .ctrl
  • .alt
  • .shift
  • .meta鼠标按钮修饰符
  • .left
  • .right
  • .middle

  讯享网<ul><li>v-if 是动态的向 DOM 树内添加或者删除 DOM 元素</li><li>v-show 是通过设置 DOM 元素的 display 样式属性控制显隐</li><li>v-if 切换有一个局部编译/卸载的过程&#xff0c;切换过程中合适地销毁和重建内部的事件监听和子组件</li><li>v-show 只是简单的基于 css 切换 <ul><li>性能消耗</li></ul> </li><li>v-if 有更高的切换消耗</li><li>v-show 有更高的初始渲染消耗</li><li>使用场景 <ul><li>v-if 适合运营条件不大可能改变</li><li>v-show 适合频繁切换</li></ul> </li></ul> </li></ul> </li><li> <p>41、v-for 与 v-if 的优先级?<br /> v-for 和 v-if 同时使用&#xff0c;有一个先后运行的优先级&#xff0c;v-for 比 v-if 优先级更高&#xff0c;这就说明在<br /> v-for 每次的循环赋值中每一次调用 v-if 的判断&#xff0c;所以不推荐 v-if 和 v-for 在同一个标签中同时使用。</p> </li><li> <p>42、 vue 常用的修饰符?<br /> <strong>事件修饰符</strong></p> 

• 43、vue 事件中如何使用 event 对象?
  • 获取事件对象，方法参数传递 \(event 。注意在事件中要使用 \) 符号

• 44、组件传值方式有哪些

1. 父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值
2. 子传父：子组件通过 this.\(emit(‘fnName’,value) 来传递,父组件通过接收 fnName 事件方法来接收回调</li><li>其他方式&#xff1a;通过创建一个bus&#xff0c;进行传值</li><li>使用Vuex</li></ol> <ul><li> <p>45、vue 中子组件调用父组件的方法?</p> <ul><li>直接在子组件中通过 this.\)parent.event 来调用父组件的方法。
3. 在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了。
4. 父组件把方法传入子组件中，在子组件里直接调用这个方法。

• (一)声明式导航router-link

  讯享网<ul><li>不带参数&#xff1a;</li></ul> </li></ul> <pre></pre> <pre></pre> <pre></pre> 

  • (二)this.$router.push()

  <ul><li>不带参数&#xff1a;</li></ul> </li></ul> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> 

  • (三)this.$router.replace()

  讯享网<ul><li>用法同上</li></ul> </li><li> <p>(四)this.$router.go(n)</p> <ul><li>向前或者向后跳转n个页面&#xff0c;n可为正整数或负整数</li></ul> </li><li> <p>区别:</p> <ul><li>this.$router.push<br /> 跳转到指定url路径&#xff0c;并在history栈中添加一个记录&#xff0c;点击后退会返回到上一个页面</li><li>this.$router.replace<br /> 跳转到指定url路径&#xff0c;但是history栈中不会有记录&#xff0c;点击返回会跳转到上上个页面 (就是直接替换了当前页面)</li><li>this.$router.go(n)<br /> 向前或者向后跳转n个页面&#xff0c;n可为正整数或负整数</li></ul> </li></ul> </li><li> <p>49、Vue.js 双向绑定的原理<br /> Vue.js 2.0 采用数据劫持&#xff08;Proxy 模式&#xff09;结合发布者-订阅者模式&#xff08;PubSub 模式&#xff09;的方式&#xff0c;通过 Object.defineProperty()来劫持各个属性的 setter&#xff0c;getter&#xff0c;在数据变动时发布消息给订阅者&#xff0c;触发相应的监听回调。</p> </li></ul> 

  每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

  Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器)

  • 50、Computed和Watch的区别
    • computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的 属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
    • watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每 当监听的数据变化时都会执行回调进行后续操作。
    • 运用场景：

  <ul><li>当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed的缓存特性,避免每次获取值时,都要重新计算。</li><li>当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率, 并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。</li><li>多个因素影响一个显示&#xff0c;用Computed&#xff1b;一个因素的变化影响多个其他因素、显示&#xff0c;用Watch;</li></ul> </li><li> <p>Computed 和 Methods 的区别</p> <ul><li>computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method &#xff0c;只要发生重新渲染&#xff0c;</li><li>method 调用总会执行该函数</li></ul> </li></ul> </li><li> <p>51、过滤器 (Filter)</p> 

  • 在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤(格式化)数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示。
  • 使用场景： 比如需要处理时间、数字等的的显示格式；

• 52、axios是什么
  易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。
  
• 53、sass是什么？如何在vue中安装和使用？
  sass是一种CSS预编译语言安装和使用步骤如下。
  

1. 用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
2. 在 webpack.config.js中配置sass加载程序。

• 54、Vue.js页面闪烁
  Vue. js提供了一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下。
  

讯享网

• 55、如何解决数据层级结构太深的问题
  在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码: , 可以使用手动定义一层数据:
  
• 56、vue常用指令

1. v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
2. v-bind 动态绑定 作用： 及时对页面的数据进行更改
3. v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
4. v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
5. v-show 显示内容 （同angular中的ng-show）
6. v-hide 隐藏内容（同angular中的ng-hide）
7. v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
8. v-else-if 必须和v-if连用
9. v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
10. v-text 解析文本
11. v-html 解析html标签
12. v-bind:class 三种绑定方法
    • 对象型 ‘{red:isred}’
    • 三元型 ‘isred?“red”:“blue”’
    • 数组型 ‘[{red:“isred”},{blue:“isblue”}]’
13. v-once 进入页面时 只渲染一次 不在进行渲染
14. v-cloak 防止闪烁
15. v-pre 把标签内部的元素原位输出

• 57、和的区别
  • \(route是“路由信息对象”&#xff0c;包括path&#xff0c;params&#xff0c;hash&#xff0c;query&#xff0c;fullPath&#xff0c;matched&#xff0c;name等路由信息参数。</li><li>\)router是“路由实例”对象包括了路由的跳转方法，钩子函数等
• 58、怎样理解 Vue 的单项数据流
  • 数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解。
  • 注意：在子组件直接用 v-model 绑定父组件传过来的 props 这样是不规范的写法，开发环境会报警告。
  • 如果实在要改变父组件的 props 值可以再data里面定义一个变量，并用 prop 的值初始化它，之后用$emit 通知父组件去修改。
• 59、虚拟DOM是什么？有什么优缺点？
  由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。
  • 优点：
    • 需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
    • 推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。

    <ul><li>1、保证性能下限&#xff1a;框架的虚拟DOM需要适配任何上层API可能产生的操作&#xff0c;他的一些DOM操作的实现必须是普适的&#xff0c;所以它的性能并不是最优的&#xff1b;但是比起粗暴的DOM操作性能要好很多&#xff0c;因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下&#xff0c;依然可以提供还不错的性能&#xff0c;既保证性能的下限。</li><li>2、无需手动操作DOM&#xff1a;我们不需手动去操作DOM&#xff0c;只需要写好 View-Model的 代码逻辑&#xff0c;框架会根据虚拟DOM和数据双向绑定&#xff0c;帮我们以可预期的方式更新视图&#xff0c;极大提高我们的开发效率。</li><li>3、跨平台&#xff1a;虚拟DOM本质上是JavaScript对象&#xff0c;而DOM与平台强相关&#xff0c;相比之下虚拟DOM可以进行更方便地跨平台操作&#xff0c;例如服务器端渲染、weex开发等等。</li></ul> </li><li><strong>缺点&#xff1a;</strong> <ul><li>1、无法进行极致优化&#xff1a;虽然虚拟DOM &#43; 合理的优化&#xff0c;足以应对大部分应用的性能需要&#xff0c;但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。</li><li>2、首次渲染大量DOM时&#xff0c;由于多了一层DOM计算&#xff0c;会比innerHTML插入慢。</li></ul> </li></ul> </li><li> <p>60、Vuex 页面刷新数据丢失怎么解决&#xff1f;</p> 

  • 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、策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。
  • 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 原理如下<br /> 因为响应式数据 我们给对象和数组本身新增了__ob__属性&#xff0c;代表的是 Observer 实例。当给对象新增不存在的属性&#xff0c;首先会把新的属性进行响应式跟踪 然后会触发对象 <strong>ob</strong> 的dep收集到的 watcher 去更新&#xff0c;当修改数组索引时我们调用数组本身的 splice 方法去更新数组。</li></ul> </li><li> <p>65、函数式组件使用场景和原理<br /> 函数式组件与普通组件的区别</p> <ul><li>1、函数式组件需要在声明组件时指定 functional:true</li><li>2、不需要实例化&#xff0c;所以没有this&#xff0c;this通过render函数的第二个参数context代替</li><li>3、没有生命周期钩子函数&#xff0c;不能使用计算属性&#xff0c;watch</li><li>4、不能通过\)emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
    • 5、因为函数组件时没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
    • 6、函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop，而普通的组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上（可以通过inheritAttrs属性禁止）优点：1.由于函数组件不需要实例化，无状态，没有生命周期，所以渲染性要好于普通组件2.函数组件结构比较简单，代码结构更清晰
    
    

  使用场景：

  一个简单的展示组件，作为容器组件使用 比如 router-view 就是一个函数式组件。 “高阶组件”—用于接受一个组件为参数，返回一个被包装过的组件。
  相关代码如下：
  
  
  

  • 66、子组件为何不可以修改父组件传递的 Prop？
    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
    
  • 67、vue项目创建。路由配置、环境配置以及组件传值等

  css、html面试题

  • HTML和HTML5有什么区别？

  主要有三个区别：

  讯享网

  • 什么是盒子模型？
    • 一个盒子我们会分成几个部分：内容区(content)、内边距(padding)、边框(border)、外边距(margin)，也就是盒模型的组成由margin，padding，boder，content组成
    • 盒子模型分为标准盒子模型和IE盒子模型
  • 如何理解HTML5语义化？
    • HTML语义化标签
    1. header – 标题
    2. nav – 导航
    3. article – 文章
    4. section – 节或段
    5. aside – 侧边栏
    6. footer – 页脚
  • 语义化的好处？
  1. 在没有css代码的情况下，也能很好的呈现内容结构、代码结构（让非技术员也能看懂代码）
  2. 提高用户体验，比如：title，alt用于解释名词和图片信息
  3. 利于SEO。语义化能和搜索引擎建立更好的联系，优化搜索
  4. 便于团队开发与维护，语义化更具有可读性
  • 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 &gt; 内联样式 &gt; ID选择器 &gt; 类选择器 &gt; （标签选择器、伪类选择器、属性选择器）

  不同层级下：

  正常来说权重值越高的优先级越高，但是一直以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高

  • 谈谈你对回流和重绘的理解？
    • 什么是回流？

      <ul><li>当一个元素自身的宽高&#xff0c;布局&#xff0c;显示或隐藏&#xff0c;或元素内部的文字结构发生变化&#xff0c;导致需要重新构建页面的时候&#xff0c;就产生了回流</li></ul> </li><li> <p><strong>什么是重绘&#xff1f;</strong></p> <ul><li>当一个元素自身的宽高&#xff0c;布局&#xff0c;及显示或隐藏没有改变&#xff0c;而只是改变了元素的外观风格的时候&#xff0c;就产生了重绘</li><li><strong>什么时候会进行回流&#xff1f;</strong><br /> 添加或者删除可见的 DOM 元素的时候<br /> 元素的位置发生改变<br /> 元素的尺寸发生改变<br /> 内容改变<br /> 页面第一次渲染的时候</li><li><strong>什么时候会进行重绘&#xff1f;</strong></li></ul> <p>列举一些相关的 CSS 样式&#xff1a;color、background、background-size、visibility、box-shadow</p> </li></ul> </li><li> <p>opacity: 0、visibility: hidden、display: none有什么区别&#xff1f;</p> 

      • opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
      • visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
      • display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

    • css 预处理器
      • less
      • sass
    • 的 title 和 alt 有什么区别
      • 通常当鼠标滑动到元素上的时候显示
      • 是 的特有属性，是图片内容的等价描述，用于图片无法加载显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
    • 行内元素和块级元素有哪些？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的区别
    • 5、谈谈对bfc规范的理解

    bfc是block formatting context即格式化上下文
    bfc是页面css视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域
    bfc最重要的一个效果是，让处于bfc内部与外部的元素相互隔离，使内外的元素的定位不会相互影响
    
    

    • 6、请说出至少三种减少页面加载时间的方法

    尽量减少页面中重复的http请求
    css样式放置在文件头部、js脚本放置在文件末尾
    压缩合并js、css代码
    服务器开启gzip压缩
    
    
    

    • 7、 如何进行网站性能优化？
      • content 方面
        • 短暂性的时候，我们只需要将数据存在内存中，只在运行时可用
        • 持久性存储，可以分为 浏览器端 与 服务器端

        讯享网<ul><li>减少 HTTP 请求&#xff1a;合并文件、CSS 精灵、inline Image</li><li>减少 DNS 查询&#xff1a;DNS 缓存、将资源分布到恰当数量的主机名</li><li>减少 DOM 元素数量</li></ul> </li><li>Server 方面 <ul><li>使用 CDN</li><li>配置 Etag</li><li>对组件使用 Gzip 压缩</li></ul> </li><li>Cookie 方面 <ul><li>减少cookie大小</li></ul> </li><li>css 方面 <ul><li>将样式表放到页面顶部</li><li>不使用 CSS 表达式</li><li>使用 不使用 </li></ul> </li><li>Javascript 方面 <ul><li>将脚本放到页面底部</li><li>将 javascript 和 css 从外部引入</li><li>压缩 javascript 和 css</li><li>删除不需要的脚本</li><li>减少 DOM 访问</li></ul> </li><li>图片方面 <ul><li>优化图片&#xff1a;根据实际颜色需要选择色深、压缩</li><li>优化 css 精灵</li><li>不要在 HTML 中拉伸图片</li></ul> </li></ul> </li><li> <p>8、浏览器存储&#xff1f;</p> 

        <ul><li>浏览器: <ul><li>cookie : 通常用于存储用户身份&#xff0c;登录状态等&#xff0c;http 中自动携带&#xff0c; 体积上限为 4K &#xff0c; 可自行设置过期时间</li><li>localStorage / sessionStorage : 长久储存/窗口关闭删除&#xff0c; 体积限制为 4~5M</li><li>indexDB</li></ul> </li><li>服务器 <ul><li>分布式缓存 redis</li><li>数据库</li></ul> </li></ul> </li></ul> </li><li> <p>9、get / post&#xff1f;</p> 

        • get : 缓存、请求长度受限、会被历史保存记录

        讯享网<ul><li>无副作用(不修改资源)&#xff0c;幂等(请求次数与资源无关)的场景</li></ul> </li><li>post : 安全、大数据、更多编码类型</li></ul> </li><li> <p>10、安全性问题&#xff1f;</p> 

        • XSS 攻击: 注入恶意代码

        <ul><li>cookie 设置 httpOnly</li><li>转义页面上的输入内容和输出内容</li></ul> </li><li>CSRF : 跨站请求伪造&#xff0c;防护: <ul><li>get 不修改数据</li><li>不被第三方网站访问到用户的 cookie</li><li>设置白名单&#xff0c;不被第三方网站请求</li><li>请求校验</li></ul> </li></ul> </li></ul> 

        性能优化

        • 1、性能优化的几个方面?
          • 资源压缩合并,减少HTTP请求
          • 非核心代码异步加载
          • 利用浏览器缓存
          • 使用CDN
          • 预解析DNS
        • 2、异步加载?
          • 动态脚本加载
          • defer
          • async
        • 3、加载方式区别？
          • defer是在html解析完毕才执行,如果有多个则按加载顺序执行
          • async是加载完毕后立即执行,如果是多个,执行顺序与加载顺序无关
        • 4、预加载?
          • 在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。
          • 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载
          • 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。
        • 5、DNS 预解析?
          • DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
            
            
            
            
          • 在https协议中默认a标签不会开启预解析,因此需要手动设置meta
        • 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 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能
        • 例子

        讯享网

        5、说说为什么浏览器无法读取 JSX?

        • 浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使
          浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为
          JavaScript 对象，然后再将其传给浏览器
          
          

        6、你理解“在 React 中，一切都是组件”这句话?

        • 组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个
          组件彼此独立，而不会影响 UI 的其余部分
          

        7、 React 中 render()的目的?

        • 每个 React 组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如、、 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果

        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、如何更新组件的状态?