百度面试面经

由于后面还有一个面试，就一起总结了吧！（这里只补充博主之前不会的wow）

• HTML5的新特性
• webStorage，localstorage会携带到服务端吗，localstorage的一些方法
• 块级元素，行内元素，有哪些
• src和herf的区别，哪些标签会用到，link标签使用herf导入css会进行下载吗
• 数组有哪些方法，介绍一下map，foreach的参数，reduce的参数，向前插入是向后插入是什么方法
• vuex，介绍一下使用方法
• v-if，v-show，template是否可以使用
• MVVM介绍一下
• vue-router钩子说几个

• http和https的默认端口
• 网络劫持
• OSI七层模型，和五层
• ES6新增的特性
• 数据类型
• render
• vue-cli介绍一下

HTML5的新特性

• 语义化标签：<header>\<footer>\<article>等
• 多媒体元素：<audio>\<video>
• Canvas:
• webStorage :localStorage、sessionStorage
• webSockets :
• web Wrokers（工作线程） :可以将一些耗时的数据处理操作从主线程中剥离(比如)，使主线程更加专注于页面渲染和交互。分为两种，专用线程和共享线程，一个专用线程对应一个主线程，而共享线程能够在不同的脚本中使用

webStorage，localstorage会携带到服务端吗，localstorage的一些方法

webStorage是html5的新特性，localstorage不会主动携带到服务端，通过getItem和setItem进行存取

块级元素，行内元素，有哪些

• 块级元素:会在水平方向上占据整个行，可以设置宽高。<div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li>
• 行内元素：他们会在同一行显示，不能设置宽高，靠内容撑开。<span>、<a>、<strong>、<em>、<img>
• 行内块元素：既有能像块级元素一样设置宽高，又像行内元素一样在一行显示。<img>、<button>

src和herf的区别，哪些标签会用到，link标签使用herf导入css会进行下载吗

src:

• <img>：用于嵌入图像。
• <script>：用于指定外部 JavaScript 文件的路径。
• <audio> 和 <video>：用于嵌入音频和视频文件。
• <iframe>：用于嵌入其他文档，比如嵌入其他网页。
• 对于资源类型，src 通常触发资源的下载，而且它可能会影响页面的渲染。例如，当浏览器遇到 <script> 标签时，会停止页面的渲染，下载并执行脚本。

href

• <a>：用于创建超链接。
• <link>：用于引入外部资源，如样式表或图标。
• <area>：用于定义图像地图中的区域链接。
• href 通常不会触发资源的下载阻塞页面的渲染。对于 <link> 标签引用的样式表，浏览器通常会异步下载样式表，继续渲染页面。但在某些情况下，如阻塞渲染的样式表，浏览器可能会等待样式表下载和解析完成，然后再继续渲染。

会阻塞的情况 -没有在标签当中增加async，使其同步加载样式表

• 样式表当中包含媒体查询<link rel="stylesheet" media="(min-width: 600px)" href="styles.css">

不会阻塞 加上async：<link rel="stylesheet" href="styles.css" async>

vuex，介绍一下使用方法

• State（状态）： 在 Vuex 中，状态是一个响应式的对象，包含了应用程序中所有组件共享的数据。
• Mutation（突变）： Mutation 是更改状态的唯一方式。每个 Mutation 都有一个字符串的类型和一个回调函数，该函数会接收状态作为第一个参数。
• Action（动作）： Actions 是用于触发 Mutation 的函数。它可以包含异步操作，并通过 context.commit 触发 Mutation。
• Getter（获取器）： Getters 是用于从 Store 中派生出一些状态的函数，类似于计算属性。

使用

• 创建store.js

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

使用

• 访问变量：this.$store.state.某个变量
• 访问gettersthis.$store.getters.名字
• 触发mutation: this.$store.commit('increment');
• 触发actions: this.$store.dispatch('incrementAsync');

