前端面试整理01（附答案）

最新推荐文章于 2024-07-24 10:10:12 发布

早日朝成

最新推荐文章于 2024-07-24 10:10:12 发布

阅读量508

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/weixin_44683255/article/details/106593471

版权

面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上问题，对于问题是自己网上查找，结合自己的整理出来的，有不合理的地方，请指出来！

1讲一下es6有哪些新特性

let和const命令
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 const声明一个只读的常量。一旦声明，常量的值就不能改变。但是const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

数组的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

扩展

数据结构 map、set

arrow (箭头函数)

class 类

proxy

promise对象

.....

2,css3中的anvas绘画，node.js, webpack是否有了解

3,html第一行！doctype是做上面用的

定义和用法声明必须是 HTML 文档的第一行，位于标签之前。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
提示和注释
注释：<!DOCTYPE> 声明没有结束标签。
提示：<!DOCTYPE> 声明对大小写不敏感。
…

4,css动画特性可以用js实现，网上还要用css实现

5,ajax请求数据重新处理和拦截器

6,boorstarp中栏珊的24个是怎么做到的

7,轮播图怎么考虑实现的

8,git的常用操作

远程仓库类： git clone/remote/pull/push/rebase/fetch
分支类： git branch/tag/checkout/stash
信息查阅： git status/log/reflog/diff
本地常规操作： git add/commit/rm/merge/reset/revert

git add # 将工作区的修改提交到暂存区
git commit # 将暂存区的修改提交到当前分支
git reset # 回退到某一个版本
git stash # 保存某次修改
git pull # 从远程更新代码
git push # 将本地代码更新到远程分支上
git reflog # 查看历史命令
git status # 查看当前仓库的状态
git log # 查看提交历史
git revert # 回退某个修改
git merge # 合并分支

…

9,除了视频网站学习还会怎么学习

10,简单说下get和post的区别

参考：https://www.cnblogs.com/kangleweb/p/12906342.html
POST和GET都是向服务器提交数据，并且都会从服务器获取数据。

区别：

1、传送方式：get通过地址栏传输，post通过报文传输。

2、传送长度：get参数有长度限制（受限于url长度），而post无限制

3、GET和POST还有一个重大区别，简单的说：

GET产生一个TCP数据包；POST产生两个TCP数据包

长的说：

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。

因为POST需要两步，时间上消耗的要多一点，看起来GET比POST更有效。因此Yahoo团队有推荐用GET替换POST来优化网站性能。但这是一个坑！跳入需谨慎。为什么？

GET与POST都有自己的语义，不能随便混用。
据研究，在网络环境好的情况下，发一次包的e799bee5baa6e4b893e5b19e31333365656532时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。
并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

建议：

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

案例：一般情况下，登录的时候都是用的POST传输，涉及到密码传输，而页面查询的时候，如文章id查询文章，用get 地址栏的链接为：article.php?id=11，用post查询地址栏链接为：article.php，不会将传输的数据展现出来。

拓展资料：

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中。
。。。

11,h5的新特性，和css3的新特性

链接：https://www.jianshu.com/p/ac6e72056053 来源：简书
·1.语义化标签 header、footer、section、nav、aside、article

2.新的表单元素
progress 进度条，展示连接/下载进度
meter 刻度尺/度量衡，描述数据所处的阶段（红色危险，黄色警告，绿色优秀）
output：输出内容，与以上表示所处的数据是经过计算而输出得到的

3.表单新属性
placeholder：占位提示文字
mutiple：是否允许多个输入
autofocus：自动获得输入焦点，页面上只能有一个
form：指定输入元素所丛书的表单，可以实现输入框放在表单外部并能被提交的效果

4.新的表单类型
type: number、email、tel、calendar、time、search等

5.本地存储
localstorage、sessionStorage、indexedDB
区别：
localstorage一直存在，sessionStorage关闭页面之后消失；
localstorage没有过期时间（可以加字段解决），cookie有（如果不设置具体时间，关闭浏览器消失）；
localstorage存储上限最低为2.6M（cookie上限为4095字节），如果高于2.6M使用indexedDB，indexedDB上限250M；

6.离线web应用

7.地理定位
提供 api访问地理位置，通过navigator.geolocation来实现访问
有三个方法：

getCurrentPosition()
watchPosition()
clearWatch

8.canvas

9.svg绘图

10.video、audio新媒体视频/音频
…

12,seo的搜索引擎优化

什么是SEO：以下内容摘自百度百科：

