前端面试题(基础部分)

自我回顾,大神绕道
一些关键字: webp

js常用面试题: 添加链接描述

_______________________________________________________
一个面试的全面指导

更加全面: :
https://www.jianshu.com/p/df60fc6b15a6

https://www.jianshu.com/p/2d0957861a4e

题目不在于多,重要的是自己用心去体会;

CSS3 新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

css实现垂直水平居中

定位，top和left设置50%，再通过transform的translate(-50%, -50%)设置实现垂直水平居中
定位，top和left设置50%，再通过margin-top和margin-left自己宽高的一半设置实现垂直水平居中
定位，top，bottom，left，right都设置为0，再通过margin设置为auto实现垂直水平居中
flex布局，先设置justify-content为center实现水平居中，再设置align-items为center实现垂直居中
table布局，设置父元素display为table-cell，再设置vertical-align为middle实现垂直居中，把自己display设置为inline-block，父级设置text-align为center实现水平居中

什么事css预处理器；

less和sass等等，可以提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。

对WEB标准以及W3C的理解与认识

WEB标准分为结构，表现和行为
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助） 1）。标签字母要小写 2）。标签要闭合 3）。标签不允许随意嵌套
2.对于css和js来说 1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

说说 cookies，sessionStorage 、 localStorage 你对它们的理解？

cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

大小： cookie数据大小不能超过4k,
sessionStorage和localStorage
虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

时效：localStorage 存储持久数据，浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存；
sessionStorage数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭部分面试官可能还会再深入一些：

1)、如何让cookie浏览器关闭就失效？——不对cookie设置任何正、负或0时间的即可;
2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage会共享;
3)、能让localStorage也跟cookie一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较
详细可看我之前写的另一篇分享（小程序项目总结 ）。

1.Doctype的作用？标准模式与兼容模式各有什么区别?

声明在文档的第一行，位于html的前面，用于告知浏览器的解析器以什么样的文档标准来解析这个文档，如果没有声明文档就会以兼容模式呈现
标准模式 的排版和JS都是以浏览器支持的最高的标准运行 兼容模式 页面以宽松向后兼容的方式显示，模仿老式浏览器，防止站点无法工作

2.介绍一下CSS的盒子模型？弹性盒子模型是什么？

盒子模型由content+padding+border+margin组成，分为标准盒子和IE盒子，标准盒子的width指content，IE盒子的width包括content，padding，border

3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常见的空元素：br hr img input link meta

4.介绍一下你对浏览器内核的理解？

浏览器内核分为渲染引擎和JS引擎

5.HTML5有哪些新特性、移除了那些元素？

新特性：

画布canvas 用于媒介播放的video和audio 新的语义化标签：article，header，nav，section，footer
新的本地存储：localstorage，sessionstorage 新的表单控件：date，time，calendar，url
新的技术：websocket，web worker，geoloacation 移除得元素：
可以用css代替的元素，font，fontbase，center，s，tt，u

6、简述一下你对HTML语义化的理解？

可以清晰的向浏览器和开发者描述其意义，为了在丢失css的情况下也能很好的显示页面的结构，利于seo，seo可以根据标签和上下文己算权重，方便其他设备解析，方便开发和维护，可读性高

7.iframe有那些缺点？

会有过多的http请求，影响性能，会阻塞主页面的onload事件，不利于seo，页面调试样式很麻烦，会出现很多滚动条，浏览器后退按钮会没有效果，小型移动设备兼容性不好，会显示不全

8.列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？

display：none，block，inline，inline-block，flex，grid，table，table-cell
position：static，relatice，absolute，fixed，sticky
relative定位原点是自己，absolute定位原点是离自己最近的父元素
、display:none;与visibility:hidden的区别是什么？

display:none;使用该属性后，HTML元素（对象）的宽高，高度等各种属性值都将“丢失”；
visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。

9.cssSprite是什么 ？有什么优缺点？

精灵图是一种网页图片的应用技术，它把背景图片都整合到一张图片上，再利用background-position进行图片定位，优点是有效的减少了http请求，减少了图片的字节，缺点是合成比较麻烦，需要精准定位

10.前端页面有哪三层构成？ 分别是什么？ 作用是什么？

结构层由HTML负责，负责搭建页面的结构
表示层由CSS负责，负责页面的样式
行为层由JavaScript负责，负责页面的交互

11.谈谈以前端的角度出发做好seo需要做什么

1、提高页面加载速度。
能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。
2、
结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。
3、
优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。
4、
集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。
5、 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。 6、
a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。 7、
图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。 8、
H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

