前端面试题(面试碰到的一些)(一)

1、浏览器的存储方式都有哪些?

  •      cookie:  优点——兼容性好,请求头自带cookie方便  。缺点——大小只有4k, 请求头加入          cookie 浪费流量(多用于记录登录状态)
  •      localStorage:  优点—— 操作方便,永久性存储,大小有 5M
  •      sessionStorage:  会话级别的储存方法,关闭页面会被清理 (仅在当前窗口有效)
  •     indexedDB: 它是NoSQL数据库,用键值对进行存储,可以进行快速读取操作

2、优化前端的方法:

        减少请求数量 (比如: 合并、减少重定向、使用缓存、尽量用字体图标)

        减小资源大小 (比如:css压缩,图片压缩等)

        优化网络链接 (比如: 使用DNS预解析、并行连接等)

        优化资源加载 (比如: 加载位置,加载时机,懒加载和预加载等)

         DOM 优化 (比如: Dom 读写分离、节流[throttle]或防抖[debounce]等) 

        webpack优化(比如:动态导入和按需加载、剔除无用代码、长缓存优化等)      

3、git 的常用操作

        git add (添加到暂存区)、git clone(下载项目)、git status(查看当前仓库状态)、git commit(提交暂存区到本地仓库)、git push(上传合并)、git pull(下载代码)

4、常见的代码规范

        命名规范(语义化、cssBEM 命名法,变量名采用小驼峰等)

        变量规范(尽量用let const 定义)

        字符串(统一用单引、用字符模板)

        函数(尽量使用箭头函数等)

        数组(用... 做浅拷贝)

5、前端解决跨域的方法

      5.1 jsonp   缺点: 只能发送get 请求

