前端面试锦集
前端面试锦集
- 自我介绍：
- List item.html常用的标签
Div,span,p,h1-h5,input,img,strong,a,hr,br
http://www.divcss5.com/html/h50219.shtml - html5的新特性
（1）websocket：https://www.runoob.com/html/html5-websocket.html
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 - ajax的工作原理:
通过XmlHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript来操作DOM而更新页面
Ajax优势：
页面无刷新，在页面内与服务器通信，给用户的体验非常好
使用异步方式与服务器通信，不需要打断用户操作，具有更加迅速的响应能力
可以嫌少服务器的负担，利用客户端闲置能力来处理任务
Ajax工作流程：
创建Ajax对象(XmlHttpRequest)
判断数据的传输方式（get/post）
打开连接open()
发送send()
ajax的js写法
//get方法
var ajax = new XMLHttpRequest();
ajax.open('get','getStar.php?starName='+name);
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
console.log(ajax.responseText);//输入相应的内容
}
}
//post方法
var xhr = new XMLHttpRequest();
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post', '02.post.php' );
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
-
js基本数据类型:Boolean null string number undefined
复杂数据类型:object
全局数据类型:Marth -
浏览器前端发送url到服务器的过程
https://www.cnblogs.com/max-tlp/p/6827956.html
大体分为三步：
一、浏览器向服务器发送请求（在地址栏中输入网页地址）
二、服务器收到请求找到资源返回给浏览器
三、浏览器解析服务器返回的内容（页面显示的内容）。
URL结构,DNS解析,DNS缓存,三次tcp握手,http请求,http响应,浏览器渲染,前后端交互,四次挥手https://www.jianshu.com/p/417ac86ef086 -
响应式布局怎么实现
（1） 原生代码实现：@media screen可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。
（2） 采用bootstrap框架布局 -
css实现水平垂直居中
水平居中 margin：0 auto；
垂直居中： https://www.cnblogs.com/zhouhuan/p/vertical_center.html -
页面是怎样加载和渲染的过程
-
数组的操作
-
vue.js的好处
-
html5比html4好在哪里
-
canvas调用了那些api
-
js获取页面url
-
状态码有哪些 作用是什么 404 401 400 500 200 302等
-
ajax请求实现的过程：
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 -
前端技术栈有哪些
vuejs：是一套构建用户界面的渐进式框架。它最大的优势就是组件化，用这个框架可以把很多元素封装成组件，最后功能的开发变成了组件的拼装，极大的提高了代码的复用。
reactjs，boots TV，nodejs -
js出现点击上一个模块下一个模块同样被点击应如何处理。事件捕获事件冒泡
-
函数声明、函数表达式及匿名函数的区别和调用指向https://www.cnblogs.com/zhouhuan/p/vertical_center.html
https://blog.csdn.net/weixin_44505375/article/details/86499744
函数声明：function fnName () {…};使用function关键字声明一个函数，再指定一个函数名，叫函数声明。
函数表达式 ：var fnName = function () {…};使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。
匿名函数：function () {}; 使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式， -
立即执行函数（自执行函数）
https://blog.csdn.net/qq_42051213/article/details/80767256
立即执行函数的两种常见形式：( function(){…} )()和( function (){…} () )，一个是一个匿名函数包裹在一个括号运算符中，后面再跟一个小括号，另一个是一个匿名函数后面跟一个小括号，然后整个包裹在一个括号运算符中，这两种写法是等价的。要想立即执行函数能做到立即执行，要注意两点，一是函数体后面要有小括号()，二是函数体必须是函数表达式而不能是函数声明。
除了使用()运算符之外，！，+，-，=等运算符都能起到立即执行的作用。这些运算符的作用就是将匿名函数或函数声明转换为函数表达式，如下图所示，函数体是函数声明的形式，使用运算符将其转换为函数表达式之后就可达到立即执行效果。
使用立即执行函数的好处：通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。此时若是想访问全局对象，将全局对象以参数形式传进去即可。 -
什么是跨域，解释一下
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
同源：是指，域名，协议，端口均相同，localhost和127.0.0.1虽然都指向本机，但也属于跨域。
解决办法：
1、JSONP：
使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。
2、代理：
例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
3、PHP端修改header（XHR2方式）
在php接口脚本中加入以下两句即可：
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式 -
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
clientWidth = width+左右padding
offsetWidth = width + 左右padding + 左右boder
scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度比如滚动条）。
width：content内容宽度。
https://blog.csdn.net/qq_42089654/article/details/80515916 -
牛客网 https://www.nowcoder.com/profile/308592184/myFollowings
-
线程与进程的区别
一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 -
如何对网站的文件和资源进行优化？
-
请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left…)
4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6.减少http请求（合并文件，合并图片）。 -
请写一个简单的幻灯效果页面
如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）
(1) js实现方法
//css
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#demo{
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
#list{
position: relative;
width: 100%;
height: 100%;
}
#list li{
width: 100%;
height: 100%;
position: absolute;
opacity: 1;
}
#list li img{
width: 100%;
height: 100%;
}
#btn{
position: absolute;
right: 10px;
bottom: 10px;
z-index: 10;
}
#btn li{
position: relative;
float: left;
width: 20px;
height: 20px;
background-color: #fb7a24;
color: #ffffff;
margin: 6px;
text-align: center;
border-radius: 90px;
font-size: 13px;
}
#btn li:hover{
background-color: #FF0000;
}
.current{
background-color: #FF0000!important;
}
style>
<div id="demo">
<ul id="list">
<li><img src="img/img_1.jpg" alt="">li>
<li><img src="img/img_2.jpg" alt="">li>
<li><img src="img/img_3.jpg" alt="">li>
<li><img src="img/img_4.jpg" alt="">li>
<li><img src="img/img_5.jpg" alt="">li>
ul>
<ul id="btn">
<li class="current">1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
div>
//js
<script type="text/javascript">
var list=document.getElementById('list');
var oLi=list.getElementsByTagName('li');
console.log(oLi)
var btn=document.getElementById('btn');
var oImg=btn.getElementsByTagName('li');
console.log(oImg)
var time=null;
var b=0;
function show(a) {
for(var i=0;i<oLi.length;i++)
{
oLi[i].style.opacity=0;
oImg[i].className='';
}
oLi[a].style.opacity=200;
oImg[a].className='current';
}
function autoPlay() {
time=setInterval(function () {
b++;
if(b>=oImg.length)
b=0;
show(b)
},1000);
}
autoPlay();
//鼠标控制
for(var i=0;i<oImg.length;i++){
oImg[i].index = i;
oImg[i].onmouseover=function () {
clearInterval(time);
show(this.index)
}
oImg[i].onmouseout=function(){
autoPlay();
}
}
script>
（2）css3实现方法
<div class="banner">div>
//css3
<style type="text/css">
.banner{
width: 600px;
height: 400px;
margin: 15px auto;
background-size: cover;
background-position: center;
animation-name: mymove;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-webkit-keyframes mymove {
0% {
background: url(" img/img_1.jpg") no-repeat;}
25% {
background: url(" img/img_2.jpg") no-repeat;}
50% {
background: url(" img/img_3.jpg") no-repeat;}
75% {
background: url(" img/img_4.jpg") no-repeat;}
100% {
background: url(" img/img_5.jpg") no-repeat;}
}
style>
- .什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？
FOUC(Flash Of Unstyled Content)–文档样式闪烁
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在之间加入一个或者