前端基础面试题指南

时间  2019-11-30
标签 前端 基础 面试 指南 栏目 快乐工作 繁體版
原文   原文链接

        嘿,很久不见,这里是相隔了一年又出来活跃的大湿兄,最近看到不少人都在刷面试题包括,四月份也看到github上的 "前端面试每日 3+1" 的这个项目,包括最近在整理一些基础题目之类的,因此才会有契机写这样一篇文章.宗旨在于基础题目吧,挺杂的仍是望各位大大批评指正,在这谢谢了,好了废话很少说开始内容.javascript

html基础面试题

        众所周知,虽然说面试官问到的问题大多都是javascript相关和算法相关的题目,不过这里仍是稍微说一下面试官会常常问道的html题目,更加全面一些,对于面试来讲也是好事.css

1. HTML5的文件离线储存有哪些,谈谈他们的优点和弊端,再谈谈他们的区别?

        cookie, sessionStorage,localStorage.html

        cookie的优点在于极高的扩展性和可用性,反而,经过良好的编程，控制保存在cookie中的session对象的大小,只在cookie中存放不敏感数据，即便被盗也不会有重大损失.可是除了这些缺点依旧明显,例如`Cookie`数量和长度的限制。每一个domain最多只能有20条cookie，每一个cookie长度不能超过4KB，不然会被截掉,另外cookie在每次请求的时候被带在请求头,很容易遭到拦截,由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了.前端

        sessionStorage和localStorag它们的优势很明显能够长期储存数据；须要手动删除数据,可是缺点是不一样窗口下数据；不能独立，相互干扰。例如：删除或添加一个数据，其它的窗口也会同步删除或者添加该 数据不能被爬虫读取在浏览器的隐私模式下不能读取vue

        那么谈谈它们的区别sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储,而localStorag是一种持久化的本地存储,只要不删除就一直存在,而cookie是小规模存储而且每次请求cookie都会被发送出去,无形中浪费了带宽.html5

  1. html5有哪些新特性、移除了那些元素?

        HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。 java

  • 拖拽释放(Drag and drop) API 语义化更好的内容标签（header,nav,footer,aside,article,section） 音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除git

    表单控件，calendar、date、time、email、url、search
    新的技术webworker, websocket, Geolocationes6

  • 移除的元素github

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

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

  1. 请说出三种减小页面加载时间的方法?

         (1). 优化图片
(2). 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
(3). 优化CSS（压缩合并css，如margin-top,margin-left...)
(4). 网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
(5). 标明高度和宽度（若是浏览器没有找到这两个参数，它须要一边下载图片一边计算大小，若是图片不少，浏览器须要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即便图片暂时没法显示，页面上也会腾出图片的空位，而后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
(6). 减小http请求（合并文件，合并图片）。

  1. 请解释一下什么是“语义化的 HTML”?

        分离结构和表现的另外一个重要方式是使用语义化的标记来构造文档内容。一个XHTML元素的存在乎味着被标记内容有相应的结构化意义，例如

是用来标记段落h1标记标题ul,li标记列表，不能过度使用div

  语义化的标签每每与默认样式有所联系，像是Hx系列 表示标题，会被赋予默认的块级加粗居中样式；strong,em用来区别于其余文字，起到了强调的做用。用来明确告诉你它们的用途。

  语义化标签让你们更直观认识标签和属性的用途。语义化的网页，对搜索引擎友好，更容易被搜索引擎抓取，有利于推广。

  

css基础面试题

        包括css有时也是面试官会常常问到的问题,这里例举几个常见的

  1. CSS中 link 和@import 的区别是?

(1). link属于HTML标签，而@import是CSS提供的;
(2). 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3). import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4). link方式的样式的权重 高于@import的权重.

  1. 介绍一下CSS的盒子模型？

(1). 有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
(2). 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

  1. CSS 选择符有哪些？哪些属性能够继承？优先级是什么样的?