1、
$.ajax({url: 'http://www.domain2.com:8080/login', type: 'get', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "handleCallback", // 自定义回调函数名 data: {} });
2、
this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {params: {},jsonp: 'handleCallback'
}).then((res) => {console.log(res); 
})

        5.2 CORS 跨域资源共享

        5.3 nginx代理跨域(修改webpack.config.js 文件)

          

6、v-for 中为什么要用key? 

   key 主要用于DOM  diff 算法 ,标志组件的唯一性,为了高效的更新虚拟DOM,

   如果不使用 key  默认使用 ‘’就地复用‘’策略  

   注: 尽量不使用index 作为key ,要用唯一标识的值

7、遍历数组的几种方法?

         for()

        while

        forEach()

        every()是否都符合某条件,全部符合就返回true

        some()是否存在符合某条件,存在就返回true

        filter()过滤数组,返回满足条件的新数组

        map() 遍历每一项,对每一项进行操作,并返回新数组

        reduce()  常用于初始化一个值

        for.. in ... 本意是用来迭代对象,数组也属于特殊对象,所以也可以遍历数组但不推荐

        for... of ...  也可以迭代对象。支持return 和break

8、类型

        js类型

            基本类型:字符串,数字,布尔,null,undefined,symbol (es6 新引用的类型,标识独一无二的值)

            引用数据类型: 对象,数组,函数

扩展: 基本类型传递的是值,引用类型传递的是地址,所以引用类型才需要做深拷贝。(地址是可以共享一块内存的,值不可以共享一块内存)

      ts 类型

            字符,数字,布尔,数组,对象,元组(tuple),枚举(enum),任意(any),null, undefined,void, never , interface(接口)(加粗为ts 新增)

9、css 水平垂直居中的方法有哪些?

       1.flex

        {display: flex;justify-content:center;align-items:center } 或者{父元素设置display:fliax.子元素设置 margin:auto}

     优点: 不需要固定居中元素的宽高。

      2.grid 

        父元素设置 display: grid. 子元素{justify-self:center;align-self:center} 或者子元素设置 {margin: auto}

       缺点: 比flex 方法兼容性差一点。优点:不需要固定宽高

    3.absolute(定位) (absolute+transform)(absolute+calc)(absolute+ 负margin )(absolute + margin:auto)

      {position:absolute;left:50%;top:50;transform:translate(-50%,-50%) }

      {position:absolute;left:0;top:0;right:0;bottom:0;margin:auto }

    

10、vue的组件通讯有哪些?

      props(父-子) /  $emit(子-父)  /ref (子-父)  /eventBus (兄弟) / $parent或者$root (兄弟)/vuex / $attrs 和 $listeners (祖先-子孙)

11、浅拷贝和深拷贝的实现?区别?

     浅拷贝:只是进行一层复制,深层的引用还是共享,所以原对象和拷贝对象还是会互相影响

                 实现:赋值、Object.assign()(当对象只有一层是为深拷贝)、展开运算符、

     深拷贝: 无限层级的复制,所以原对象和拷贝对象不会互相影响。

                实现: 手动复制、object.assign()(只有一层才可用)、转成json 再转回来(最常用JSON.parse(JSON.stringify(obj1)))

12、js 闭包

    什么是闭包: 闭包是指有权访问另一个函数作用域里中变量的函数

    创建方法: 在一个函数内,创建另一个函数,创建的函数可以访问到当前函数的局部变量

    优点:缓存变量,避免变量全局污染

    缺点: 会造成内存泄漏

    特点: 封闭性(外界无法访闭包内部的数据)、持久性(在外部函数被调用之后,闭包结构仍然存在)

13、js 原型链

14、js继承

15、em 和 rem 的区别

       em 相对于父元素

       rem 相对于根元素

16、隐藏元素的方式

      display:none(不占据空间,页面重新渲染,性能消耗大)/visibility:hidden(占据空间,但是不能触发点击事件,性能消耗较少)/opacity:0(间距空间,并能触发点击事件,性能消耗较少)

17、 

18、动画

19、bfc

20、

21、http1.0和2.0的区别

22、同源策略限制内容有哪些

      不能读写浏览器缓存、js 无法获取dom 树、不能发送请求

23、vue 和react 的区别(https://worktile.com/kb/ask/19606.html)

      响应式原理不同:react 主要通过setStart()方法来更新状态,状态更新后组件也会重新渲染

      监听数据变化的原理不同:vue 是

      组件写法不同

      diff 算法不同

      框架本质不同: vue 是 mvvm 由mvc 发展来。react 是前端组件化框架,有后端组件化发展而来。

24、vue 渲染机制

25、箭头函数的优缺点

      优点:语法简洁、隐式返回减少代码量、解决了this指向问题(原生的写法,this指向调用者,箭头函数this 绑定的是定义时的那个对象)

     缺点: 箭头函数是匿名函数,不能作为构造函数、箭头函数中没有arguments 对象、

     跟普通函数的区别:this永远指向其父级对象的this        

26、xss 攻击

27、vue 中的data 属性的理解

       vue组件中,data 是一个函数,因为组件是复用的,所以每次调用都是一个新的data函数,自己管理自己的数据,互不影响

28、vue 双向绑定原理

        vue2 : 使用的是obeject.difineproperty() 中的 set和get 实现数据劫持+ 发布订阅模式

        vue3: 使用的是proxy 代理(优点: 直接监听对象、返回的是一个新的对象,有13种拦截方法)

29、兼容问题

     不同浏览器标签默认的内外边距不同  解决方法:初始化样式 *{margin:0,padding: 0} 等

     图片加a标签,在ie9 中会有边框  解决方法: 设置boder: none 

      ul li 浮动后,显示在div 外  解决方法:清除浮动clear:both

      兼容前缀:谷歌chrome(-webkit-) 火狐(-moz-)ie(-ms-)opera(-o-)

30、w3c 标准的理解

    一系列规范和技术标准

31、== 和=== 的区别

     == 只要值相同就为true (少用 == 因为没有类型限制,不严格)

    === 严格等于,值,类型都相等才可以。(建议一般用=== 更可靠,)

32、let const var 区别

      var: 函数作用域,没有块级的概念,可以垮块访问,不能垮函数

      let : 块级作用域,不能跨块,也不能跨函数

      const: 块级作用域,不能跨块,并且不能修改

33、const 定义的数组可以修改吗

       不可以。因为const 用于常量声明,表示该值不可修改

34、es6 新特性

       太多了。需要单独出一篇文章。列举一些常用的

        let  const,  symbol.模板字符串,includes()字符串新方法、解构赋值、...对象扩展符,箭头函数等 

      

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197189.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JIRA 重建索引加快速度

JIRA 重建索引加快速度 JIRA数据量大时,做一遍reindex的速度会很慢,经常需要几个小时 这是后需要查看CPU,如果做reindex时候CPU占用率不高,增加 index的线程数以加快 reindex 配置步骤 停止掉JIRA在home目录下的 jira-config.…

漫谈HBuilderX App-Jenkins热更新构建

漫谈Uniapp App热更新包-Jenkins CI/CD打包工具链的搭建 零、写在前面 HBuilderX是DCloud旗下的IDE产品,目前只提供了Windows和Mac版本使用。本项目组在开发阶段经常需要向测试环境提交热更新包,使用Jenkins进行CD是非常有必要的一步。尽管HBuilderX提…

python pyaudio给数据加噪声

python pyaudio给数据加噪声 # -*- coding: utf-8 -*- import argparse import array import math import numpy import numpy as np import random import wavedef get_args():parser argparse.ArgumentParser()parser.add_argument("--clean_file", typestr, req…

cordova详解

从八个方面让你快速了解cordova(一) - 掘金 从八个方面让你快速了解cordova(二) - 掘金 Cordova和React-Native两种框架的区别和优劣分析_cordova和react native-CSDN博客 Cordova开发App的优缺点是什么? - 咕噜企业…

开源CDN软件GoEdge —— 筑梦之路

官方网站:GoEdge CDN - 制作自己的CDN - GoEdge CDN | 自建CDN GoEdge是一款管理分布式CDN边缘节点的开源工具软件,目的是让用户轻松地、低成本地创建CDN/WAF等应用。 特性 免费 - 开源、免费、自由、开放 简单 - 架构简单清晰,安装简单&a…

Android,JNI开发和NDK之间的联系

Android,JNI开发和NDK。 1.jni和ndk jni是在jdk中就有出现的 在我们jdk路径中 D:\java\jdk11\include 这就是jdk中的jni Android开发环境中的ndk也有jni, D:\Android\sdk\ndk\20.0.5594570\toolchains\llvm\prebuilt\windows-x86_64\sysroot\usr\in…

DICE模型原理

随着温室气体排放量的增大和温室效应的增强,全球气候变化问题受到日益的关注。我国政府庄严承诺在2030和2060年分别达到“碳达峰”和“碳中和”,因此气候变化和碳排放已经成为科研人员重点关心的问题之一。气候变化问题不仅仅是科学的问题,同…

Django二转Day06

1.多表查询 基于对象 基于双下划线 正向和反向 聚合查询 分组查询(配合聚合使用) F查询和Q查询 2.其他字段和字段参数 其他字段 字段参数;ORM参数 ForeignKey 属性 ManyToManyField 用于表示多对多的关联关系。在数据库中通过第三…

解决msvcp140.dll丢失问题的5种方法,验证有效

在计算机编程和软件开发中,我们经常会遇到一些陌生的DLL文件,比如msvcp140.dll。这些DLL文件是动态链接库(Dynamic Link Libraries)的缩写,它们包含了可以被多个程序共享的代码和数据。那么,msvcp140.dll是…

优思学院|六西格玛中的过程管理思维

过程是什么? 过程(Process)是一系列相互关联的活动,将输入转化为输出,我们习惯于用 X 来表示输入,用 Y 来表示输出,就如下图一样。在产品(服务)质量形成过程中&#xff…

【ArcGIS Pro微课1000例】0048:深度学习--人群计数

文章目录 一、小学回忆录二、深度学习计算人头数三、案例实现一、小学回忆录 加载配套实验数据包中的图片及训练模型。你还记得当年的小学毕业班有多少同学吗?今天我们就用ArcGIS提供的人工智能工具,重温一下童年记忆。 二、深度学习计算人头数 本案例使用到的是深度学习中…

pyinstaller打包pyside

准备软件 准备一个python代码展示pyside的gui 安装PyInstaller 首先检查本机有没有安装PyInstaller ,如果没有安装的话,需要运行 pip3 install PyInstaller 打包windowed界面 pyinstaller -w pymain.py 问题 Could not find the Qt platform plugi…

UNDERSTANDING AND IMPROVING INFORMATION TRANSFER IN MULTI-TASK LEARNING

Z i _i i​ X i R i X_iR_i Xi​Ri​, X X X是Task embedding layers, R R R是Alignment matrices 辅助信息 作者未提供代码

编程实战:类C语法的编译型脚本解释器(七)语句

系列入口: 编程实战:类C语法的编译型脚本解释器(系列)-CSDN博客 本文介绍语句,主要是控制语句,if、else、for之类。 一、语句概览 //语句//EXPRESSION RETURN:expressions[0]//BLOCK:senetnces//IF:if(exp…

github setting在哪

像创建一个ssh连接, 参考:【Github问题解决】解决Github:fatal:unable to access ‘https://github.com/.../.git‘:Could not resolve host:git_阳的糖的博客-CSDN博客

安全测试之推荐工具(一)

文章目录 一、前言二、Web安全(一)AppScan(推荐)(二)AWVS(推荐)(三)Burp Suite(推荐)(四)OWASP ZAP 三、主机安…

《python每天一小段》--(9)使用Paramiko库,批量操作linux服务器

使用Paramiko库,批量操作多Linux服务器 使用Paramiko库建立SSH连接并执行命令获取多个Linux服务器的磁盘信息。通过这个例子,你可以学习到如何使用Python自动化操作远程服务器。 操作如图: 查看了两台服务器的磁盘容量: 安装模…

Socket 编程

1:针对 TCP 应该如何 Socket 编程? 服务端和客户端初始化 socket,得到文件描述符; 服务端调用 bind,将 socket 绑定在指定的 IP 地址和端口; 服务端调用 listen,进行监听; 服务端调用 accept&am…

单片机系统

我们来看单片机 的例子,读者可能会担心单片机(又称MCU,或微控制器) 过于专业而无法理解。完全没必要!在这里我们仅借它谈论一下有关时间的话题,顺带提一下单片机系统的概念。 单片机顾名思义是集成到一个芯…

高薪资是跳出来的,好工作是面出来的~

听人劝、吃饱饭,奉劝各位小伙伴,不要订阅该文所属专栏。 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,工作十余年, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发…