【参考】前端面试攻略（自整理）

最新推荐文章于 2024-08-15 20:53:53 发布
最新推荐文章于 2024-08-15 20:53:53 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： 前端面试 文章标签： 面试 web https html/js/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mus123/article/details/105323672
版权

该博主看起来挺厉害的百度携程滴滴头条360的offer都有，

我马上也要人生第一次前端实习面试了是美团的所以刷题看看人家的面经~

链接：https://m.sohu.com/a/236608417_690895
这个各方面都有吧能找到答案的我一般都做了传送门

文章目录

一、算法部分

如果你算法不好就可以直接告诉面试官。不需要过多作假，面试官其实也很聪明的，如果你作弊很快就能发现的。

1、基本排序的方式

img

冒泡、快排、桶排、堆排序、归并排序、插入排序。

（1）冒泡：排序思路：遍历数组，每次遍历就将最大（或最小）值推至最前。越往后遍历查询次数越少， 跟插入排序刚好相反。

（2）快排：选择一个元素作为基数（通常是第一个元素），把比基数小的元素放到它左边，比基数大的元素放到它右边（相当于二分），再不断递归基数左右两边的序列。

（3）桶排：取 n 个桶，根据数组的最大值和最小值确认每个桶存放的数的区间，将数组元素插入到相应的桶里，最后再合并各个桶。（n个容量至少为1的桶，从大到小，每次的数字放到对应桶的排序好的位置）

（4）堆排序：因为js模拟二叉树比较麻烦，所以堆排序的优势用js语言无法体现， 相对而言C语言的链表在实现上更能表现堆排序，堆排序或许更适合指针类的计算机语言。

形成大顶堆，然后顶和末尾叶节点交换，堆容量递减。并且每次构建完上边的堆要回去看一下其子堆有没有受到影响，（太麻烦了不写了，我解读一个别人的吧）

（5）归并排序：递归将数组分为两个序列，有序合并这两个序列（递归向下）

写的时候一直死递归，超出堆栈（但是我明明谢了结束条件了啊，发现有一个地方逗号写成了.然后块级作用域变量left、right忘了加let导致污染，真是难顶）

（6）插入排序：以第一个元素作为有序数组，其后的元素通过在这个已有序的数组中找到合适的位置并插入。

var arr=[1,3,6,9,2,7,5,4,8,3];//十位数
console.log(arr);
function swap(a,i,j){
   
    let t=a[i];
    a[i]=a[j];
    a[j]=t;
}
/** */

// //1.冒泡 稳定 n方
// function PopSort(arr){
   
//     let len=arr.length;
//     for(let i=0;i<len;i++)
//         for(let j=0;j<len-i;j++)
//             if(arr[j]>arr[j+1])swap(arr,j,j+1);//如果比右边的大就交换
// }
// PopSort(arr);

// //2.快排 不稳定 nlogn
// function QuickSort(arr){
   
//     let len=arr.length;
//     if(len<=1)return arr;//结束条件，如果arr长度为1或0
//         let left=[];
//         let right=[];
//         let p=arr[0];
//         for(let i=1;i<len;i++){//比基小放左边，反之放右边
//             if(arr[i]<=p)left.push(arr[i]);
//             else right.push(arr[i]);
//         }
//         //返回的是左边+基+右边
//         return QuickSort(left).concat(p,QuickSort(right));
// }
// arr=QuickSort(arr);

// //3.桶排序 稳定 n+k
// function buckerSort(arr,n){
   
//     let len=arr.length;
//     let max=Math.max(...arr);
//     let min=Math.min(...arr);
//     let range=Math.ceil((max-min)/n)||1;//取到桶容量大小
//     let ranges=[];
//     let bucker=new Array(n).fill(0);//保证元素不为空才能用map
//     bucker=bucker.map((b)=>{
   
//             return [];
//         })//写成二维数组
//     for(let i=1;i<=n;i++){
   
//         ranges.push(min+range*i);//得到各个桶的范围（最大值）
//     }
//     arr.map((a)=>{
   
//         for(let i=0;i<n;i++){//便利n个桶
//
//             if (a<=ranges[i])
//             {
   
//                 let f=0;
//                 var l=bucker[i].length||0;
//                 for(let j=0;j<l;j++)
//                     if(bucker[i][j]>a){bucker[i].splice(j,0,a);f=1;break;}//插到特定位置，并跳出
//
//                 if(f==0){bucker[i].push(a);}//如果原来是空直接push
//                 break;//如果能插入桶就跳出
//             }
//         }
//     })
//     let s=[];
//     bucker=bucker.map(b=>{
   
