【原创】超实用前端面试题整理

菜头同学93331
734 阅读13分钟

​本内容收集的面试题适用于初级、中级、中高级所用，均为本坑多年跳槽面试经验总结，实用性超强已实际帮助多人，但之前均为口述，经过最近多位坑友要求下特做此撰写此真经，当然若有看不爽或者想补充者欢迎来撩哈！

（建议：本文内容可收藏之后慢慢修炼）

CSS篇：

1、CSS3的新特性

  • 实现圆角（border-radius）

  • 阴影（box-shadow）

  • 文字加特效（text-shadow）

  • 线性渐变（gradient）

  • 旋转（transform）

  • 媒体查询，多栏布局

2、CSS中 link 和@import 的区别

  • link属于HTML标签，而@import是CSS提供的;

  • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

  • import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

  • link方式的样式的权重 高于@import的权重.

3、介绍一下CSS的盒子模型

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）详细介绍

  • 两种盒模型：标准W3C盒模型、IE盒模型。

  • 区别对比：

    (注意蓝色背景区域大小)

  1. 标准盒模型元素宽度width=content=100px，高度计算相同

  1. IE模型元素宽度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。

4、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？

  • 选择符

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

  • 继承

1. 可继承的样式： font-size font-family color, text-indent;
2. 不可继承的样式：border padding margin width height;

  • 新增伪类

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

  • 优先级算法规则:优先级就近原则，同权重情况下样式定义最近者为准;

!important >  id > class > tag
important 比 内联优先级高,但内联比 id 要高

5、为什么要清除浮动？如何清除？
引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：
1、利用clear清除浮动

.son {
        clear: left | right | both | auto
    }

2、在父元素后面额外添加标签

<div class="parent">
    ...
    <div style="clear:both;"></div>
</div>

3、父元素上使用after伪类

#parent:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
}

4、利用overflow清除浮动

#parent {
    overflow: auto;
    display: inline-block;
}

6、实现垂直居中的几种方法

<div class="parent">
    <div class="son"></div>
</div>

  • margin: auto

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absoulte;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}

  • margin-left、margin-top负值法(需知道子元素width、height)

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absolute;
        width: 100px;
        height: 160px;
        left: 50%;
        top: 50%;
        //margin-top: translateY(-50%);
        //margin-left: translateX(-50%);
        margin-top: -80px;
        margin-left: -50px;
    }
}

  • flex

.parent{
    display: flex;
    align-items: center;
    justify-content: center;
}

  • table-cell(未脱离文档流)

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

HTML篇：

1.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  • HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

    • 绘画 canvas

    • 用于媒介回放的 video 和 audio 元素

    • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

    • sessionStorage 的数据在浏览器关闭后自动删除

    • 语意化更好的内容元素，比如 article、footer、header、nav、section

    • 表单控件，calendar、date、time、email、url、search

    • 新的技术webworker, websocket, Geolocation

  • 移除的元素：

  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u

  • 对可用性产生负面影响的元素：frame，frameset，noframes

  • 支持HTML5新标签：

    • IE8/IE7/IE6支持通过document.createElement方法产生的标签

    • 可以利用这一特性让这些浏览器支持HTML5新标签

    • 浏览器支持新标签后，还需要添加标签默认的样式

  • 当然也可以直接使用成熟的框架、比如html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->

  • 如何区分HTML5：DOCTYPE声明\新增的结构元素\功能元素

2.HTML5的离线储存怎么使用，工作原理能不能解释一下？

  • 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件

  • 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

  • 如何使用：

    • 页面头部像下面一样加入一个manifest的属性；

    • 在cache.manifest文件的编写离线存储的资源

    • 在离线状态时，操作window.applicationCache进行需求实现

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

3.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

  • 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

  • 离线的情况下，浏览器就直接使用离线存储的资源。

4.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

  • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

  • cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

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

  • 存储大小：

    • cookie数据大小不能超过4k

    • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

  • 有期时间：

    • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

    • sessionStorage 数据在当前浏览器窗口关闭后自动删除

    • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

5.iframe有那些缺点？

  • iframe会阻塞主页面的Onload事件

  • 搜索引擎的检索程序无法解读这种页面，不利于SEO

  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

  • 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

6.Label的作用是什么？是怎么用的？

  • label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

7.HTML5的form如何关闭自动完成功能？

  • 给不想要提示的 form 或某个 input 设置为 autocomplete=off。

8.如何实现浏览器内多个标签页之间的通信? (阿里)

  • WebSocket、SharedWorker

  • 也可以调用localstorge、cookies等本地存储方式

9.webSocket如何兼容低浏览器？(阿里)

  • Adobe Flash Socket 、

  • ActiveX HTMLFile (IE) 、

  • 基于 multipart 编码发送 XHR 、

  • 基于长轮询的 XHR

10.页面可见性（Page Visibility API） 可以有哪些用途？

  • 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;

  • 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