// App.vue
<template>
  <div id="app">
    <p>Count: {{ $store.state.count }}</p>
    <p>Double Count: {{ $store.getters.doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

v-if，v-show，template是否可以使用

可以使用

MVVM介绍一下

MVVM的目标是将UI逻辑和业务逻辑分开，使代码更加模块化，MVVM主要包括三个组件Model模型，View视图，ViewModel视图模型，model表示业务逻辑，视图表示用户界面，而视图模型就是充当视图和模型之间的中介，将其连接起来，当数据发生变化的时候，视图也会自动更新。ViewModel由监听器observer和解析器Compiler组成，监听器对数据属性进行监听，解析器对元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

vue-router钩子说几个

beforeEach:在路由切换前执行，路由守卫

router.beforeEach((to, from, next) => {
  // 执行一些操作，例如权限验证
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

beforeResolve:全局解析守卫， 在路由被解析之前执行。与 beforeEach 不同，该守卫在所有组件内守卫和异步路由组件被解析之后，导航被确认之前执行。

router.beforeResolve((to, from, next) => {
  // 在路由被解析之前执行
  // 可以用于异步组件的解析后再进行一些操作
  next();
});

• afterEach:全局后置路由守卫，在路由已经切换之后执行

router.afterEach((to, from) => {
  // 路由切换后执行，可以用于一些清理操作
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

• beforeEnter路由独享守卫：在配置路由项当中定义守卫

const route = {
  path: '/example',
  component: Example,
  beforeEnter: (to, from, next) => {
    // 路由独享守卫
    // 可以用于特定路由的验证
    next();
  }
};

http和https的默认端口

• http:80
• https:443

网络劫持

• DNS劫持：攻击者通过篡改域名系统（DNS）响应，将合法的域名解析到恶意服务器上。

解决方法

• 使用DNSSEC：一种通过数字签名来验证DNS数据完整的机制
• 使用HTTPS:以确保数据加密让其难以窃听，而且https还加密了DNS的解析该过程

• 恶意代理:恶意软件可以配置用户系统上的代理设置，
• HTTP劫持:

OSI七层模型，和五层

• OSI: 物理层-数据链路层-网络层-运输层-会话层-表示层-应用层
• 五层:物理层-数据链路层-网络层-运输层-应用层

ES6新增的特性

• let和const
• 箭头函数
• 模板字符串：const greeting = Hello, ${name}!（注意写法，外面要用``包裹起来）
• 解构赋值: 就是一次性取出一个对象里面的值并且赋值
• 类和继承
• promise

// 数组解构
const [a, b] = [1, 2];

// 对象解构
const { firstName, lastName } = { firstName: 'John', lastName: 'Doe' };

数据类型

symbol

• 唯一性：即使两个symbol值相同他们也是不相等的
• 作为对象属性键： 主要用于创建唯一的属性键，以防止命名冲突。
• Symbol 不是构造函数，不能使用 new 关键字创建实例。
• Symbol 不可转换为字符串或数字，但可以通过显式转换为字符串。

// 创建一个唯一的 Symbol
const mySymbol = Symbol();

// 创建带有描述的 Symbol
const anotherSymbol = Symbol('This is a description');

const mySymbol = Symbol('description');

// 以下两行都会抛出错误
console.log(String(mySymbol));
console.log(Number(mySymbol));

// 显式将 Symbol 转换为字符串 
const symbolString = mySymbol.toString();

render

通常是指将组件或者数据渲染到页面的过程。

在vue当中，使用render函数我们可以用js语言来构建DOM。 render 函数接受一个参数 createElement，用于创建虚拟DOM,使用render可以更直接的操作虚拟dom。

React 每个组件内都会将这个虚拟 DOM 转换成实际的 DOM 并渲染到页面上

vue-cli介绍一下

是一个由 Vue.js 提供的官方命令行工具，用于快速搭建和管理基于 Vue.js 的项目。Vue CLI 提供了一个标准化的项目脚手架，包括了现代前端开发所需的各种工具和配置。