SEO（Search Engine Optimization）:汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。
SEO原理
其实搜索引擎做的工作是相当复杂的，我们这里简单说一下大致的过程。后续针对SEO如何优化，也会根据这几个点展开描述。

页面抓取：蜘蛛向服务器请求页面，获取页面内容
分析入库：对获取到的内容进行分析，对优质页面进行收录
检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果
SEO优化
既然是优化，那我们就得遵循SEO的原理来做，可谓知己知彼，百战不殆。针对上面提出的三点，我们分别展开叙述。我们这里主要以百度蜘蛛举例。

页面抓取
如何才能吸引蜘蛛光顾我们的网站，如何才能让蜘蛛经常光顾我们的网站。这里提出以下几个优化点：

提交页面。提交页面又分为几种不同的方式

sitemap提交。sitemap，顾名思义，就是网站地图，当蜘蛛来到我们的网站时，告诉它我们有多少页面，不同页面是按什么分类的，每个页面的地址是什么。顺着我们的指引，蜘蛛会很轻松的爬遍所有内容。另外，如果你的页面分类比较多，而且数量大，建议添加sitemap索引文件。如果站点经常更新添加新页面，建议及时更新sitemap文件；
主动提交。就是把你的页面直接丢给百度的接口，亲口告诉百度你有哪些页面，这是效率最高也是收录最快的方式了。但是需要注意，百度对每天提交的数量是有限制的，而且反复提交重复的页面，会被降低每日限额，所以已被收录的页面不建议反复提交。收录有个时间过程，请先耐心等待；
实时提交。在页面中安装百度给的提交代码，当这个页面被用户打开我，便自动把这个页面提交给百度。这里不需要考虑重复提交的问题。
以上几种提交方式可以同时使用，互不冲突。

保证我们的页面是蜘蛛可读的。
早在ajax还没流行的的时候，其实SEO对于前端的要求并没有很多，或者说，那个时候还没有前端这个职业。页面全部在服务器端由渲染好，不管是用户还是蜘蛛过来，都能很友好的返回html。ajax似乎原本是为了避免有数据交互导致必须重刷页面设计的，但是被大规模滥用，一些开发者不管三七二十一，所有数据都用ajax请求，使得蜘蛛不能顺利的获取页面内容。庆幸的是这反倒促进了前端的飞速发展。

到了后来，各种SPA单页应用框架的出现，使得前端开发者不再需要关心页面的DOM结构，只需专注业务逻辑，数据全部由Javascript发ajax请求获取数据，然后在客户端进行渲染。这也就导致了老生常谈的SEO问题。百度在国内搜索引擎的占有率最高，但是很不幸，它并不支持ajax数据的爬取。于是，开发者开始想别的解决方案，比如检测到是爬虫过来，单独把它转发到一个专门的路由去渲染，比如基于Node.js的Jade引擎（现在改名叫Pug了），就能很好地解决这个问题。React和Vue，包括一个比较小众的框架Marko也出了对应的服务端渲染解决方案。详细内容查看对应文档，我就不多说了。

URL与301
URL设置要合理规范，层次分明。如果网站到了后期发现URL不合理需要重新替换时，会导致之前收录的页面失效，就是我们所说的死链（这种情况属于死链的一种，404等也属于死链）。所以一定要在网站建设初期就做好长远的规划。一旦出现这种情况也不要过于担心，我们可以采取向搜索引擎投诉或者设置301跳转的方式解决。

URL层级嵌套不要太深，建议不超过四层。增加面包屑导航可以使页面层次分明，也有利于为蜘蛛营造顺利的爬取路径。

除此之外，将指向首页的域名全部设置301跳转到同一URL，可以避免分散权重。

分析入库
当蜘蛛把页面抓取回去之后，就需要对页面内容进行分析，并择优收录入库。为什么说是择优呢？下面我给你慢慢分析。

搜索引擎的目的是给用户提供高质量的、精准的搜索结果。如果整个页面充斥着满满的广告和各种不良信息，这无疑会很大程度上影响用户体验。

除此之外，你肯定不希望自己辛辛苦苦创作的文章被别人轻而易举的抄走，所以搜索引擎在一定程度上帮助你避免这种情况的发生。对于已经收录的内容，搜索引擎会降低其权重，甚至直接不收录这个页面。即便是这样，为了保证页面的新鲜度，很多网站都会爬取或者转载其他网站的内容。这就是我们经常听到的伪原创。所以，想要让你的页面能够以较高的权重被收录，就需要坚持更新网站内容，并且是高质量的原创内容。