JavaScript篇：

  1. 闭包理解

    父函数将子函数作为返回值，再将子函数赋值给一个变量，所以子函数会存在于内存中，而子函数依赖于父函数存在，所以父函数也会存在于内存中，也就不会被垃圾回收机制回收。

  2.  1: let val = 7
 2: function createAdder() {
 3:  function addNumbers(a, b) {
 4:   let ret = a + b
 5:   return ret
 6:  }
 7: return addNumbers
 8:}
 9:  let adder = createAdder()
 10: let sum = adder(val, 8)
 11: console.log('example of function returning a function: ', sum)

  3. 继承链的理解（原型链）

    每一个对象都有一个“_proto_”指针，指向实例化该对象的构造函数的原型对象，当该对象没有你想拿到的属性时，解释器会顺着指针不断向上找。
    每一个构造你函数都有一个“prototype”属性，指向该构造函数的原型对象。
    每一个原型对象都有一个“constructor”属性，指向该原型对象的构造函数。
    任何对象(全局对象除外)向上查找的终点都是全局对象下的Object构造函数的原型对象。
  4. 对像合并？数组去重过滤？
    对象合并：Object.assign(form, obj)----->Object.assign(目标对象, 被合并的对象)、$.extend、

    数组去重：Set、filter、Map

  5. http状态码有哪几种？常用的状态码表示什么？

    200("OK")
    一切正常。实体主体中的文档（若存在的话）是某资源的表示。

    400("Bad Request")
    客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。

    500("Internal Server Error")
    服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。

    301("Moved Permanently")
    当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。

    404("Not Found") 和410("Gone")
    当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。

    409("Conflict")
    当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。

  6. 跨域的理解？常见的跨域处理有哪一些？

    浏览器为隔离潜在的恶意文件，限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，所以，是浏览器的基于安全考虑的同源策略导致的跨域

    解决一：

    JSONP，script的src属性不受限制，但是只能进行get请求，

    jQuery将jsonp封装进了ajax,首先jsonp只支持get请求，所以所有传入的参数都是 http://xxx.xxx.xxx/xxx/xxx?xxx=1&&yyy=2 这种形式；其次在dataType属性必须设置为jsonp，jquery是支持jsonp的。

    $.ajax("http://xxx.xxx.xxx/xxx/xxx", {

    type: 'get',

    dataType: "jsonp",

    data : reqData

    success: function(data) {

    console.log(data);

    },

    error: function(xhr, type, errorThrown) {

console.log(xhr.statusText);

plus.nativeUI.toast("fail");

}

});

解决二：直接在服务器端设置跨域资源访问 CORS（Cross-Origin Resource Sharing），设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名（常用）

解决三：使用Nginx反向代理

解决四：webpack代理（只适用于本地环境）

解决五：nodejs反向代理

7.seo优化的理解？（加分项）

  • 提高页面加载速度。能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。

  • 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。

  • 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。

  • 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。

  • 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。

  • a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。

  • 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。

  • H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

8.对象深拷贝、浅拷贝

深拷贝：当拷贝完一个对象的时候，其中一个对象的数据发生了变化，另一个对象的数据也会发生变化。
　　因为深拷贝拷贝的是索引
浅拷贝：当拷贝完一个对象的时候，其中一个对象的数据发生了变化，另外一个对象的数据 不会发生变化。
　　因为浅拷贝拷贝的是数值

9.js 异步加载的方式

a.标签的async="async"属性

<script type="text/javascript" src="xxx.js"async="async"></script>

b.onload时的异步加载(这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。)

c.$(document).ready(function() {alert("加载完成！") })

d.标签的defer="defer"属性

<script type="text/javascript" defer></script>

10.babel原理

ES6、7代码输入 -> babylon进行解析 -> 得到AST（抽象语法树）-> plugin用babel-traverse对AST树进行遍历转译 ->得到新的AST树->用babel-generator通过AST树生成ES5代码

-----------------------------------------------------------------------------

史上前端面试题千千万万，本坑只能就自己轻身经历的面试题作提炼，本文面试题均为大致市面上遇到的面试，须知道面试官也是有故事的程序员，所以他们在面试的时候肯定潜意识里也是偏向问自己面试过的面试题，所以不要不信任何平台任何文章总结的面试题，但是本坑有点建议的就是如果是在找工作期间确实有必要刷面试题，但是如果有充裕时间的情况下我建议大家还是要进行学习，据说很多前端大神每年都有刷一次《javascript高级程序》的习惯啊，基本面试题都是出自这本书！

天下武功出少林，天下js面试题多爱诞至此书！

我爱你，那于小说是当成着年怕骑车，虽每卢中道好没着年快来起得用地多那容易摔倒，来起得用地我也可以不顾一切的骑上它，当生如路声道面有狗追我或者你在前面等我。

                                               The End

                如果你喜欢，记得关注大坑微信公众号【入坑互联网】

                        


avatar
文章
阅读
粉丝