冲击中厂面试题

简信
117 阅读12分钟

前端面试题JS,CSS,HTML

1. 快速实现盒子水平垂直方向居中？

1.1 第一种方法：父盒子设置flex,子盒子设置margin:0 auto;
 <div class="bigBox">
         <div class="smallBox"></div>
     </div>
 ​
  .bigBox{
             width: 500px;
             height: 500px;
             background-color: red;
             display: flex;
         }
         .bigBox > .smallBox{
             width: 100px;
             height: 100px;
             background-color:#000;
             margin:auto;
         }

2. padding与margin有什么不同,

首先padding为内边距，margin为边距padding及margin的作用对象不同,padding作用自身,而marign作用与外部对象

3. 前端css单位小结：vh、vw、百分比、rem、px、计算属性calc

1 vh

视口的高度，也就是眼睛可以看到屏幕的高度，如果你的屏幕分辩率为1920*1080，那么视口的高度就是1080px，vh可用于写自适应。一般给css div 的 height赋值用。 2 vw

与vh相对的，视口的宽度，同理，如果你的屏幕分辩率为1920*1080，那么视口的宽度就是1080px，vw可用于写自适应。一般给css div的width赋值用。 3 百分比

这里需要注意的是，百分比是继承的是父级元素的高与宽，如果父级元素没高宽，那么百分比就是无效的。百分比也可以用于自适应布局。 4 rem

根据根元素来变化大小，如果在根元素设置10px，那么1rem=10px。亦可用于自适应布局。 5 px

固定的像素点，虽然这个没办法自适应，但是，天下武功，为快不破，px可以很精确，是自适应比不了的，当我在做一些很精确的页面时，必然得用px来控制。有时候在自适应的布局下，边框线通常用px来设定，比如1px啥的。 6 计算属性calc

height: calc(~'100% - 7.4rem - 10px');

vw与百分比有什么不同？

vw和设备屏幕有关系

百分比有继承关系，会根据父元素的百分比自动计算高度及宽度的值

3. 块级元素与行内元素的区别

块级元素独占一行，默认继承父级元素,行内元素的宽度随着内容而改变

4. 如何让谷歌浏览器支持小字体

通过给元素设置transform:scale(0.5);

-webkit-transform:scale(0.5) 达到更小的字体

5 . let与var的区别？

var变量会提升，var无块级作用域，var变量覆盖

let不允许这么做

6. 深拷贝浅拷贝

  1. 数组和对象的赋值都叫做浅拷贝(藕断思连)

  2. 解构赋值中数组和对象一维数组和对象的赋值可以认为是深拷贝，二维数组为浅拷贝

  3. 数组的添加push为浅拷贝

  4. 手写深拷贝

     <!--  手写深拷贝    -->
 function  deepCooy(souce){
   const deepnewobj = souce.constructor === Array?[]:{};
   for (let keys in souce) {
     if(souce.hasOwnProperty(keys)){
       //  判断一些是否是引用类型的数据
       if(souce[keys] && typeof souce[keys] === 'object'){
         souce[keys].constructor === Array?[]:{};
         deepnewobj[keys] = deepCooy(souce[keys])
       }else {
         deepnewobj[keys] = souce[keys];
       }
     }
   }
   return deepnewobj
 }

7. 从哪些点做性能优化

加载

（1）减少http请求(精灵图，文件的合并)

（2）减少文件大小(资源压缩，图片压缩，代码压缩)