选择符:
(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）
可继承的样式：
font-size font-family color, text-indent;
优先级为:
!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

  1. CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增长了更多的CSS选择器 多背景 rgba
在CSS3中惟一引入的伪元素是::selection.
媒体查询，多栏布局
border-image

javascript基础面试题

        前面忘了说前面有不少都是参考其余文章的,毕竟对于javascript基础面试题通常面试官会问的比较多,不过不要担忧,下面的面试题携带了大量曾今我被面试的时候面试官询问过的javascript基础知识,最多见的我都会列在上面,而后包括其余文章网站总结的javascript基础面试题我也会列出来供你们参考学习.

  1. 请讲讲javascript基础数据类型及typeof返回数值类型

        这里简单回答一下就好


        javascript的六种基本数据类型:string、number、boolean、object、undefined、null

        typeof返回数值类型: undefined,string,boolean,number,object-------对象或者null返回的是object,function

  1. ==和===的区别

== equality 等同，=== identity 恒等。
==， 两边值类型不一样的时候，要先进行类型转换，再比较。
===，不作类型转换，类型不一样的必定不等。

  1. javascript强制类型转换

(1). Boolean(value):把值转换成Boolean类型；
(2). Nnumber(value):把值转换成数字（整型或浮点数）；
(3). String(value):把值转换成字符串。

  1. 请说一说一些常见的http状态码及含义?

200请求已成功
301被请求的资源已永久移动到新位置
304若是客户端发送了一个带条件的 GET 请求且该请求已被容许
403服务器已经理解请求，可是拒绝执行它
404客户端在浏览网页时，服务器没法正常提供信息，或是服务器没法回应，且不知道缘由所返回的页面
500服务器遇到了一个不曾预料的情况
501服务器不支持当前请求所须要的某个功能
503因为临时的服务器维护或者过载
504做为网关或者代理工做的服务器尝试执行请求时

  1. 清说一说浏览器与服务器之间的三次握手?

第一次
第一次握手：创建链接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）
第二次
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时本身也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次
第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP链接成功）状态，完成三次握手。 完成三次握手，客户端与服务器开始传送数据，这里只是简述一下三次握手.

  1. 请简述一下call()和apply()的共同之处和区别?

它们各自的定义：

apply：调用一个对象的一个方法，用另外一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另外一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

它们的共同之处：

都“能够用来代替另外一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

它们的不一样之处：

apply：最多只能有两个参数——新this对象和一个数组argArray。若是给该方法传递多个参数，则把参数都写进这个数组里面，固然，即便只有一个参数，也要写进数组里。若是argArray不是一个有效的数组或arguments对象，那么将致使一个TypeError。若是没有提供argArray和thisObj任何一个参数，那么Global对象将被用做thisObj，而且没法被传递任何参数。

call：它能够接受多个参数，第一个参数与apply同样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊状况下须要改变this指针。若是没有提供thisObj参数，那么 Global 对象被用做thisObj。

实际上，apply和call的功能是同样的，只是传入的参数列表形式不一样。

7. 什么是闭包?

        当某个函数调用时会建立一个执行环境以及做用域链，而后根据arguments和其它命名参数初始化造成活动对象。在外部函数调用结束后，其执行环境与做用域链被销毁，可是其活动对象保存在了闭包之中，最后在闭包函数调用结束后才销毁。简单的说，闭包就是可以读取其余函数内部变量的函数。

        因为在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成“定义在一个函数内部的函数”。

        详细了解能够参考(JavaScript中什么是闭包): www.cnblogs.com/yangWanShen…

  1. 什么是继承?

        简单说下经过原型链实现继承:

        基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法，子类型能够访问超类型的全部属性和方法。原型链的构建是将一个类型的实例赋值给另外一个构造函数的原型实现的。实现的本质是重写原型对象，代之以一个新类型的实例。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  alert("Hello, " + this.name);
}
var person = new Person("Alice");
person.sayHello(); // Hello, Alice
function Student() {
}
Student.prototype = new Person("Bruce");
Student.prototype.id = 16;
Student.prototype.showId = function() {
  alert(this.id);
}
var student = new Student();
student.sayHello(); // Hello, Bruce
student.showId(); // 16
复制代码

        注意：不能用对象字面量建立原型方法，这样会重写原型链，致使继承无效。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  alert("Hello, " + this.name);
}
var person = new Person("Alice");
person.sayHello(); // Hello, Alice
function Student() {
}
Student.prototype = new Person("Bruce");
Student.prototype.id = 16;
Student.prototype = {
  showId: function() {
    alert(this.id);
  }
};
var student = new Student();
student.sayHello(); // 报错：student.sayHello is not a function
student.showId(); // 16
复制代码

        同时能够参考这篇文章讲的比较全面, 完全搞懂JavaScript中的继承:

        www.cnblogs.com/libinfs/arc…

  1. 谈谈原型和原型链?

        原型: 咱们建立的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向了一个对象，而这个对象的用途就是包含能够由特定类型的全部实例共享的属性和方法。

        原型链: 由于每一个对象和原型都有原型，对象的原型指向原型对象， 而父的原型又指向父的父，这种原型层层链接起来的就构成了原型链。

        这里若是细说能够用一个大篇幅详细说明,可是考虑到这是基础面试指南因此就不细说了,贴一个连接地址能够去细细品味, 最详尽的 JS 原型与原型链终极详解，没有「多是」。（一）:

