前端基础面试题指南

大湿兄
365 阅读19分钟

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

html基础面试题

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

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

        cookie, sessionStorage,localStorage.

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

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

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

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

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

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

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

  • 移除的元素

纯表现的元素：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日        大湿兄

avatar
文章
阅读
粉丝