（3）CDN(第三方库，大文件,大图）

（4）小程序分包

（5） 懒加载

b 减少dom操作，避免回流，文档碎片

8. 手写懒加载

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>手写懒加载</title>
     <style>
       img{
         width: 400px;
         height: 400px;
         margin-bottom: 20px;
         display: block;
       }
     </style>
 </head>
 <body>
     <img src="./img/logning.gif" data-src="./img/cat1.jpeg">
     <img src="./img/logning.gif" data-src="./img/cat2.jpeg">
     <img src="./img/logning.gif" data-src="./img/cat3.jpeg">
     <img src="./img/logning.gif" data-src="./img/cat4.jpeg">
     <img src="./img/logning.gif" data-src="./img/cat5.jpeg">
     <img src="./img/logning.gif" data-src="./img/cat6.jpeg">
     <script type="text/javascript">
        // 手写懒加载
 ​
        // 获取img标签的长度
        let imgLength = document.getElementsByTagName("img").length
        console.log("____",imgLength)
        let imgTable = document.getElementsByTagName('img');
        let n = 0;
        lazyLoad()
        window.onscroll = lazyLoad
        function lazyLoad(){
            // 可见区域高度
          let seeHight = document.documentElement.clientHeight
          //   滚动条高度
          let scollHight = document.documentElement.scrollTop || document.body.scrollTop // 滚动的距离
          console.log(seeHight,scollHight)
          for (let i = n; i < imgLength; i++){
            if(imgTable[i].offsetTop < seeHight +scollHight) {
              if (imgTable[i].getAttribute('src') === './img/logning.gif') {
                imgTable[i].src = imgTable[i].getAttribute('data-src')
              }
              n = i + 1
            }
 ​
          }
        }
     </script>
 </body>
 </html>
 ​

9 this的指向问题

  1. 浏览器直接答应this指向的是window

     console.log(this)

  2. 函数的this指向为window,因为在window中加载了a这个方法

      function a(){
       console.log(this)
     }
     a()

  3. this会指向上一个调用者

      let obj = {
       userName:"张腾飞",
       a:{
         userName:"张腾飞1111111",
         b:function () {
           console.log(this.userName)
           return 0
         }
       }
     }
     console.log(obj.a.b())

  4. 箭头函数的this指向谁?如何修改this的指向？

    (1)箭头函数没有作用域,会指向他的上一层

      let id = 66
     function fun() {
         setTimeout(()=>{
             // 值为66，箭头函数没有作用域,会指向他的上一层windpw
 ​
            console.log("this的指向id"+ this)
         },500)
     }
     console.log( fun.apply([2]))

    (2) 改变this指向的四种方法

      /**
      * 1. call()方法 ,改变this指向再一次调用改方法,传参是以对象传入
      * fun.call({id:22})
      *
      * 2. apply方法,改变this指向再一次调用改方法,传参是以数组传入
      * fun.apply([{id:22}])
      *
      * 3. bind方法
      * fun.bind({id:22})
      *
      * 4. 在函数内部定义一个let that = this
      */

10.防抖和节流是什么？

防抖：连续触发事件但是规定时间内只执行最后一次

实现思路:使用定时器，每次触发先清楚以前的定时器

应用场景：

搜索框搜索输入

文本编辑器实时保存

节流：

就是指连续触发事件但是在设定时间只执行一次

应用场景：使用定时器，等定时器执行完毕后，重新开启定时器

高频事件：例如快速点击，鼠标滑动，resize事件，scrool事件

下拉加载

视频记录时间

开发中一般使用lodash库，利用里面的debounce(di dang ci)(防抖)和throttle(si rou tou)(节流)来做的

11. null 和undifind区别
  1. undifind是window一个属性
  2. null原生自带的
  3.

11. es6数组的方法

  1. arr.foreach(value, index,array). 数组的循环遍历，三个参数value代表输出的每个值，index代表索引值，a rray代表数组

    let arr  = [1,2,3,4,10];
    let sum = 0;
    arr.forEach((value, index,array)=>{
      sum += value
      console.log("我的",value,index,array)
    })
    console.log("我的sum",sum)

2 .map方法 计算数组并返回一个新数组

const  arr2 = arr.map((item,indes)=>{
        return item * 2
  })
 console.log("map方法返回一个新数组",arr2)

  1. filter方法 过滤数组的值返回新数组

    const arr3 = arr.filter((item)=>{
        return item > 3
    })
    console.log("过滤数组中大于三的数组",arr3)

  2. find方法 过滤数组中的数组，返回结果为true的第一个值

    const arr4 = arr.find((item)=>{
        return item >2
    })
    console.log("返回数组中为true第一个值",arr4)

  3. every方法 判断数组中的值，如果都满足为true，否则为flase

    const arr5 = arr.every((item)=>{
        return item > 2
    })
    console.log("判断值如果都满足,则为true",arr5)

12.export defult加deflut加或不加defult的区别

加defult导入不用加括号

// 第一组
export default function crc32() { // 输出
  // ...
}
import crc32 from 'crc32'; // 输入
1
2
3
4
5

不加deflut导入需要加括号

// 第二组
export function crc32() { // 输出
  // ...
};
import {crc32} from 'crc32'; // 输入

Vue

1.路由传递参数(对象写法)path是否可以结合params参数使用？

路由的跳转传参的时候,对象写法可以是name、path形式，但是path这种写法不能与params参数一起使用

2. diff算法

比较俩个js的对象的差异

vue diff算法跟react的diff算法的区别？

vue能明确知道那个地方要更新组件，react是不知道那个地方要更新只能从上往下找

3. 响应式原理

4. 虚拟Dom

表示真是Dom的js对象

5. router有那几种模式

一、hash模式 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号，有一点点丑。这是最安全的模式，因为他兼容所有的浏览器和服务器。

二、history模式 美化后的hash模式，会去掉路径中的 “#”。依赖于Html5 的history，pushState API,所以要担心IE9以及一下的版本，感觉不用担心。并且还包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作。

三、abstract模式

适用于所有JavaScript环境，例如服务器端使用Node.js。如果没有浏览器API，路由器将自动被强制进入此模式。

6. vue2和vue3的生命周期区别

vu2有11个生命周期，beforecreate,created,beforemoutd,moutd,beforeUpdate,update,beforedestory,

destoryed,

activitedkeep-alive 专属，组件被激活时调用，
deactivatedkeep-alive 专属，组件被销毁时调用，

如果只是单纯的数据展示，在哪个生命周期请求最好，答案：created，能早当然早，何必非得等到 mounted 的时候再请求呢，那什么情况下需要在 mounted 中请求呢，就是你需要操作 dom 的时候，这一块也是面试过程中经常会被问到的一个问题，需要仔细理解。

errorCaptured捕获一个来自子孙组件的错误时被调用

7. vu2和vue3的区别

  1. 生命周期不同

  2. 双向数据绑定原理不同

    vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。

使用了ES6的Proxy API对数据代理

  • defineProperty只能监听某个属性，不能对全对象监听
  • 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
  • 可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

3、是否支持碎片

vue2：vue2不支持碎片。

vue3：vue3支持碎片（Fragments） ，就是说可以拥有多个根节点。

  1. API类型不同

    vue2：vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。

    vue3：vue3使用合成型api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。

  2. 定义数据变量和方法不同

    vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){} ，创建的方法要在methods:{} 中。

    vue3：，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：

    • 从vue引入reactive；
    • 使用reactive() 方法来声明数据为响应性数据；
    • 使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据

    6、父子传参不同

    vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。

    vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。

