0%

面试题

发表于 更新于

参考要写在最前面

如何处理移动端 1px 渲染成 2px 的问题

  • 局部处理

    • mate 标签中 viewport 属性，initial-scale 属性设置为 1
    • rem 按照设计稿标准走，外加利用 transform 的 scale(0.5) 缩小一半

  • 全局处理

    • mate 标签中 viewport 属性，initial-scale 属性设置为 0.5
    • rem 按照设计稿标准走

BFC - Box、Formatting Context - 块级格式化上下文

BFC 是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

Box 是 CSS 布局的对象和基本单位，一个页面是由一个或多个 Box 组成。元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context（一个决定如何选人文档的容器），因此 Box 内的元素会以不同的方式渲染。

  • 创建规则

    • 根元素
    • 浮动元素（float 不取值为 none）
    • 绝对定位元素（position 取值为 absolute 或 fixed）
    • display 取值为 inline-block、table-cell、flex、inline-flex 之一的元素
    • overflow 不取值为 visible 的元素

  • 作用

    • 可以包含浮动元素
    • 不被浮动元素覆盖
    • 阻止父子元素 margin 折叠

IE 盒模型、W3C 盒模型

  • W3C 盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）；

    • box-sizing: content-box
    • width = content width

  • IE 盒模型：IE 的 content 部分把 border 和 padding 计算进去了

    • box-sizing: border-box
    • width = border + padding + content width

居中

  • 水平居中方法

    • 元素为行内元素，设置父元素 text-align:center
    • 如果元素宽度固定，可以设置左右 margin 为 auto
    • 如果元素为绝对定位，设置父元素 position:relative，元素设 left:0;right:0;margin:auto
    • 使用 flex-box 布局，指定 justify-content 属性为 center
    • display 设置为 table-cell，与行内元素一致，也是需要设置 text-align:center，主要还是用来垂直居中

  • 垂直居中的方法

    • 将显示方式设置为表格，display:table-cell，同时设置 vertial-align:middle
    • 使用 flex 布局，设置 align-items: center
    • 绝对定位总设置 bottom:0;top:0;，并设置 margin:auto
    • 绝对定位中固定高度时，设置 top:50%;margin-top 值为高度一半的负值
    • 文本垂直居中设置 line-height 为 height 值

当一个 CSS 文件很大的时候，如果还没有下载完成，js 会不会执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
      console.log("before css");
      var startDate = new Date();
      function h() {
        console.log(document.querySelectorAll("h1"));
      }
      setTimeout(h, 0);
    </script>
    <link
      href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css?timestame=1"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>这是红色的</h1>
    <script>
      var endDate = new Date();
      console.log("after css");
      console.log("经过了" + (endDate - startDate) + "ms");
    </script>
  </body>
</html>

将网速调整至低速，执行以上代码，会发现能够控制台第一时间输出的是 before css 之后能够获取到 h1 标签，但是却没有渲染出来，也就说明 CSS 下载过程并不会阻塞 DOM 的解析，但是会阻塞 DOM 的渲染。隔了一段时间之后才能看到 after css 的字样，但这不能证明会阻塞，但是当我们去掉 link 标签之后，after css 会马上被打印出来，这样就能够证明 CSS 的下载会阻塞 js 的执行

附 webkit 流程一张

1ydsk1wex0.png

关于浏览器性能优化的需要重新开一个写

https://blog.csdn.net/y_programmer_ape/article/details/107307676

vue 面试题

  1. vue 中 data 为什么必须是一个函数？为什么需要 return 返回？

    vue 中 data 必须是一个函数的原因是为了保证组件的独立性和可复用性。data 是一个函数，组件实例化的时候这个函数将被调用，返回一个对象，计算机会给这个对象分配一个地址，实例化几次就分配几个地址，他们所在地址不同，所以每个组件中的数据互不干扰，改变一个组件的状态其他的不会发生改变。

    不使用 return 包裹的数据会在项目的全局可见，会造成污染。使用 return 包裹后数据中变量只会在当前的组件中生效，不会影响其他组件。

  2. 由于 js 的限制，直接给一个数组项赋值，vue 能不能检查到变化？

    不能，用索引直接设置一个数组项或者修改数组长度时，vue 不能检测到数组变化（引用地址不变）（栈上的值不变）

    为了解决这个问题，vue 提供了如下操作方法：

    1. Vue.set
    2. vm.$set （Vue.set 的别名）
    3. Array.prototype.splice
    4. vm.items.splice（修改数组长度）

    其实这些方法也是修改后改变引用地址吧？

  3. 父子传值问题

    父传子：子组件通过 prop 接受

    子传父：

    • 子组件绑定一个事件，通过 $emit 触发
    • 父组件通过 callback 函数，并把这个函数传给子组件，子组件通过 props 接收
    • 通过 parent 和 children 或者 $refs 访问组件的实例
    • 父组件通过 provide 提供变量，子组件通过 inject 注入变量
    • vuex

  4. vuex 的理解

    vuex 是 vue 的状态管理模式，每个 vuex 的核心就是 store（仓库），包含着应用中的大部分状态（state）。

    vuex 的存储是响应式的，当组件从 store 中获取状态时，当 state 里面的状态发生改变时，组件也会做出相应的更新。

    改变 store 里的状态的唯一方法是显式提交一个 mutation。

    主要包括几个模块：

    • state 单一数据源，定义应用状态的数据结构，设置初始状态。 mapState
    • getters 允许组件从 store 中获取数据，是 store 的计算属性。 mapGetters
    • mutations 是 store 的 methods，保存着更改数据的回调函数，是同步操作，第一个参数是 state，第二个参数是自定义参数。 mapMutations
    • actions 是异步的操作方法，第一个参数是 context，是一个与 store 具有相同的属性的对象，使用 commit 异步提交 mutations 里的的方法
    • modules 模块化，将 store 分割成模块，每个模块具有自己的 state、getters、mutations、actions

实际遇到的面试题汇总

  1. 在标准的 JavaScript 中， Ajax 异步执行调用基于下面哪一个机制才能实现？

    答案：Event 和 callback，以及 Deferral 和 promise。

    其中 Event 指的是 eventloop 而不是 DOM Event。Deferral 和 promise 是在 ES6 之后出现的，标准答案应该是 event 和 callback。

  2. 白屏时间(first paint) 和可交互时间(dom ready)的关系

    答案：先是白屏时间，然后才是可交互时间。

    白屏时间指的是用户从打开页面开始到页面开始有东西呈现为止；

    首屏时间指的是用户浏览器首屏内所有内容都呈现出来所花费的时间；

    用户可操作时间（dom interactive）指的是用户可以进行正常的点击、输入等操作；

    总下载时间指的是页面所有资源都加载完毕并呈现出来所花费的时间，即页面 onload 的时间；

  3. css 中不可以继承的属性

    几乎所有与当前元素轮廓相关的内容都不可以。

    display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、right、bottom、left、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before。

  4. 当页面中存在多个 <link href="main1.css" rel="stylesheet" /> 时，浏览器会同时开始加载，先加载完的优先解析，如果遇到相同的选择器规则，则后面的会将前面的覆盖。