12.css选择符有哪些？优先级算法如何计算？

标签选择符，类选择符，ID选择符，伪类选择符，相邻选择符，子代选择符，后代选择符，通配符选择符，属性选择符 优先级：

就近原则，下面覆盖上面 !important＞内联＞ID＞类＞标签

13.超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的 排列顺序:

L-V-H-A（link,visited,hover,active）

14、对 WEB 标准以及 W3C 的理解与认识

答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、
结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提 供打印版本而不需要复制内容、提高网站易用性。

15、BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局 不会影响盒子外面的元素。在同一个 BFC
中的两个相邻的盒子在垂直方向发生 margin 重叠 的问题 BFC
是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外 元素的布局，这个渲染区域只对块级元素起作用

16.rgba()和 opacity 还有(hslax) 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素 内的所有内容的透明度， 而
rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承 透明效果！）

JS部分

1.事件绑定和普通事件有什么区别

传统事件绑定和符合 W3C 标准的事件绑定有什么区别？

div1.onclick=function(){}; 
<button>    onmouseover=""></button> 

1、如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面 的绑定
2、不支持 DOM 事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段 addEventListener
1、 如果说给同一个元素绑定了两次或者多次相同类型的事件，所有的绑定将会依次触发
2、 支持 DOM 事件流的 3、 进行事件绑定传参不需要 on
前缀 addEventListener(“click”,function(){},true);//此时的事件就是在事件冒泡阶段执行 ie9
开始，ie11 edge：addEventListener ie9 以前：attachEvent/detachEvent
1、进行事件类型传参需要带上 on 前缀
2、 这种方式只支持事件冒泡，不支持事件捕获
事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

2.JavaScript this 指针、闭包、作用域
this：指向调用上下文

作用域：定义一个函数就开辟了一个局部作用域，整个 js 执行环境有一个全局作用域
2-1、事件委托是什么
符合 W3C 标准的事件绑定 addEventLisntener /attachEvent
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
2-2、闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都
永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数
2-3、如何阻止事件冒泡和默认事件

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9 之前

阻止默认事件：
为了不让 a 点击之后跳转，我们就要给他的点击事件进行阻止

return false
e.preventDefault();

2-4、添加 删除 替换 插入到某个接点的方法

obj.appendChild()
obj.insertBefore() //原生的 js 中不提供 insertAfter();
obj.replaceChild()//替换
obj.removeChild()//删除

2-5、javascript 的本地对象，内置对象和宿主对象
本地对象为 array obj regexp 等可以 new 实例化
内置对象为 gload Math 等不可以实例化的
宿主为浏览器自带的 document,window 等
2-6、document load 和 document ready 的区别
Document.onload 是在结构和样式加载完才执行 js
window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文
件，全部加载完才会触发 window.onload 事件
Document.ready 原生中没有这个方法，jquery 中有 $().ready(function)

3.HTTP 协议中，GET 和 POST 有什么区别？分别适用什么场
景 ？

get 传送的数据长度有限制，post 没有
get 通过 url 传递，在浏览器地址栏可见，
post 是在报文中传递
适用场景：
post 一般用于表单提交
get 一般用于简单的数据查询，严格要求不是那么高的场景

4、HTTP 状态消息 200 302 304 403 404 500 分别表示什么

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI
响应请求。由于这样的重定向是临时的，客户端应当 继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires中进行了指定的情况下， 这个响应才是可缓存的
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁 止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这 个问题都会在服务器端的源代码出现错误时出现。

5.请尽可能详尽的解释 ajax 的工作原理

思路：先解释异步，再解释 ajax
如何使用 Ajax 的原理简单来说通过 XmlHttpRequest
对象来向服务器发异步请求，从服务器获得数据， 然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
要清楚这个过程和原理，我们必须对 XMLHttpRequest 有所了解。 XMLHttpRequest 是 ajax 的核心机制，它是在
IE5 中首先引入的，是一种支持异步请求的 技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。
达到无刷新的效果。

6.请列举 js 数组类型中的常用方法
方法 描述

concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值

7.如何解决跨域问题?
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以
基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取 js
脚本，并且这个 js 脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为
了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的

1.前端方法就用jsonp

jsonp是前端解决跨域最实用的方法

原理就是html中 的link,href,src属性都是不受跨域影响的，link可以调用远程的css文件，href可以链接到随便的url上，图片的src可以随意引用图片，script的src属性可以随意引入不同源的js文件

参考:添加链接描述
更多:添加链接描述