前端面试题！
Posted bearbigbrother
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端面试题！相关的知识，希望对你有一定的参考价值。
display:none、visibility:hidden和opacity:0之间的区别？
1、空间占据
display:none不会占据原来的空间
visibility:hidden会占据原来的空间
opacity:0会占据原来的空间
2、继承
display:none会被子元素继承，如果父元素消失了子元素也消失
visibility:hidden会被子元素继承
opacity:0会被子元素继承
3、事件
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件
visibility:hidden 元素上绑定的事件也无法触发
opacity: 0元素上面绑定的事件是可以触发的
4、过渡动画
display:none 无法触发 transition
visibility:hidden 无法触发 transition
opacity: 0 能触发 transition
浏览器的内核分别是什么?
IE:
trident内核
Firefox：
gecko内核
Safari:
webkit内核
Opera:
以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:
Blink
js中的定时器有哪些？
setTimeout
只执行一次
setInterval
会一直重复执行
img的alt与title有何异同？
alt:
为不能显示图像、窗体或applets的用户代理（UA），
alt属性用来指定替换文字。替换文字的语言由lang属性指定。
title:
该属性为设置该属性的元素提供建议性的信息。
strong与em的异同？
strong:
粗体强调标签，强调，表示内容的重要性
em:
斜体强调标签，更强烈强调，表示内容的强调点
一个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;
}
为什么利用多个域名来存储网站资源会更有效？
1.CDN缓存更方便;
2.突破浏览器并发限制;
3.节约cookie带宽;
4.节约主域名的连接数，优化页面响应速度;
5.防止不必要的安全问题。
WebStorage与cookie相比存在的优势?
(1)、存储空间更大
(2)、存储内容不会发送到服务器
(3)、更多丰富易用的接口
(4)、独立的存储空间
有哪项方式可以对一个DOM设置它的CSS样式？
1.外部样式表，引入一个外部css文件
2.内部样式表，将css代码放在 <head> 标签内部
3.内联样式，将css样式直接定义在 html 元素内部
CSS的盒子模型？
IE 盒子模型、标准 W3C 盒子模型
IE 的content部分包含了 border 和 pading;
盒模型：
内容(content)、填充(padding)、边界(margin)、 边框(border)。
html语义化是什么？
页面样式加载失败时能让页面呈现清晰的结构；
有利于seo优化，利于被搜索引擎收录；
便于项目的开发及维护；
使html代码更具有可读性；
便于解析
$(document).ready()方法和window.onload有什么区别？
window.onload：
网页中所有的元素完全加载到浏览器后才执行的
$(document).ready()：
在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数
闭包的理解，并列出简单的理解?
闭包主要是为了设计私有的方法和变量
优点：
可以避免全局变量的污染
缺点：
闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
JavaScript的数据类型都有什么？
基本数据类型：
String,boolean,Number,Undefined, Null
引用数据类型：
Object(Array,Date,RegExp,Function)
数组numberArray = [3,9,4,6,1,5]; 实现降序排列?
var numberArray = ([9,6,5,4,3,1]);
// console.log([9,6,5,4,3,1]);
numberArray.sort(function(a,b){
return b-a
});
垃圾回收机制？
垃圾收集器会按照固定的时间间隔，周期性的找出不再继续使用的变量，然后释放其占用的内存
垃圾回收有两种方法：
标记清除:
进入标记，加上标记，
出来之后，加过标记的被视为准备删除的
引用计数：
跟踪记录每个值被引用的次数，当达到0是就被回收
ajax的工作原理？
Asynchronous javascript and XML
原理：
通过XHR对象向服务器发送异步请求，获得数据，然后js操作DOM更新页面
状态码：
0 未初始化
1 建立连接
2 已接收
3 处理中
4 完成
ajax参数：
url 接口地址
data 发送数据
type 请求类型
Async 异步请求
datatype 数据类型
success 成功回调
error 失败回调
如何解决跨域问题?
协议、域名、端口都相同才同域，否则都是跨域
异步加载？
1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js
this的理解？
js中this通常指执行函数本身或函数所属对象
全局 window
函数 函数所在对象
对象 本身
判断一个字符串中出现次数最多的字符，并统计？
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);
当两个盒子在垂直方向上设置margin值时，会出现塌陷现象,如何解决?
1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素
属性为:content:"";
overflow:hidden;
px和em的区别?
px和em都是长度单位
px的值是固定的
em得值不是固定的
弹性盒模型的属性和属性值？
display: flex;
flex-direction:
justify-content:
align-items:
align-self:
align-content:
flex-wrap:
WEB标准以及W3C的理解与认识？
web标准：
一系列标准的集合，包括结构化标准语言（html等）、表现标准语言（css）、行为标准语言
w3c：
是一个web开发的国际性联盟，是Web技术领域最权威和影响力的国际中立性技术标准机构
get和post方式的区别?
get：
是从服务器上获取数据
URL 中可以看到
数据量小 2KB
不安全
post
是向服务器传送数据
请求头中
数据量大
安全
link和@import的区别是？
link
属于HTML标签
页面加载link也被加载
无兼容问题
权重高
@import
CSS提供的
页面加载完在加载
IE5以上
权重低
HTML语义化？
根据内容的结构化，选择合适的标签，便于阅读和写出优雅的代码，让浏览器更好的解析
html与xhtml的区别？
HTML允许文档中的标签大写或小写
HTML中允许一写结束标间省略
html <!DOCTYPE html>
XHTML中的标签必须全部小写
XHTML中，所有的标签必须有闭合标签
xhtml:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd>
有哪些内置对象？
Object 是 js 中所有对象的父对象;
数据封装类对象：
Object、Array、Boolean、Number、String
其他对象：
Function、Argument、Math、Date、RegExp、Error
判断数据类型有哪些方法？
1、typeof
2、instanceof
3、constructor
4、toString
什么是未声明和未定义的变量？
未声明的变量:
是程序中不存在且未声明的变量。如果程序尝试读取未声明变量的值，则会遇到运行时错误.
未定义的变量:
是在程序中声明但尚未给出任何值的变量。如果程序尝试读取未定义变量的值，则返回未定义的值.
document.onload 和document ready的区别?
document.onload：
是在结构和样式,外部js以及图片加载完才执行js
document.ready：
是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function(){});
判断字符串以字母开头？
var reg=/^[a-zA-Z]w{5,19}$/;
js延迟加载的方式有哪些？
defer和async、
动态创建DOM方式、
按需异步载入js
清除字符串前后的空格？
String.prototype.trim = function(){
return this.replace(/^s+/,"").replace(/s+$/,"");
}
什么是json?
(1)JSON 是一种轻量级的数据交换格式。
(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象
innerHTML和outerHTML的区别?
innerHTML(元素内包含的内容）
outerHTML(自己以及元素内的内容）
浏览器的渲染？
1.解析HTML代码生成DOM树
2.解析CSS生成CSSOM规则树
3.将DOM树与CSSOM规则树合并在一起生成渲染树
4.遍历渲染树开始布局，计算每个节点位置大小信息
5.将渲染树的每个节点绘制到屏幕
为什么要使用jquery？
1、轻量级的框架
2、大小30kb
3、强大的选择器
4、出色的dom操作
5、事件处理机制
6、完善的ajax
7、浏览器兼容
8、链式操作
9、结构分离
10、丰富的插件
jQuery 能做什么？
1 获取页面的元素
2 修改页面的外观
3 改变页面大的内容
4 响应用户的页面操作
5 为页面添加动态效果
6 无需刷新页面，即可以从服务器获取信息
7 简化常见的js任务
遍历节点？
1、children();
2、prev();
3、siblings();
4、closest();
5、find();
6、next();
页面性能优化？
1、减少HTTP请求
2、减少DOM数量
3、使ajax缓存
4、css放body上
5、css跟js剥离
6、压缩css跟js
7、避免css表达式
8、js放body底部
9、移除重复js
10、雪碧图
11、图片懒加载
LESS特点？
变量
混合
嵌套规则
运算
函数
作用域
命名空间
注释
导入 import
Less原理
CSS预解析
为css样式生成工具
gulp作用？
Sass、Less编译
CSS JS 图片压缩
CSS JS合并
CSS JS 内联
自动刷新
雪碧图
AMD与CMD？
都是js组件化开发
AMD：
require.js 提前执行
2.0之后 延迟执行
CMD：
sea.js 延迟执行
同步和异步的区别?
同步：
阻塞
异步：
非阻塞
页面编码和被请求的资源编码如果不一致如何处理？
get：
请求的参数需要使用 encodeURIComponent函数对参数进行编码处理
post请求不需要进行编码
数组的方法？
join()：
将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符
push()：
可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop()：
数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项
shift()：
删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
unshift()：
将参数添加到原数组开头，并返回数组的长度
sort()：
按升序排列数组项——即最小的值位于最前面，最大的值排在最后面
reverse()：
反转数组项的顺序
concat()：
将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组
slice()：
返回从原数组中指定开始下标到结束下标之间的项组成的新数组
splice()：
很强大的数组方法，它有很多种用法，可以实现删除、插入和替换
indexOf()和lastIndexOf()：
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1
viewport?
视口
width：
视口宽度
height：
视口高度
initial-scale：
缩放
minimum-scale：
最小缩放
maximum-scale：
最大缩放
user-scalable：
是否允许缩放
以上是我自己整理得，仅供参考，切勿全信！
个人观点，不喜勿喷！
谢谢合作！
喜欢的关注，点赞！
以上是关于前端面试题！的主要内容，如果未能解决你的问题，请参考以下文章
面试题系列|前端面试题前端高频面试题总结（2021年最新版）