www.jianshu.com/p/dee9f8b14…

  1. 箭头函数和普通函数的区别?

        1.提升开发效率，减小体力劳动

        2.在函数内部不须要本身的 this 指针的时候，很是方便，由于箭头函数做用域内没有 this

        3.还有一点是 箭头函数没有 arguments 变量，在某些时候也能够带来方便，和上面差很少。

  1. 请描述一下 GET 和 POST 的区别?

        get是从服务器上获取数据，post是向服务器传送数据。

         get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中能够看到。post是经过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一块儿传送到ACTION属性所指的URL地址。用户看不到这个过程

        get形式的url对搜索引擎更加友好，能够提升搜索引擎排名。Post使用的url有时候会阻止爬虫和搜索引擎的访问。其余网站和用户能够连接到get形式的url，不管用户的访问，仍是搜索引擎的收录而相应提升了页面排名，可以直接或间接提升网站浏览。同时，get形式的url这种表示法是能够缓存的，显著提高了客户端和服务端的性能。

        而不安全操做，如肯定订购、下订单、达成协议和删除页面等，应该经过post执行，避免没有显式用户请求和同一的状况下发生意外的操做。例如搜索引擎删除整个页面，只由于抓取了一个连接。不少不但愿用户浏览器遵循页面连接的各类完整，这些状况下，应该要求用户登陆而且足够的权限才能执行某些危险操做。

        若符合下列任一状况，则用POST方法：

        请求的结果有持续性的反作用，例如，数据库内添加新的数据行。

        若使用GET方法，则表单上收集的数据可能让URL过长。

        要传送的数据不是采用7位的ASCII编码。

        若符合下列任一状况，则用GET方法：

        请求是为了查找资源，HTML表单数据仅用来帮助搜索。

        请求结果无持续性的反作用。

        收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

        （目测还会问到“同步和异步的区别?”）

        同步：脚本会停留并等待服务器发送回复而后再继续。提交请求->等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事。

        异步：脚本容许页面继续其进程并处理可能的回复。请求经过事件触发->服务器处理（这是浏览器仍然能够做其余事情）->处理完毕

        若要在使用ajax请求后处理发送请求返回的结果，最好使用同步请求。

  1. 请描述下事件冒泡机制

        从目标元素开始，往顶层元素传播。途中若是有节点绑定了相应的事件处理函数，这些函数都会被一次触发。若是想阻止事件起泡，可使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

  1. 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

        这是一道大题目，把考点拆成了4个小项;须要侯选人用递归算法实现（限制15行代码之内实现;限制时间10分钟内完成）
        a）生成一个长度为5的空数组arr。
        b）生成一个（2-32）之间的随机整数rand.c
        c）把随机数rand插入到数组arr内，若是数组arr内已存在与rand相同的数字，则从新生成随机数rand并插入到arr内[须要使用递归实现，不能使用/ while等循环]
        d）最终输出一个长度为5，且内容不重复的数组arr。 

