100道前端近年⾯试题（内含详细答案）
⼗⼀.作⽤域链
function a(){
var n=0;
function b(){
console.log(n);
}
return b;
}
var fn=a();//fn获得b函数的引⽤
var n=1;
fn();//fn()相当于执⾏b()，结果是0
（作⽤域是在创建定义的时候就确定了的，函数创建在谁的作⽤域下，谁就是它的⽗作⽤域 ，该例⼦中b函数的⽗作⽤域是a函数，a函数的作⽤域是全局）因此js在寻的时候，就会沿着这条线寻下去，哪⾥到就哪⾥停⽌寻，直到全局还不到，就表⽰不存在。⽽这条线，便叫做作⽤域链。
基础：
java的作⽤域是是以块区分的，也就是{}，这个没啥说的。
⽽JavaScript的作⽤域，是以⽅法来区分的。
广告企业网站模板javascript并没有所谓的块级作⽤域，javascript的作⽤域是相对函数⽽⾔的，可以称为*函数作⽤域*
变量的作⽤域：
全局作⽤域和局部作⽤域（函数内部声明变量的时候，⼀定要使⽤var命令）
只要函数内定义了⼀个局部变量，函数在解析的时候都会将这个变量“提前声明”
⼗⼆.购物车的实现过程（包括怎么布局，可以⽤vue、react、jq等）
购物清单：全选、商品、数量、单价、⾦额、操作
删除所选商品、继续购物、去结算、绑定跟单员
Js实现淘宝购物车类似功能：
主要有添加商品
增加和减少商品数量
根据增加、减少或选择的商品获取⾦额
实现商品价格的计算
全选按钮：
  这⾥⽤⼀个computed（计算属性）就好（如果productList中每⼀条数据的select都为true，
  返回true，否则返回false;）。