//         s.push(...b);
//     })
//     return s;

// }
// arr=buckerSort(arr,3);

// //4.堆排序 不稳定 nlogn
// function heapSort(){
   
//     function maxHeapify(array, index, heapSize) {//调整形成大顶堆
//         var iMax, iLeft, iRight;
//         while (true) {
   
//           iMax = index;
//           iLeft = 2 * index + 1;//左孩子
//           iRight = 2 * (index + 1);//右孩子
//           if (iLeft < heapSize && array[index] < array[iLeft]) {
   
//             iMax = iLeft;
//           }
    
//           if (iRight < heapSize && array[iMax] < array[iRight]) {
   
//             iMax = iRight;
//           }
//           //检查该三节点小堆是否符合大顶
//           if (iMax != index) {//如果不符合，能交换，但是要向下审查
//             swap(array, iMax, index);
//             index = iMax;//把基准换成被交换到子节点的节点
//           } else {//如果没发生交换，说明下面更没有可能变动
//             break;
//           }
//         }
//       }
//       function buildMaxHeap(array) {//堆构建
//         var i, iParent = Math.floor(array.length / 2) - 1;//得到最后一个非叶节点
    
//         for (i = iParent; i >= 0; i--) {//从非叶节点开始往前做堆调整，以此节点i为基准（即小堆父）
//           maxHeapify(array, i, array.length);
//         }
//       }

//     function sort(array){//起点
//         buildMaxHeap(array);//先构筑一个大顶堆
//       for (var i = array.length - 1; i > 0; i--) {//从最后一个节点开始向前做大顶堆与叶节点的交换
//         swap(array, 0, i);//交换堆顶与堆尾
//         maxHeapify(array, 0, i);//重调大顶，不包括末尾节点
//       }
//       //循环进行完之后，从尾部向头部变成当前堆最大的值
//       return array;
//     }
//     return sort(arr);
// }
// arr=heapSort(arr)
// //5.归并排序 稳定 nlogn
// function mergeSort(arr){
   
    
//     function sort(array){
   
//         let len=array.length;
//         if(len<=1)return array;
        
//         let mid=Math.floor(len/2);
//         let left=array.slice(0,mid);
//         let right=array.slice(mid,len);
//         return merge(sort(left),sort(right));
//     }
//     function merge(left,right){
   
//         let s=[];
//         while(left.length>0&&right.length>0){
   
//             if(left[0]<right[0]){
   
//                 s.push(left.shift());
//             }
//             else{
   
//                 s.push(right.shift());
//             }

//         }

//         return s.concat(left,right);
//     }

//     return sort(arr);
// }
// arr=mergeSort(arr);
// //6.插入排序 稳定 n方
// function insertSort(arr){
   
//     for(let i=0;i<arr.length;i++){
   
//         for(let j=i;j<arr.length;j++)
//             if(arr[i]>arr[j]){
   
//                 let t=arr[j];
//                 arr.splice(j,1);//取出这个数
//                 arr.splice(i,0,t);//插到比他大的那个数前面
//             }
//     }
// }
// insertSort(arr);

/** */
console.log(arr);

上边六种都通过了；冒泡和插入比较简单并且都稳定，但是复杂度较高。快排是在方便实现的里面稳定性和复杂度都比较好的了

2、二分查找。

//首先保证查找序列有序唯一，用快排排个序
let arr=[808,6,9,51,33,54,4];
function QuickSort(arr){
   
    let len=arr.length;
    if(len<=1)return arr;//结束条件，如果arr长度为1或0
        let left=[];
        let right=[];
        let p=arr[0];
        for(let i=1;i<len;i++){
   //比基小放左边，反之放右边
            if(arr[i]<=p)left.push(arr[i]);
            else right.push(arr[i]);
        }
        //返回的是左边+基+右边
        return QuickSort(left).concat(p,QuickSort(right));
}
arr=QuickSort(arr);
let k=4;//查个4，保证肯定在里面
let key=binarySearch(arr,k,0,arr.length);
console.log(`查${
     k}在第${
     key+1}个\n`,arr);
