本文汇总了2019年至2020年的前端笔试面试题，涵盖HTML、CSS、JavaScript、jQuery、Ajax、前端框架、WebStorage、浏览器内核等多个方面。主要考察了前端开发者对于网页结构、样式、脚本处理、前端优化、数据交互、浏览器兼容性等核心技能的掌握情况，还涉及到一些前端开发的最佳实践和面试技巧。文章末尾提供了面试资源链接，帮助求职者准备面试。
程序员学习书籍推荐：（点击查看）
大厂面试题 （点击查看）
前期概要:
01你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
答案
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
02Javascript中的定时器有哪些？
答案
1.setTimeout 只执行一次
2.setInterval 会一直重复执行
03img的alt与title有何异同？ strong与em的异同？
答案
a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
04一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
答案
<style>
/*一个200*200的div在不同分辨率屏幕上下左右居中，用css实现*/
div
{
background: red;
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-50px;
height:-50px;
z-index:1000;
}
</style>
05为什么利用多个域名来存储网站资源会更有效？
答案
-
CDN缓存更方便;
2.突破浏览器并发限制;
3.节约cookie带宽;
4.节约主域名的连接数，优化页面响应速度;
5.防止不必要的安全问题。
06写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式的相关代码:
答案
HTML代码:
CSS代码:
07请描述 WebStorage与cookie相比存在的优势?
答案
(1)、存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
(2)、存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器
这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
(3)、更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，如setItem,getItem,removeItem,clear等
使得数据操作更为简便。cookie需要自己封装。
(4)、独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
08有哪项方式可以对一个DOM设置它的CSS样式？
答案
1.外部样式表，引入一个外部css文件
2.内部样式表，将css代码放在 <head> 标签内部
3.内联样式，将css样式直接定义在 HTML 元素内部
09CSS的盒子模型？
答案
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。
10html语义化是什么？
答案
当页面样式加载失败的时候能够让页面呈现出清晰的结构；
有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）；
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。
11$(document).ready()方法和window.onload有什么区别？
答案
(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。
12前端页面有哪三层构成，分别是什么?作用是什么?
答案
1.结构层 Html
2.表示层 CSS
3.行为层 js
13css优先级算法如何计算？
答案
!important > id > class > 标签
!important 比 内联优先级高
*优先级就近原则，样式定义最近者为准;
*以最后载入的样式为准;
14请写出你对闭包的理解，并列出简单的理解 ?
答案
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包有三个特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
15split() 、join() 的区别?
答案
split()是切割成数组的形式，join()是将数组转换成字符串
16数组方法pop() push() unshift() shift()?
答案
pop()尾部删除
Push()尾部添加
Unshift()头部添加
shift()头部删除
17JavaScript的数据类型都有什么？
答案
基本数据类型：String,boolean,Number,Undefined, Null；
引用数据类型：Object(Array,Date,RegExp,Function)。
18对该数组numberArray = [3,9,4,6,1,5]; 实现降序排列?
答案
实现对该数组的降序排列，输出[9,6,5,4,3,1]？
numberArray.sort(function(a,b){return b-a})；
19写一个function，清除字符串前后的空格?（兼容所有浏览器）
答案
20列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个?
答案
对象：window, document, location, screen, history, navigator
方法：alert(), confirm(), prompt(), open(), close()
21闭包是什么，有什么特性，对页面有什么影响?
答案
我的理解是，闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
function outer(){
var num = 666;
function inner(){
var n = 999;
alert(n + num);
}
return inner;
}
outer()();
22什么是javascript 中的垃圾回收机制？
答案
在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。
如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因
23请尽可能详尽的解释ajax的工作原理？
答案
Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
相关代码:
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
// 1.创建一个异步对象
var xmlhttp=new XMLHttpRequest();
// 2.设置请求方式和请求地址
/*
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
xmlhttp.open("GET", "04-ajax-get.php", true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(xmlhttp.readyState === 4){
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
</script>
24如何解决跨域问题?
答案
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域；
出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案。
25阐述一下异步加载？
答案
1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js
26说说你对this的理解？
答案
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。
全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身
27判断一个字符串中出现次数最多的字符，并统计次数?(编程题)
答案
<script>
var s = 'bbcitcxyllkkjjfffdddsbbbbbb';
var obj = {};
var maxn = -1;
var letter;
for(var i = 0; i < s.length; i++) {
if(obj[s[i]]) {
obj[s[i]]++;
if(obj[s[i]] > maxn) {
maxn = obj[s[i]];
letter = s[i];
}
} else {
obj[s[i]] = 1;
if(obj[s[i]] > maxn) {
maxn = obj[s[i]];
letter = s[i];
}
}
}
alert(letter + ': ' + maxn);
</script>
HTML+CSS部分:
1、什么是盒子模型？
答:在网页中，一个元素占有空间的大小由几个部分构成，其中
包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分
这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。
4个部分一起构成了css中元素的盒模型。
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
答:行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
3.利用CSS实现一个div盒子相对浏览器垂直方向居中?
css------ <style>
div{
width: 200px;
heig
最低0.47元/天 解锁文章
扫一扫
1525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
