前端常见面试题

大家好，欢迎来到IT知识分享网。

这段时间去找工作，发现了很多出现概率比较高的面试题，这里记录一下，希望对大家有帮助！

盒子模型的类型和区别
盒子包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
分为盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)，两者最大的区别是总宽/高包括的范围的不同
标准盒模型：盒子总宽度/高度=width/height+padding+border+margin。
怪异盒模型：盒子总宽度/高度=width/height + margin （即 width/height=内容区宽度/高度 + padding + border）

而box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

Js的基本数据类型
JS共有7种数据类型，分别是存储在堆里的引用数据类型（对象、数组和函数）和存储在栈里的原始数据类型（Undefined、Null、Boolean、Number、String）

普通函数和箭头函数的区别？

1. 写法不同：普通函数要写function，箭头函数不用；
2. 声明方式不同：普通函数可以是声明式的，也可以是赋值式，而箭头函数只能是赋值式的；
3. this指向不同：普通函数有原型prototype，this指向不确定，箭头函数本身没有this，因为没有原型，this指向确定，指向他父级作用域；
4. new不同：普通函数可以new，箭头函数不能new，就是因为没有原型prototype；
5. 传参方式：普通函数可以获取arguments，箭头函数不能获取可以通过…arg，一般传参需要一一明确

div块垂直水平居中

1. 弹性布局
   .box{ display: flex; justify-content:center; align-items:center; }

2.已知块级元素的宽和高，使用绝对定位+外边距设定水平垂直居中
父元素 position:relative，子元素 position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2;

3.未知块级元素的宽和高，使用绝对定位+css3样式属性transform
父元素 position:relative，子元素 position:absolute;transform: translate(-50%,-50%);

性能优化
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

ajax请求
ajax作用：可以不用刷新整个页面实现页面的部分更新。
主要有GET请求 POST请求
get和post的区别：
url可见性：get，参数url可见；post，url参数不可见
数据传输上：get，通过拼接url进行传递参数；post，通过body体传输参数
缓存性：get请求是可以缓存的；post请求不可以缓存
后退页面的反应：get请求页面后退时，不产生影响；post请求页面后退时，会重新提交请求
传输数据的大小：post请求传输数据比get大
安全性：post比get安全

js缓存方案
sessionStorage:临时的会话存储，只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面或者在编辑器中更改了代码，存储的会话信息也不会丢失。
localStorage:是一种如果你不主动去清除，会一直将数据存储在客户端的储存方式，即使关闭了浏览器，下次打开的时候仍然可以看到之前存储的未主动清除的数据（即便是
杀毒软件或者浏览器自带的清除功能，也不能将localStorage存储的数据清除掉）
cookie属于较老且最常见用的最多的技术了
cookie兼容所有的浏览器，但存储的数据是有大小限制，一般是4kb；
本地存储的数据会被发送到服务器

ES6的新特性
新增数据类型 const、let声明变量方式 模板字符串 对象解构赋值
延展运算符（…） 对象字面量增强 Class类的支持 Promise异步对象模块
import、export 数组、对象新增方法

在浏览器输入一个url地址，浏览器都干了什么？
域名解析 –> 发起3次握手 –> 建立连接后发起http请求 –> 服务器响应请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户

常见的浏览器内核

注：部分内容来源于网络，如有侵权，请留言
未完待续…