本文链接：https://blog.csdn.net/weixin_43297986/article/details/83386543

前端面试题目

数组去重并从大到小排序

<script>
	function test(a,b){            
		return a-b;        
	}        
	var arr = [1,9,24,7,1,5,3,9,1];        
	var res=[];        
	for(var i = 0;i < arr.length; i++){            
		if(res.indexOf(arr[i])==-1){                
		res.push(arr[i]);               
		res.sort(test);                           
		}        
	}        
	res.reverse();        
	alert(res);    
</script>

一次完整的http请求
1：建立Tcp连接；
2：web浏览器向web服务器发出请求命令；
3：web浏览器发出请求头信息
4：web服务器应答
5：web服务器向web浏览器发送应答头信息
6：web服务器向web浏览器发送数据
7：关闭TCP连接
正则表达式实现邮箱校验

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
window.onload = function()
{
    var oTxt = document.getElementById("txt");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function()
    {
        var re = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
        if(re.test(oTxt.value))
        {
            alert("你写对了");
        }
        else
        {
            alert("你写错了");
        }
    }
}
</script>
</head>
<body>
<input type="text" id="txt">
<input type="button" id="btn" value="校验">
</body>
</html>

行内元素、块内元素、空（void）元素都有哪些？
行内元素：a、b、span、select、input、img、strong、em、button、label、textarea
块状元素：div、ul、li、h1~h6、blockquote、dl、dt、dd、p
空（void）元素：br、hr、input、meta、link、img
css中position属性值有哪些？含义是什么？有什么区别？
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
vue的生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。
前端性能优化
一、内容优化
(1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。
(2)减少DNS查找
(3)避免重定向
(4)使用Ajax缓存
(5)延迟加载组件,预加载组件
(6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。
(7)最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
(8)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。
二、服务器优化
(1)使用内容分发网络（CDN）：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
(2)GZIP压缩
(3)设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
(4)提前刷新缓冲区
(5)对Ajax请求使用GET方法
(6)避免空的图像src
三、Cookie优化
(1)减小Cookie大小
(2)针对Web组件使用域名无关的Cookie
四、CSS优化
(1)将CSS代码放在HTML页面的顶部
(2)避免使用CSS表达式
(3)使用来代替@import
(4)避免使用Filters
五、javascript优化
(1)将JavaScript脚本放在页面的底部。
(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)缩小JavaScript和CSS
(4)删除重复的脚本
(5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。
(6)开发智能的事件处理程序
(7)javascript代码注意：谨慎使用with,避免使用eval Function函数,减少作用域链查找。
六图像优化
(1)优化图片大小
(2)通过CSS Sprites优化图片
(3)不要在HTML中使用缩放图片
(4)favicon.ico要小而且可缓存
谈谈对于前端工程师的理解