检索排序
这块我的理解是，页面被收录后，会给每个页面打一些tag。这些tag将作为搜索结果排序的重要依据。比如用户搜索“北京旅游”，搜索引擎会检索收录页面中被打了“北京旅游”tag的页面，并根据一系列规则进行排序。所以，如何提升这些tag在搜索引擎里面的权重是至关重要的。

TDK优化
TDK是个缩写，seo页面中的页面描述与关键词设置。
其中"T"代表页头中的title元素，这里可能还要利用到分词技术，当标题(Title)写好后，我们就尽可> 能不要再去修改了，尽量简洁，没意义的词尽量不要加入到标题中，避免干扰到搜索引擎识别网站主题。

其中"D"代表页头中的description元素，要知道描述是对网页的一个概述，也是对title的补充，因为title中只能书写有限的字数，所以在description中就要稍微详细的补充起来，一般用一句两句话概括文章的内容。

其中"K"代表页头中的keywords元素，提取页面中的主要关键词，数量控制在三到六个内。想方设法让主关键字都出现。

以上内容摘自百度百科，这里需要补充几点。

TDK是搜索引擎判断页面主题内容的关键，所以要在title里面言简意赅的体现出页面的主要内容，如果主体比较多，可以用一些符号把不同的主题词隔开，但是关键词不要太多，最多不要超过五个。

keywords里面把每个关键词用英文逗号隔开，三到五个最佳。尽量覆盖每个关键词。

description就是用自然语言描述页面的主要内容，这里注意一点就是把每个关键词至少覆盖一遍才能达到最佳效果。

提升页面关键词密度
首先说个概念，叫关键词密度。简单理解就是关键词在所有文字内容中出现的比例。提升关键词的密度，有利于提升搜索引擎针对对应关键词的搜索排名。但并不是我们整个页面密密麻麻堆砌关键次就好，我们来分析一个案例。

我们在百度搜索“北京旅游”，排在第一的是百度旅游，这个就不解释了。排第二位是携程，我们就分析一下为啥携程会排名这么靠前。

通过查看百度快照，可以一目了然的看到页面上究竟哪些地方命中了这些词。

页面头部

页面底部

页面很清晰表明了关键词出现的地方，我们发现这个页面除了正文部分外，还设置了许多的模块，这些模块看似只是一些简单的链接，实际上他们更重要的使命就是服务SEO，提升关键词的密度。同时，这些链接都是指向网站内部的链接，通过这样的方式，还可以在不同的页面之间相互投权重。可以说小链接，大学问！

你以为到此结束了？并没有。请仔细观察页面上这些模块的内容设置。分别覆盖了地区、景点、攻略、导航、住宿、交通等等，可以说是涵盖了你要旅游所需要的任何需求。这样一来，不管你搜哪些有关于“北京旅游”的关键词，比如“北京旅游住宿”，“北京特色美食”等都会命中这个页面的词，这使得这个页面的关键词数量得到提升，更容易得到曝光。

细枝末节但不可忽视的优化
页面上经常会有各种图片，对于搜索引擎来说，它是不识别图片上的内容的。你可能知道代码中img标签的alt属性是为了图片加载失败的时候，给用户看的。这个属性表明了这张图的内容。其实搜索引擎在分析页面的时候，也会根据这个词去判断图片的内容，所以要给页面上有意义的图片都加上alt属性，写清楚图片索要反映的内容。

页面上的出站链接（也就是指向别的网站的A标签），我们要给它加上nofollow标签，避免它向别的网站输出权重。百度蜘蛛会忽略加了nofollow 的链接。你也可以在网页的meta标签里这么写，这样一来，百度蜘蛛将不追踪页面上的所有链接，但不建议这么做，除非这个页面的所有链接都指向了别的域名。

…

其他优化点
友情链接
我们经常会在页面底部看到友情链接。友情链接是作为网站之间相互交换流量，互惠互利的合作形式。事实上，友情链接对网站权重提升有着至关重要的作用。友链不仅可以引导用户浏览，而且搜索引擎也会顺着链接形成循环爬取，可以有效提升网站流量和快照的更新速度。

关键词筛选
借助站长工具、爱站网或者各种站长后台我们可以分析出ip来路，以及关键词的搜索热度和相关词，我们再把这些词以一定的密度添加到页面中，以此来提升命中率。这里主要是运营同学的工作，我不专业，也就不展开说了，更多功能大家自行摸索。