pycharm使用教程win10⼗三.购物车详情页优化（⽤户商品加⼊太多导致页⾯卡顿）（懒加载、分页）
初始第⼀屏图⽚>获取滚动条的滚动距离和⽬录对象离 document ⽂档顶部的距离>若前者⼤于后者，滚动时执⾏加载图⽚的⽅法>按需加载图⽚
var lazyImg = ElementsByTagName("img");
var lazyImgLen = lazyImg.length;
var lazyImgArray = [];
var winowBroswerHeight = document.documentElement.clientHeight;
// 初始第⼀屏图⽚
loadImg();
// 滚动时执⾏加载图⽚的⽅法
// 按需加载图⽚
function loadImg() {
for (var i = 0; i < lazyImgLen; i++) {
var getTD = getTopDistance(lazyImg[i]);
var getST = getScrollTop();
if (!lazyImg[i].loaded && getST < getTD && getTD < (getST + winowBroswerHeight)) {constructe
lazyImg[i].src = lazyImg[i].getAttribute("_src");
lazyImg[i].classList.add("animated", "fadeIn");
lazyImg[i].loaded = true; // 标记为已加载
}
}
}
// 获取⽬录对象离 document ⽂档顶部的距离
导航菜单用什么标签function getTopDistance(obj) {
var TopDistance = 0;
while (obj) {
TopDistance += obj.offsetTop;
obj = obj.offsetParent;
}
return TopDistance;
}
// 获取滚动条的滚动距离
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
}
⼗四.页⾯渲染过程
渲染时，⼤致的流程如下：
（解析html以构建dom树->解析CSS，得到CSSOM树->构建render树->布局render树->绘制render树）
具体的流程如下：
1：浏览器会将HTML解析成⼀个DOM树，DOM树的构建过程是⼀个深度遍历过程，
当前节点的所有⼦节点都构建好后才会去构建当前节点的下⼀个兄弟节点，
2：将CSS解析成CSS规则树；
3：根据DOM树和CSS来构造render树，渲染树不等于DOM树，像header和display：none；
这种没有具体内容的东西就不在渲染树中；
4：根据render树，浏览器可以计算出⽹页中有哪些节点，各节点的CSS以及从属关系，
然后可以计算出每个节点在屏幕中的位置；
5：遍历render树进⾏绘制页⾯中的各元素。
页⾯发⽣重排（回流）的话，会重新加载DOM树，影响页⾯加载速度。会导致页⾯重排的原因如下：
1：页⾯初始化；
2：操作DOM时；
3：某些元素的尺⼨变了；
4：CSS的属性发⽣改变。
为什么script需要放在body的最后位置？
因为其他位置会推迟或者意外的进⾏预渲染。
具体原因：解析到body中的第⼀脚本前，浏览器就会认为已经解析得差不多了，可以进⾏⼀次预渲染。所以script如果放在head⾥，会推迟预渲染。如果放在b ody的⼀开头，后⾯的⼀⼤堆标签还没解析，等于欺骗浏览器说已经“差不多了”，也就等于违背了设计预渲染的初衷，会影响页⾯的效果。放在body中间也是⼀样的道理，所以还是放在最尾巴上⽐较好。
⼗五.闭包
函数和对其周围状态的引⽤捆绑在⼀起构成闭包。也就是说，闭包可以让你从内部函数访问外部函数作⽤域。在 JavaScript 中，每当函数被创建，就会在函数⽣成时⽣成闭包。
闭包很有⽤，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于⾯向对象编程。因此，通常你使⽤只有⼀个⽅法的对象的地⽅，都可以使⽤闭包。
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2));  // 7
console.log(add10(2)); // 12
//add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。
在 add5 的环境中，x 为 5。⽽在 add10 中，x 则为 10。
⼗六.http协议
http（超⽂本传输协议）是⼀个基于请求与响应模式的、⽆状态的、应⽤层的协议，常基于TCP的连接⽅式
http请求由三部分组成，分别是：请求⾏、消息报头、请求正⽂
HTTP消息报头包括普通报头、请求报头、响应报头、实体报头。
HTTP协议的主要特点可概括如下：
1.⽀持客户/服务器模式。
2.简单快速：客户向服务器请求服务时，只需传送请求⽅法和路径。请求⽅法常⽤的有GET、HEAD、POST。每种⽅法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模⼩，因⽽通信速度很快。
3.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
4.⽆连接：⽆连接的含义是限制每次连接只处理⼀个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采⽤这种⽅式可以节省传输时间。
5.⽆状态：HTTP协议是⽆状态协议。⽆状态是指协议对于事务处理没有记忆能⼒。缺少状态意味着如果后续处理需要前⾯的信息，则它必须重传，这样可能导致每次连接传送的数据量增⼤。另⼀⽅⾯，在服务器不需要先前信息时它的应答就较快。
请求⽅法（所有⽅法全为⼤写）有多种，各个⽅法的解释如下：
GET    请求获取Request-URI所标识的资源
POST    在Request-URI所标识的资源后附加新的数据
HEAD    请求获取由Request-URI所标识的资源的响应消息报头
PUT    请求服务器存储⼀个资源，并⽤Request-URI作为其标识
DELETE  请求服务器删除Request-URI所标识的资源
TRACE  请求服务器回送收到的请求信息，主要⽤于测试或诊断
CONNECT 保留将来使⽤
OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求
状态代码有三位数字组成，第⼀个数字定义了响应的类别，且有五种可能取值：
1xx：指⽰信息--表⽰请求已接收，继续处理
2xx：成功--表⽰请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进⾏更进⼀步的操作
4xx：客户端错误--请求有语法错误或请求⽆法实现
5xx：服务器端错误--服务器未能实现合法的请求
常见状态代码、状态描述、说明：
200 OK      //客户端请求成功
400 Bad Request  //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域⼀起使⽤
403 Forbidden  //服务器收到请求，但是拒绝提供服务
404 Not Found  //请求资源不存在，eg：输⼊了错误的URL
500 Internal Server Error //服务器发⽣不可预期的错误
503 Server Unavailable  //服务器当前不能处理客户端的请求，⼀段时间后可能恢复正常
⼗七.http中的⽅法，除了get⽅法、post⽅法
请求⽅法（所有⽅法全为⼤写）有多种，各个⽅法的解释如下：
GET    请求获取Request-URI所标识的资源
POST    在Request-URI所标识的资源后附加新的数据
HEAD    请求获取由Request-URI所标识的资源的响应消息报头
小舍得免费
PUT    请求服务器存储⼀个资源，并⽤Request-URI作为其标识
DELETE  请求服务器删除Request-URI所标识的资源
TRACE  请求服务器回送收到的请求信息，主要⽤于测试或诊断
CONNECT 保留将来使⽤
OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求
⼗⼋.数据结构（排序算法，冒泡以外的）
数据结构是指相互之间存在着⼀种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成 。常⽤的数据结构有：数组，栈，链表，队列，树，图，堆，散列表（哈希表）
⼗⼤经典算法排序总结对⽐：
冒泡排序（正序最快，反序最慢）：
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j+1]) {        //相邻元素两两对⽐
var temp = arr[j+1];        //元素交换
web前端基础面试题arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
选择排序
时间复杂度上表现最稳定的排序算法之⼀，因为⽆论什么数据进去都是O(n²)的时间复杂度
function selectionSort(arr) {
var len = arr.length;
var minIndex, temp;
for (var i = 0; i < len - 1; i++) {
minIndex = i;
for (var j = i + 1; j < len; j++) {
if (arr[j] < arr[minIndex]) {    //寻最⼩的数
minIndex = j;                //将最⼩数的索引保存
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
插⼊排序(类似打扑克牌摸牌)
function insertionSort(arr) {
var len = arr.length;
var preIndex, current;
for (var i = 1; i < len; i++) {
preIndex = i - 1;
current = arr[i];
while(preIndex >= 0 && arr[preIndex] > current) {
arr[preIndex+1] = arr[preIndex];
preIndex--;
}
arr[preIndex+1] = current;
}
return arr;
}
希尔排序
希尔排序是插⼊排序的⼀种更⾼效率的实现。它与插⼊排序的不同之处在于，它会优先⽐较距离较远的元素。希尔排序的核⼼在于间隔序列的设定。既可以提前设定好间隔序列，也可以动态的定义间隔序列

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。