/** */
function binarySearch(arr,k,low,high){
   
    if(arr.length<1)return;
    let mid=Math.floor((low+high)/2);
    if(arr[mid]==k)return mid;
    else if(arr[mid]>k){
   
        return binarySearch(arr,k,low,mid-1);
    }
    else{
   
        return binarySearch(arr,k,mid+1,high);
    }
}

3.二叉树便利（前序中序后序）

https://blog.csdn.net/zsy_snake/article/details/80353336

4.尽量刷牛客和剑指offer

二、计算机网络部分

1.最重要的就是http协议。毕竟前端大多都和http协议搞事情。

http协议大多包含了以下几种问题吧

  • http请求报文解构都包含什么

    请求行（请求方法+url+http协议版本号）

    GET：获取资源
    客户端—-GET(访问某个资源)—–>服务器

    POST：发给服务器的参数全部放在请求体中
    客户端—-POST(上传某个信息)—–>服务器

    PUT：传输文件（PUT自身不带验证机制，任何人都可以传，不安全）
    客户端—-PUT(上传一个文件)—–>服务器

    HEAD：获得报文首部（不返回主体部分，只返回响应的首部）
    客户端—-HEAD(把那个相关信息告诉我)—–>服务器

    DELETE：删除文件（与PUT相反，不安全）
    客户端—-HEAD(把那个文件删除)—–>服务器

    OPTIONS：询问支持的方法（查询对请求URI指定资源支持的方法）
    客户端—-OPTIONS(这个资源支持哪些方法访问)—–>服务器

    请求头（存放请求信息，缓存）

    Host： 指定请求的服务器的域名和端口号 --域名端口号
    Accept: 指定客户端能够接受的内容类型 – 类型
    Accept-Charset: 浏览器可以接受的字符编码集 --编码集
    Accept-Encoding: 指定浏览器可以支持的web服务器返回内容压缩编码类型 – 内容压缩编码类型
    Accept-Language: 浏览器可接受的语言 – 语言
    Accept-Ranges：可以请求网页实体的一个或多个子范围字段 – 子范围字段
    AuthorizationHTTP：授权证书
    Cache-Control: 指定请求和响应遵循的缓存机制
    Connection：表示是否需要持久连接 --连接
    CookieHTTP: 请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器 – cookie
    Content-Length：请求的内容长度 – 长度

    正文（数据实体）

  • http协议常用的状态码

    参见：https://www.jianshu.com/p/b58025e61b2d

    分类 描述
    1** 信息。服务器收到请求，请继续执行请求
    2** 成功。请求被成功接收并处理
    3** 重定向。需要进一步操作来完成请求
    4** 客户端错误。无法完成请求，或请求包含语法错误
    5** 服务器错误。服务器在处理请求的过程中发成错误

    -100继续请求者应当继续提出请求。服务器已收到请求的一部分，正在等待其余部分。
    101切换协议请求者已要求服务器切换协议，服务器已确认并准备切换。
    -200成功服务器已成功处理了请求。
    -201已创建请求成功并且服务器创建了新的资源。
    -202已接受服务器已接受请求，但尚未处理。
    -203非授权信息服务器已成功处理了请求，但返回的信息可能来自另一来源。
    -204无内容服务器成功处理了请求，但没有返回任何内容。
    -205重置内容服务器成功处理了请求，内容被重置。
    206部分内容服务器成功处理了部分请求。
    -300多种选择针对请求，服务器可执行多种操作。
    -301永久移动请求的网页已永久移动到新位置，即永久重定向。
    -302临时移动请求的网页暂时跳转到其他页面，即暂时重定向。
    303查看其他位置如果原来的请求是 POST，重定向目标文档应该通过 GET 提取。
    -304未修改，此次请求返回的网页未修改，继续使用上次的资源。
    -305使用代理请求者应该使用代理访问该网页。
    307临时重定向请求的资源临时从其他位置响应。
    -400错误请求，服务器无法解析该请求。
    -401未授权请求，没有进行身份验证或验证未通过。
    -403禁止访问服务器拒绝此请求。
    -404未找到服务器找不到请求的网页。
    -405方法禁用服务器禁用了请求中指定的方法。
    -406不接受，无法使用请求的内容响应请求的网页。
    407需要代理授权请求者需要使用代理授权。
    -408请求超时服务器请求超时。
    -409冲突，服务器在完成请求时发生冲突。
    -410已删除请求的资源已永久删除。
    411需要有效长度服务器不接受不含有效内容长度标头字段的请求。
    412未满足前提条件服务器未满足请求者在请求中设置的其中一个前提条件。
    -413请求实体过大请求实体过大，超出服务器的处理能力。
    414请求 URI 过长请求网址过长，服务器无法处理。
    415不支持类型请求的格式不受请求页面的支持。
    416请求范围不符页面无法提供请求的范围。
    417未满足期望值服务器未满足期望请求标头字段的要求。
    -500服务器内部错误服务器遇到错误，无法完成请求。
    -501未实现服务器不具备完成请求的功能。
    -502错误网关服务器作为网关或代理，从上游服务器收到无效响应。

    -503服务不可用服务器目前无法使用。

    -504网关超时服务器作为网关或代理，但是没有及时从上游服务器收到请求。
    -505HTTP 版本不支持服务器不支持请求中所用的 HTTP 协议版本。

  • http头部关于缓存的字段（浏览器缓存控制机制有两种：HTML Meta标签 和 HTTP头信息）

    强缓存定义: 在缓存未失效时候，浏览器向服务端发起请求，直接从缓存中获取数据，
    Expires的值为web服务器返回的到期时间(GMT 格林威治时间),浏览器下次请求时间小于服务器返回的时间则浏览器直接从缓存中获取数据，而不用再次发送请求。
    cache-control常见的取值：private, public, no-cache, max-age, no-store
    private : 客户端可以缓存
    public : 客户端和代理服务器都可缓存
    max-age= ： 缓存存储的最大周期，超过这个时间缓存被认为过期（单位秒）
    no-cache : 并不是不缓存，是会被缓存的，只不过每次在向浏览器提供相应数据时，浏览器每次都要向服务器发送请求，有服务器来决策评估缓存的有效性。
    no-store : 所有内容都不缓存。

    对比缓存定义：服务器对比判断文件是否修改，告诉浏览器是否可以使用本地缓存。对比生效时，服务器返回给浏览器的http code 为304，服务器只返回http header信息，并无响应正文。浏览器收到304的返回，知道本地缓存并无修改，直接使用本地缓存。

    Last-Modified或者if-Modified-Since，服务器响应浏览器请求，告诉浏览器资源的最后修改时间

    ETag是实体标签（Entity Tag）的缩写， 根据实体内容生成的一段hash字符串（类似于MD5或者SHA1之后的结果），可以标识资源的状态。可以理解为一个资源的唯一标识符，只要文件发生变化Etag的值也变化。

    http请求头缓存相关字段

    If-Modified-Since

    客户端存取的该资源最后一次修改的时间，来自上次服务端的Last-Modified。

    If-None-Match

    客户端存取的该资源的检验值，来自上次服务端的ETag。

    cache-control:no-cache

    no-cache: 跳过本地强制缓存和告诉服务器跳过对比缓存，重新请求资源。

    web缓存的实现方式类型：

    • 数据库数据缓存
    • 服务器段缓存（包括代理服务器缓存和CDN缓存）
    • 浏览器端缓存
    • web应用层缓存

  • http和https的区别

    http用80端口，https用443

    https运行在SSL/TLS上，SSL/TLS运行在TCP上；http直接运行在TCP上

    HTTPS协议可以理解为HTTP协议的升级（SSL+Http协议），就是在HTTP的基础上增加了数据加密。数据保密，数据防篡改，证书验证（CA）。

    https比http的无状态连接要慢

  • http1.0 -1.1- spdy-2.0 大致的区别

    1.0-》1.1：

    引入更多的缓存处理（如Entity tag）

    带宽优化（range头域）

    错误通知（新增了错误状态码）

    Host头处理（相比之前的虚拟主机，必须包含头域）

    支持了长连接和请求的流水线处理，在一个TCP连接上可以多请求多响应

    1.1-》spdy

    降低延迟

    请求优先级（防阻塞）

    header压缩，避免重复header。

    基于https的加密协议传输

    服务端推送

    spdy-》2.0

    2.0支持明文http传输，spdy只能用https

    消息头的压缩算法优化

    新的二进制格式

    多路复用（连接共享），比长连接优化

