前端常用面试题

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)加上元素内容宽度/高度࿰

你可能感兴趣的:(javascript,前端)