web前端面试题

1.隐藏网页中的元素有几种方式？这些方法有什么区别？
一：display：none;隐藏不占位
二：position：absolut;left/top:-99999px;足够大的负值使其不可见
三：visibility：hidden；隐藏占位，不会响应点击事件。
四：opacity：0；严格来说这个并不是隐藏，透明之后它还占据着页面位置，所以在重排的时候还是会被计算消耗性能。
五：width/height为0 而且可以在二级下拉菜单中设置其慢慢打开的效果。相对于 display来说适用范围太窄，但是好处是能使用 CSS3 动画。
六：拿一个白色div盖住它，或者和背景颜色相同。可以出现回字显现效果；
2.列出移动端适配的几种解决方案？
第一种方法：viewport适配（原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.）
第二种方法：借助media实现rem适配（）
https://blog.csdn.net/weixin_37632943/article/details/95471535
3.什么是异步数据加载？
就是在加载数据时仍然执行其bai他程序，通常加载时是不du执行程序的，zhi我们不得不等进度条，因为很多dao程序在没有加载数据时，可能是无法运行的，所以通常会加载完之后才运行。。。
异步加载就是在执行过程同时加载，通常会使图片之类重要性较次的东西，可以先忽略掉，比如网页游戏经常会在玩的过程中，玩家都是黑影（未加载图形，由其他黑影模型代替），如果另一个线程完成加载了，
在贴上去，就是异步的。。。。。。
4.列出两种vue常用的生命周期钩子函数？
vue生命周期即为一个组件从出生到死亡的一个完整周期，主要包括以下4个阶段：创建，挂载，更新，销毁
创建前：beforeCreate, 创建后:created
挂载前：beforeMount, 挂载后：mounted
更新前：beforeUpdate, 更新后：updated
销毁前：beforeDestroy, 销毁后：destroyed
https://blog.csdn.net/kobezzz/article/details/98493512
5.vue组件间的参数传递？
1).父组件--->子组件：父组件传值给子组件使用Props属性
2).子组件--->父组件：子组件传值给父组件使用Emit事件。
6.列出vue路由跳转并携带参数的方式？
1. router-link
2. this.$router.push() (函数里面调用)
3. this.$router.replace() (用法同上,push)
4. this.$router.go(n) ()向前或者向后跳转n个页面，n可为正整数或负整数
ps : 区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数
7.小程序onload和onshow的区别？
onLoad页面加载时调用，可以获取参数，通过options。

onShow页面显示时调用。
主要区别：

从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。

这点很重要：

1.如果加载列表页，二级页面对一级的列表页面内容有修改，则以及列表函数应该在onShow中加载，否则可以选择onLoad。

2.如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式：onLoad(options){ console.log(options.xxx) },这些参数都挂在在options.
8.解释一下css sprites，如何使用？
https://www.cnblogs.com/wuyinghong/p/3977245.html?tvd
9.如何用原生js给一个按钮绑定两个onclick事件？
事件监听 绑定多个事件
Var btn=document.getElementById(‘btn’);
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
10.拖拽会用到哪些事件？
https://developer.aliyun.com/ask/128661?spm=a2c6h.13159736
11.javascript中的定时器有哪些？他们的区别及用法是什么？
https://developer.aliyun.com/ask/128662?spm=a2c6h.13159736
12.请描述一下cookies sessionStorage和 Localstorage区别？
⒈localStorage长期存储数据，浏览器关闭数据后不丢失；

⒉sessionStorage数据在浏览器关闭后自动删除；

⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session storage和local storage不会自动把数据发给服务器，仅在本地保存；

⒋存储大小：cookie数据大小不会超过4K，session storage和local storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；

⒌有期时间：local storage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。session storage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；
13.编写一个方法去掉数组里面重复的内容？
https://blog.csdn.net/qq_39057641/article/details/83657584
14.document.write和innerHtml的区别？
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
15.什么是ajax？ajax的步骤？
客户端产生js的事件
创建XMLHttpRequest对象
对XMLHttpRequest进行配置
通过AJAX引擎发送异步请求
服务器端接受请求并且处理请求，返回html或者xml内容
XML调用一个callback()处理响应回来的内容
页面局部刷新
、https://blog.csdn.net/weixin_40687883/article/details/89380599
16.xml和json的区别？
数据体积方面，JSON相对XML来讲，数据的体积小，传递的速度更快些
数据交互方面，JSON与JavaScript的交互更加方便，更容易解析处理，更好地进行数据交互
数据描述方面，JSON对数据的描述性比XML较差
传输速度方面，JSON的速度要远远快于XML
17.undefind和null的区别？
null表示"没有对象"，即该处不应该有值。
（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。
18.从输入url到显示页面，都经历了什么？
https://www.cnblogs.com/wuwangxiaochou/p/10857067.html
19.请简述事件委托的使用方法？
https://www.jianshu.com/p/38d9cb5d1ac2
20.请简述fastclick实现原理？
https://www.cnblogs.com/ylweb/p/10549040.html
21.请简述HTTP协议中GET和POST的区别？
https://blog.csdn.net/LoveL_T/article/details/83272447
22.请简述HTTP协议中Content-Type的作用？
https://blog.csdn.net/hp_cpp/article/details/106966431
23.v-if和v-show有什么区别？
https://www.cnblogs.com/dengyao-blogs/p/11378228.html
24.vue生命周期函数？
https://blog.csdn.net/sleepwalker_1992/article/details/81158339
25.安装脚手架的命令，用脚手架穿件vue的命令？
https://blog.csdn.net/a419419/article/details/77938751
26.请简述JavaScript中变量提升问题，及如何必免提升？
27.请简述var let和const区别？const是锁定了地址还是值？
https://blog.csdn.net/yinuo_2/article/details/105596990
28.请简述Javascript中闭包问题？
https://www.cnblogs.com/Fayfer/p/6478906.html
29.请简述JavaScript中如何实现OOP面向对象的？
面向对象程序设计（Object-oriented programming，OOP）是一种程序设计范型，同时也是一种程序开发的方法。对象指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性。——维基百科

一般面向对象包含：继承，封装，多态，抽象
30.请简述JavaScript中函数的call/apply/bind区别？
https://www.jianshu.com/p/356861b9139c
31.请简述css em rem 的区别？
https://www.cnblogs.com/wind-lanyan/p/6978084.html
32.请简述viewport是什么？
33.请简述media-query使用场景？
http://www.mamicode.com/info-detail-1359621.html
34.请简述BFC是什么？
https://www.jianshu.com/p/71f034b16764
35.请简述css清浮动的方法？
36.请简述querySelector优先级？
https://blog.csdn.net/dalei9243/article/details/81075408
37.请简述自定义事件流程？
https://blog.csdn.net/lmm0513/article/details/89460447
38.