除此之外暂时想不到其他的了。缓存字段和200、404、304之类非常常用的状态码一定要记住。

2.tcp的三次握手和四次挥手

tcp三次握手

img

第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认；
SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态；
第三

最低0.47元/天 解锁文章
mus_木司
关注
专栏目录
前端面试技巧
狗哥的博客
10-29 3615
9月底秋招结束后，一直玩到今天。这篇博客在9月份就想写来着，可那段时间太忙了，一天最多做过四个笔试，面试三家公司，确实没有精力再写博客了。这篇博客主要针对前端面试高频问题，网上关于前端面试的题目有很多，但是很多题目过于陈旧，并不会被问到。以下内容是我亲身经历面试时经常被问到的点和如何回答的，希望给以后找工作的同学一点参考。在此也要感谢慕课网的《前端跳槽面试必备技巧》这门课程，如果有兴趣的同学可以...
最新前端面试题攻略
weixin_34247155的博客
03-06 101
一、html和css部分1、如何理解CSS的盒子模型？每个HTML元素都是长方形盒子。（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。2、用纯 CSS 创建一个三角形的原理是什么？把上、左、右三条边隐藏掉颜色设...
前端高频面试题 - 总汇篇（持续更新中……）
最新发布
PNPYY的博客
08-15 1363
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的严格模式：是以浏览器支持的最高标准运行混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为。
我们前端是怎么找到工作的
weixin_34408717的博客
11-18 482
  文章背景：结束d2之行或周末的前端群线下见面会，跟一些待毕业的学生或正在这个行业的从业者交流后我深切的感触到：在如今信息大爆炸的今天，搜索引擎这么方便的前提下，除了少部分乘上校招快车的幸运儿之外，大部分同学找工作很迷茫，很难。很多同学不会找工作，也不知道如何找工作，如何找一份适合自己的工作。其实任何事物都有规律的，只要掌握规律玩法，个人感觉IT行业，尤其前端大环境这么好的前提下找个工作其...
