前端面试题总结

qq_42318977

已于 2022-02-28 14:14:17 修改

阅读量174

点赞数

分类专栏：日常小技巧文章标签： html css javascript jquery

于 2020-08-16 17:05:08 首次发布

本文链接：https://blog.csdn.net/qq_42318977/article/details/108037275

版权

日常小技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.怎么使用css让一个div垂直居中？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  div{
    /*绝对定位，*/
    position:absolute;
    width:200px;
    height:200px;
    /*距离父元素的顶部的一半距离，这里没有定义父元素则是浏览器可视窗口的一半。*/
    top:50%;
    /*距离父元素的左边的一半距离，这里没有定义父元素则是浏览器可视窗口的一半。*/
    left:50%;
    /*取自身div盒子的一半高，y轴坐标上移100px*/
    margin-top:-100px;
    /*取自身div盒子的一半宽，x轴坐标左移100px*/
    margin-left:-100px;
    background-color: orange;
  }
</style>
<body>
<div>123</div>
</body>
</html>

2.vue router跳转方式
（a） this. $r o u t e r . p u s h () 跳转到不同的 u r l ，但这个方法会向 h i s t o r y 栈添加一条记录，点击后退会返回到上一个页面。 t h i s .$ router.push({path: ‘/home/sort/detail’,query:{id: ‘abc’}})
获取参数 {{this. $KaTeX parse error: Expected 'EOF', got '}' at position 19: \dotste.query.userId}̲} this.$ router.push({name: ‘detail’,params:{id: ‘abc’}})
获取参数：{{this.$route.params.userId}}

https://www.cnblogs.com/jiajiamiao/p/11609335.html

3.let var const的区别：
var定义全局变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义局部变量，只能在块作用域里访问，值和类型都可以改变。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4.Ajax请求原理解析
什么是Ajax？
Ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

https://www.jianshu.com/p/67f0e7f32011

1：创建XMLHttpRequest对象
2：准备请求
3：发送请求
4：处理响应

https://www.cnblogs.com/jiajiamiao/p/11609335.html

5.get和post的区别：
GET和POST本质上没有区别，一个重大区别，简单的说：GET产生一个TCP数据包；POST产生两个TCP数据包。

https://www.cnblogs.com/mark5/p/11075383.html
https://www.cnblogs.com/jiajiamiao/p/11609335.html

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
在这里插入图片描述
6.跨域问题：

7.浮动和定位的区别：浮动会自动排列自动折叠，定位需要配合top、left等属性定位。
浮动、绝对定位、固定定位均脱离标准流，相对定位占有原来的位置
8.从输入url到页面加载完成发生了什么？——前端角度
、浏览器的地址栏输入URL并按下回车。
、浏览器查找当前URL的DNS缓存记录。
、DNS解析URL对应的IP。
、根据IP建立TCP连接（三次握手）。
、HTTP发起请求。
、服务器处理请求，浏览器接收HTTP响应。
、渲染页面，构建DOM树。
、关闭TCP连接（四次挥手）
9.vue的生命周期
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
beforeCreate: vue元素的挂载元素el和数据都为undefined，还未初始化；
created：vue实例的数据对象data有了，el还没有；
beforeMount：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟dom节点上，data.message还未替换；
mounted：vue实例挂载完成，data.message成功渲染。
更新前后：data变化时会触发beforeUpdate和updated方法；
销毁前后：beforeDestory和destoryed，在执行destoryed方法后，对data的改变不会触发周期函数，说明vue实例已经解除了事件监听以及dom绑定，但是dom结构依然存在；

vue生命周期的作用：
他的生命周期中有多个事件钩子，让我们控制整个vue实例的过程时更容易形成良好的逻辑。
生命周期钩子的一些使用方法：
beforeCreate：loading事件，在加载实例时触发。
created：初始化完成事件，异步请求。
mounted：挂载元素，获取dom节点
uptaded：对数据统一处理
beforeDestory：确认事件停止。
nextTick：更新数据后立即操作dom。
10.js的作用域和原生链
作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，现有三个作用域。特点是先在自己的变量范围中查找，如果找不到才会沿着作用域往上找。
原生链是针对函数的。
11.怎么理解js中的内存泄露
定义：程序不需要的内存，由于某些原因其不会返回到操作系统或者可用内存池中。内存泄露会导致（运行缓慢，高延迟，崩溃）的问题
常见的导致内存泄露的原因有：
1；意外的全局变量
2；被遗忘的计时器或回调函数
3；脱离文档的DOM的引用
4；闭包
12.js怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入
3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性
13.写出3个使用this的典型应用

https://blog.csdn.net/sinat_17775997/article/details/82756609?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159642573919195265953247%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=159642573919195265953247&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-3-82756609.first_rank_ecpm_v3_pc_rank_v2&utm_term=%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%A2%98%E5%8F%8A%E7%AD%94%E6%A1%88&spm=1018.2118.3001.4187

（1）、在html元素事件属性中使用，如：

复制代码
（2）、构造函数

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}复制代码
（3）、input点击，获取值

复制代码 14.行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img 15.简述一下src与href的区别 href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
16.比较typeof与instanceof？
相同点：JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。

typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。

细节：

(1)、typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。

(2)、typeof 来获取一个变量是否存在，如 if(typeof a!=“undefined”){alert(“ok”)}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。

(3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。
17.jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

实例如下：`

18.xml和json的区别；
q：json数据体积小，传递速度快，JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互，XML对数据描述性比较好；
19.undefined 和 null 区别；
q：null： Null类型，代表“空值”代表一个空对象指针，使用typeof运算得到 “object”
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。(null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。)