前端常用面试题

、

1.  什么是路由，如何实现路由

    不同的 url 或地址加载不同的页面

    路由实现有两种：hash 模式和 history 模式两种

    hash 模式： 1. url 路径会出现 # 字符 2. hash 值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变 hash 值时不会刷新页面，也不会向服务器发送请求 3. hash 值的改变会触发 hashchange 事件

        history模式：

        1.  整个地址重新加载，可以保存历史记录，方便前进后退

        2.  使用 HTML5 API（旧浏览器不支持）和 HTTP服务端配置，没有后台配置的话，页面刷新时会出现404

2.  怎么用 web 前端技术开发移动端应用

    媒体查询响应式设计,flex 弹性盒子布局,流式布局,rem 自适应布局

3.  flutter 和其他移动端框架的区别

    本质上是一套跨平台的 UI 框架，实现了一套代码跨多端运行

4.  前端代码为什么要打包

    模块化开发中，我们会编写大量模块，如果不打包就进行上线，那么页面加载或交互时，将会发起大量的请求。为了性能优化，需要使用 webpack 这样的打包器对模块进行打包整合，以减少请求数

5.  什么是 nodejs，怎么实现一台电脑里有多个 nodejs 版本

    Node.js 只是一个让 JavaScript 运行在浏览器之外的平台

    nvm,nvm 则是提供切换 node 版本的工具。

6.  响应式布局应该注意的点

    头部添加 meta：

    头部添加 link，不同屏幕分辨率使用不同的 css 样式：

    各个模块尺寸尽量使用百分比。

    (1)设置 viewport 元标签

   

    (2)避免使用绝对单位(px)，用相对单位代替(%、auto、em 等)

    (3)使用流式定位：float

    (4)图片大小实现自适应：

    img { max-width: 100%; }

    会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真。

    (5)根据浏览器屏幕的特征，有选择性的执行某些 CSS 样式——CSS3 媒体查询技术(Media Query)

7.  对象解构赋值和数组解构赋值

    对象展开运算符

    let obj = {

    hello: 'hello',

    world: 'world',

    name: 'Tim',

    age: 18

    }

    let {hello, world, ...hi} = obj;

    console.log(hello) => hello

    console.log(world) => world

    console.log(hi) => {name: 'Tim', age: 18}

    数组使用扩展运算符解构

    function f () {

    return ['hello', 'world', 'my', 'name', 'is Lilei'];

    }

    let [hello, world, ...who] = f()

    console.log(hello) => hello

    console.log(world) => world

    console.log(who) => ['my', 'name', 'is Lilei']

8.  v-if 和 v-show 的异同点 1.相同点 ：v-if 和 v-show 都可以动态控制 DOM 元素的显示隐藏。 2.不同点：v-if 是动态地向 DOM 树中添加或删除 DOM 元素节点；v-show 是通过向 DOM 元素设置样式 display 属性值控制显示隐藏。

9.  vue 父子组件传值如何操作

    通过 props 和 v-bind

    子组件内, props 定义变量, 在子组件使用变量

    父组件内, 使用子组件, 属性方式给 props 变量传值

    子向父传值

    通过$emit  

父组件内, 给组件@自定义事件="父methods函数"

子组件内, 恰当时机this.$emit('自定义事件名', 值)

10. vue 中如何正确使用定时器

    在 data 中声明一个变量，定时器绑定到变量中，然后在 beforeDestory 中销毁这个定时器

    export default {

    data() {

    return {

    timer: null // 定时器名称  

     };

    },

    mounted() { // 定时器一般写 mounted() 生命周期内

    this.timer = (() => {

    // 某些操作

    console.log(1);

    }, 1000) // 1000 毫秒

    },

    // 最后在 beforeDestroy()生命周期内清除定时器：

    beforeDestroy() {

    clearInterval(this.timer);

    this.timer = null;

    }

    };

11. img 标签中 alt 和 title 属性的区别

    title：通常当鼠标滑动到元素上的时候显示

    alt：alt 是 img 标签的特有属性，是图片内容的等价描述，用于图片无法正常加载时显示

12. CSS 选择符、优先级算法以及内联和 important 哪个优先级高？

    css 继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。

    所有元素可继承：

    visibility 和 cursor

    块级元素可继承

    text-indent 和 text-align

    内联元素可继承的：

    letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

    优先级为!important > [ id > class > tag ]

    !Important 比 内联优先级高

13. link 和@import 的区别是?

    区别 1：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。

    区别 2：link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。

    区别 3：link 是 XHTML 标签，无兼容问题；@import 兼容 IE5 以上

    区别 4：link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持改变样

14. axios 怎么解决跨域的

    使用 axios 直接进行跨域访问不可行，我们就需要配置代理了

    proxyTable: {

    '/api': {

    target:'http://api.douban.com/v2', // 你请求的第三方接口

    changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

    pathRewrite:{ // 路径重写，

    '^/api': '' // 替换 target 中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。

    }

    }

    },

15. vue 两大核心

    数据驱动和组件系统

16. v-on 可以监听多个方法吗？如何写？|| vue 如何一个元素绑定多个事件

   

17. vue 如何跨组件传值

    provide 和 inject

    父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。不论子组件有多深，只要调用了 inject,那么就可以注入 provide 中的数据。

18. vue 路由有几种实现方式？异同

    一种是哈希模式，还有一种是 history 模式

    hash 模式： 1. url 路径会出现 # 字符 2. hash 值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变 hash 值时不会刷新页面，也不会向服务器发送请求 3. hash 值的改变会触发 hashchange 事件

    history 模式： 1. 整个地址重新加载，可以保存历史记录，方便前进后退 2. 使用 HTML5 API（旧浏览器不支持）和 HTTP 服务端配置，没有后台配置的话，页面刷新时会出现 404

19. tcp 三次握手是什么

    第一次握手：客户端发送一个数据包给服务端，当服务端接收到这个数据后，服务端可知客户端是想要建立连接；

    第二次握手：服务端要对客户端的联机请求进行确认，向客户端发送应答号 ACK=1、SYN=1 确认号 Ack=J+1，此值是客户端的序列号加 1，还会产生一个随机的序列号 Seq=K，这样就告诉客户端可以进行连接；

    第三次握手：客户端收到数据后检查 Ack 是否为 J+1，以及标志位 ACK 的值是否为 1，若为 1，则会发送 ACK=1、确认号码 Ack=K+1，告诉服务端,你的请求连接被确认，连接可以建立

20. DOCTYPE 作用？严格模式混杂模式的区别？有什么意义？

    如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。

    1.声名位于文档的最前面，在 标签的前面，告知浏览器以何种模式来渲染文档。 2.严格模式的排版和 JS 运作模式都是以浏览器支持的最高的标准运行。按照 W3C 的标准来解析代码。 3.混杂模式是以宽松的，向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码，模拟老式浏览器的行为以防止网站停止工作。 4.若 DOCTYPE 为声名或格式不正确，页面将会以怪异模式的方式解析。

    5.Doctype 标签可声明三种 DLD 类型，分别是严格型，过渡型，框架型。

21. 如何居中一个浮动元素

    用定位 position

22. box-sizing 常用属性有那些，分别有什么作用

    box-sizing ： content-box || border-box || inherit

    1、content-box:此值为其默认值，其让元素维持 W3C 的标准 Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度࿰