Web前端面试资源
zxy9602的博客
03-03 1480
前端面试资源 9 小时前 •  Web前端 • 暂无评论 继上一篇 关于程序员求职简历 之后如果顺利的话就应该是面试了，在此也整理一下最近在网上收集的前端面试相关资料，包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多，就光从知乎、前端乱炖、w3cplus 等网站就能找到很多，所以针对细节不发散，仅挑一些内容丰富的合集，更多的资料可以从其中找到。 1. 前
前端面试
qq_41566972的博客
07-15 67
1.何为mvvm m---数据模型，v---ui视图组件，vm---将m和v关联起来，数据会绑定到vm层并自动将数据渲染到视图，视图的改变会通知vm层更新数据。 2.vue2.0响应试原理/双向数据绑定 双向数据绑定主要指的是：**数据变化更新视图，视图变化更新数据** 其中视图变化更新数据可以通过事件绑定来实现，vue双向数据绑定主要解决数据变化如何来更新视图 vue2.0采用数据劫持结合发布者-订阅者模式的方式， 通过Object.defineProperty()来劫持各个属性的setter
前端面试题及答案整理(二)
10-21
标题“前端面试题及答案整理(二)”表明这篇文章是针对前端技术岗位求职者在面试中可能会遇到的技术问题和答案的整理。文章继第一篇后，对常见的数据结构算法和JavaScript相关的问题之外的内容进行了补充。本文内容...
2024前端Vue面试题整理
12-30
《2024前端Vue面试题整理》是一份专门针对Vue框架的面试题集锦，涵盖了Vue的基础知识、核心特性、性能优化以及企业级应用等方面的内容。这份资料旨在帮助计算机专业的学生和从业人员更好地准备和通过Vue相关的面试。...
前端面试常见问题集锦册
01-30
前端： 这指的是前端开发，是指构建在网站或者 Web 应用程序中用户直接与之...因此，“前端面试常见问题集锦册”可以理解为一本专门整理了前端面试中常见问题的参考书或资源，供求职者在准备前端开发职位面试时使用。
前端面试知识点整理——项目整理_前端面试项目介绍
2401_84447149的博客
05-02 45
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总。
前端面试通关指南
weixin_33755557的博客
12-30 147
简评：任何面试就两步，大量的准备（战前分析），面试的表现（作战发挥）。很多人觉得面试难，可能是第一步，准备还不够充分。 前端面试很难，这是事实，不但需要牢固掌握计算机科学基础知识，而且还需要了解 Web 性能，构建系统和 CSS 布局引擎等内容。所以特此写一个指引性质的文章，来帮助前端开发者更好的应对面试。 ★面试前准备 在你的面试之前，询问招聘者面试的方式。 一些面试可能围绕白...
分享一篇比较好的前端面经
csdn_haow的博客
12-05 1459
分享一篇比较好的前端面经
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值