8、main.js文件不同

vue2：vue2中我们可以使用pototype(原型) 的形式去进行操作，引入的是构造函数。

vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。

计算机网络

1. https一共发了几次请求

一共发生了俩次请求，第一次是option请求，其二条请求是实际发送的请求

啥是option请求？

opetion请求是在发生正式的请求之前，先进行一次预检请求。看服务端返回一些信息，浏览器拿到之后，看后台是否允许进行访问。

2. v8解析js
3.浏览器的内核？浏览器解析html文件
6. 在浏览器输入url点击确认以后发生了什么？

www.baidu.com

url => 统一资源定位符，俗称网址，url为ip的一个映射

www => 服务器(万维网)

https = > 加密传输协议

baidu.com => 域名

DNS => 匹配真实ip

第一次访问

image-20221130200433134

第二次访问 读取浏览器的缓存信息

渲染页面

css html

7.协商缓冲和强缓冲？
8.code码

401 身份认证没有通过

403

404 路由

500 服务器出问题

项目业务

1.定义一个搜索框，一个页面中传年龄，一个页面传姓名，一个页面传身高
  1. 使用props ，default 传一个默认的值，在别的页面中传入
  2. 插槽
  3. <commpont :is=""></commpont>
2. 后端突然返回100万条数据，前端如何去做优化
  1. 分页
  2. 虚拟列表
  3. 常任务分片
  4. 懒加载(new IntersectionObserber)
  5. 时间切片
4. vue第一次加载有些慢解决方法

linux

1、开放端口

firewall-cmd --zone=public --add-port=9200/tcp --permanent # 开放5672端口

firewall-cmd --zone=public --remove-port=5672/tcp --permanent #关闭5672端口

firewall-cmd --reload # 配置立即生效

2、查看防火墙所有开放的端口

firewall-cmd --zone=public --list-ports

3.、关闭防火墙

如果要开放的端口太多，嫌麻烦，可以关闭防火墙，安全性自行评估

systemctl stop firewalld.service

4、查看防火墙状态

firewall-cmd --state

5、查看监听的端口

netstat -lnpt

PS:centos7默认没有 netstat 命令，需要安装 net-tools 工具，yum install -y net-tools

6、检查端口被哪个进程占用

netstat -lnpt |grep 5672

7、查看进程的详细信息

ps 6832

8、中止进程

kill -9 6832

cenos7 没有 /etc/sysconfig/iptables

systemctl stop firewalld systemctl mask firewalld yum install -y iptables yum install iptables-services 然后就有iptables文件，就可以作配置

8. 开启服务

systemctl start iptables.service systemctl restart iptables.service // 重启防火墙使配置生效 systemctl enable iptables.service // 设置防火墙开机启动

9. nginx配置反向代理

typescript

vite

vite由什么框架组成？

hr面试

1. 领导给别人分配的活比较重，给其他人分配的活比较轻你会怎们想？

这是我的责任我应该这么做，如果有一天我撑不住了我会跟领导提，但是这是我的工作，我不回去管别的工作，我只是认为把我自己的工作做好可以了

2. 平时是怎么学习的?
  1. 读最新的技术文档
  2. 读书看大佬对某个知识的深入理解
  3. 读源码
  4. 向大佬请教
  5. 逛b站技术牛人
3. 前端规划？

我在这里积极学习大家，取长补短，跟大佬学习，我不会辞职，跟公司一起成长.

avatar
文章
阅读
粉丝