var arr = new Array(5);
    var num = randomNumber();
    var i = 0;
    randomArr(arr,num);
    function randomArr(arr,num) {
        if (arr.indexOf(num)< 0){
            arr[i] = num;
            i++;
        } else {
            num = randomNumber();
        }
        if (i>=arr.length){
            console.log(arr);
            return;
        }else{
            randomArr(arr,num)
        }
    }
    function randomNumber() {
        return Math.floor(Math.random()*31 + 2)
    }
复制代码

        这题呢参考的是最近在github上很火的一个前端刷题仓库,这里安利一下, 前端面试每日 3+1（每日三问）:

github.com/haizlin/fe-…

  1. 数组排序

        这里列出一个最简单的数组排序仅供参考.

var arr = [23, 9, 4, 78, 3];
 var compare = function (x, y) {//比较函数
    if (x < y) {
        return -1;
    } else if (x > y) {
        return 1;
    } else {
        return 0;
    }
 }
 console.log(arr.sort(compare));
复制代码
  1. 一行代码实现数组去重
[...new Set([1,2,3,1,'a',1,'a'])]
复制代码
  1. 写一个方法去掉字符串中的空格
var str = ' abc d e f g ';
        function trim(str) {
            var reg = /\s+/g;
            if (typeof str === 'string') {
                var trimStr = str.replace(reg,'');
            }
            console.log(trimStr)
        }
        trim(str)
复制代码
  1. 统计某一字符或字符串在另外一个字符串中出现的次数
function strFind（str，target）{ 
var lengths = 0 
    if（！target）{ 
        return lengths 
    } 
    while（str.match（target））{ 
        str = str.replace（target，''）
        length ++ 
    } 
    return lengths 
} 
var str = “你好萨达所大所多所多所问问二位无你好萨达所
大多你好” strFind（str，“你好”）
复制代码

        match方法一样可用于前端搜索功能使用.

参考网站

前端面试每日 3+1（每日三问）:github.com/haizlin/fe-…

最全前端面试问题及答案总结: www.cnblogs.com/autismtune/…

前端工做面试问题（上）: www.cnblogs.com/canning-gao…

前端工做面试问题（下）: www.cnblogs.com/canning-gao…

apply()与call()的区别: www.cnblogs.com/lengyuehuah…

JavaScript中什么是闭包: www.cnblogs.com/yangWanShen…

JavaScript面向对象继承原理与实现方法分析: www.jb51.net/article/145…

完全搞懂JavaScript中的继承:www.cnblogs.com/libinfs/arc…

最详尽的 JS 原型与原型链终极详解，没有「多是」。（一）: www.jianshu.com/p/dee9f8b14…

特别推荐刷题网站

前端面试每日 3+1（每日三问）:github.com/haizlin/fe-…

        重要的事情说三遍这个刷题的代码仓库真的很不错,安利一下.

结语

        真的一年都没出来活跃了,自从上周开始不忙的时候,就想着从新出来写文章,准备了大概有一周时间吧,文章看了有很多,大概20到30篇,而后题目也作了很多,最后根据以往的面试经验总结出了这篇能够说是临时抱佛脚的文章,这里大部分题目能够说有80%以上的题目都是面试官必问或者说是常问的题目,你们能够经过这篇文章临时去了解下,即便快到面试公司也能经过这篇文章找到本身想要了解的信息.

        最后呢仍是感谢你们能看到这里,估计5000多字也就是一篇小说的章节吧,细细体会可能时间长一些,可是快速预览可能也就10分钟左右,不过仍是但愿你们能在下面评论区劲量多发些题目,这样讨论的话也方便,另外这篇文章尽量的贴近基础面试题.

        可能还有人想要看其余的一些面试题好比es6,7 vue等等,这些都在之后的更新中会有专门的篇幅来说,包括涉及到一些普一般用算法之类的也会有专门的文章去描述,仍是谢谢各位大大能看到这里若有不足之处还望指正

        2019年7月6日        大湿兄

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程