利用好分析工具
我们要在自己的站点安装百度统计代码，这样就可以分析出站点内用户的关注度和浏览流程，以此来不断优化站点结构，提升用户的留存率。同时也可以做用户画像，分析用户数据等等。

13,const定义对象能否改变

能

14,let和var在全局定义的时候有上面区别

全局变量，区域生效！

15,js的三大事件

作者：G_zefeng 链接：https://www.jianshu.com/p/fd13be573156 来源：简书

鼠标事件

click：单击
dblclick：双击
mousedown：鼠标按下
mouseup：鼠标抬起
mouseover：鼠标悬浮
mouseout：鼠标离开
mousemove：鼠标移动
mouseenter：鼠标进入
mouseleave：鼠标离开

鼠标单击
鼠标双击
鼠标按下和抬起
鼠标悬浮和离开
鼠标移动
鼠标进入和离开

<script>
    function myClick() {
        console.log("你单击了按钮！");
    }
    function myDBClick() {
        console.log("你双击了按钮！");
    }
    function myMouseDown() {
        console.log("鼠标按下了！");
    }
    function myMouseUp() {
        console.log("鼠标抬起了！");
    }
    function myMouseOver() {
        console.log("鼠标悬浮！");
    }
    function myMouseOut() {
        console.log("鼠标离开！")
    }
    function myMouseMove() {
        console.log("鼠标移动！")
    }
    function myMouseEnter() {
        console.log("鼠标进入！")
    }
    function myMouseLeave() {
        console.log("鼠标离开！")
    }

键盘事件

keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起

<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
<script>
    /*输出输入的字符*/
    function myKeyDown(id) {
        console.log(document.getElementById(id).value);
    }
    /*按键结束，字体转换为大写*/
    function myKeyUp(id) {
        var text = document.getElementById(id).value;
        document.getElementById(id).value = text.toUpperCase();
    }
</script>

HTML事件

load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
resize：窗口尺寸变化
scroll：滚动条移动

<body onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body>
<script>
    window.onload = function () {
        console.log("文档加载完毕！");
    };
    /*window.onunload = function () {
     alert("文档被关闭！");
     };*/
    /*打印选中的文本*/
    function mySelect(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*内容被改变时*/
    function myChange(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*得到光标*/
    function myFocus() {
        console.log("得到光标！");
    }
    /*窗口尺寸变化*/
    window.onresize = function () {
        console.log("窗口变化！")
    };
    /*滚动条移动*/
    window.onscroll = function () {
        console.log("滚动");
    }
</script>

事件模型：

<body>
<!--脚本模型：行内绑定-->
<button onclick="alert('hello')">hello</button>
<!--内联模型-->
<button onclick="showHello()">hello2</button>
<!--动态绑定-->
<button id="btn">hello3</button>
</body>
<script>
    function showHello() {
        alert("hello");
    }
    /*DOM0：同一个元素只能添加一个同类事件
     * 如果添加多个，后面的会把前面的覆盖掉*/
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("hello");
    };
    btn.onclick = function () {
        alert("hello world");
    };
    /*DOM2:可以给一个元素添加多个同类事件*/
    btn.addEventListener("click", function () {
        alert("hello1");
    });
    btn.addEventListener("click", function () {
        alert("hello2");
    });
    /*不同浏览器的兼容写法*/
    /*IE*/
    if (btn.attachEvent) {
        btn.attachEvent("onclick", function () {
            alert("hello3");
        });
    /*W3C*/
    } else {
        btn.addEventListener("click", function () {
            alert("hello4");
        })
    }
</script>

事件冒泡与事件捕获：

 <style>
        #div1{
            width: 400px;
            height: 400px;
            background-color: #0dfaff;
        }
        #div2{
            width: 300px;
            height: 300px;
            background-color: #33ff66;
        }
        #div3{
            width: 200px;
            height: 200px;
            background-color: #fff24a;
        }
        #div4{
            width: 100px;
            height: 100px;
            background-color: #ff4968;
        }
    </style>
 <title>事件冒泡、事件捕获</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">
 
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var div1 = document.getElementById("div1");
    div1.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div1");
    },false);
    var div2 = document.getElementById("div2");
    div2.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div2");
    },false);
    var div3 = document.getElementById("div3");
    div3.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div3");
    },false);
    var div4 = document.getElementById("div4");
    div4.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div4");
    },false);
</script>

阻止默认事件：

<body>
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
</body>
<script>
    function stop(event) {
        if (event.preventDefault()) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        alert("不跳转！")
    }
</script>