面试准备：以接化发来迎接一套"五连题"的偷袭（上篇）

白天的蓝云
2,327 阅读11分钟

1. 引言

很多企业的春招马上结束了，2022届毕业的同学如果想在秋招冲击更好的就业， 简历上写实习经验的话，要抓住这个机会。最近身边同学陆续接到面试，但本人水平有限，很是矛盾。但总是要面对。所以先来准备一套‘接化发‘，以供自学和大家参考。

  • 接：接受面试
  • 化：化取知识
  • 发：发现问题

2. 接：鸡血注射

我相信很多人跟我一样，看到网络上的面试题，看到许多不熟悉的却常考的知识点，看到自己一塌糊涂的项目等等都会觉得自己准备不够充分（不要对号入座）。现实可能确实如此，但是需要敢于面试，应为它能带给你在自己学习中得不到的东西。

  • 最重要的一点，心里建设：一次次的面试中能提升你的心理强度，抗打击能力，就如同恋爱，初恋时彼此的接触会让你心动不已，紧张十分。但到结婚后会觉得平淡如水。经过一次次的拷问，渐渐适应的心让你更加冷静，能想起更多不应该忘记的答案。如果心里素质实在比较低的话，可以先做一些平常会觉得紧张的事锻炼一下。不要太过盲目。心理建设越早越好
  • 提升表达能力，这种表达能力可以包括你和面试官交流的方式，你回答问题的方式，用词，语气，速度，吐字等。首先要礼貌客气，语速均匀，正常，清晰标准的说话，你可以在自我介绍的第一个阶段后问问面试官自己的表达有没有让他不适的地方。语言适当生活化，营造良好的气氛。回答问题时，首先要诚实肯定，不应支支吾吾。分方面，分熟悉程度和重要程度的先后和分点回答。面试末时，你可以询问面试官关于你的表达方面的建议。在多次的面试中你的表达能力应该会提升。
  • 查漏补缺，找到热点：是的，也许你不用面试也知道自己的知识网残破不堪，但面试的经历会让你知道你真正的漏洞，不仅给你提供前所未知的名词，还可能拷问到你对自己颇为自信的某方面失去梦想。面试让你发现新大陆，让你发现自身立足的地基里的'偷工减料'。当你面试后，进行总结。这些经验可能会刻入DNA,映像深刻的知识点才能记得更久。只有总结才会让你亲身体验到一类公司，一类知识点的'热点'
  • 激发学习动力：首先要问自己，真的很努力在学习吗？自己的努力有效果吗？面试可能真的会批到你体无完肤，知耻而后进。鞭策会驱使自己走的更远。（别骂了，人麻了 😭）

在此分享一个方法论：麦肯锡学习法：陈述问题(准备是否到达这个阶段？)->分析问题(知识的不足在哪，能力欠缺）->去除所有非关键问题（恋爱，游戏，多余的社交，心理畏惧）->复盘（面试结束后及时总结）**

3. 化：'五'连题

这套面试题是我偶然得知，简单总结一下。

1. 写出几种会话跟踪用户的方法

一开始看到这个问题我蒙了，好像从未听过，连会话是什么也不知道。基础概念还是要记牢。

  1. 会话是指客户端连接到服务器并发送请求与服务器响应该请求的全过程。一共四种常用方法。
  2. 第一种 URL重写：在URL结尾添加一个附加的会话ID以标识该会话
  3. 第二种 隐藏表单域：将会话ID添加到HTML表单元素中提交到服务器
  4. 第三种 Cookie：Cookie存储用户信息，每次发送请求的时候包裹cookie，识别用户
  5. 第四种 session:用户都有一个不同的session,服务器端创建session对象，产生sessionID来标识session对象，将sessionID放入到Cookie中发送到客户端
  • 扩展：这里可能会引出cookie 的几种属性和网络安全，浏览器的四种存储的区别，浏览器缓存等问题。可以翻阅之前的文章。
2.http的method有几种，以及各自含义。

非常多，可能记不全，分类记，尽量精简取益，根据英文猜中文，有的能对比。

获取资源类

  • GET:请求页面资源，返回主体
  • POST：带数据(例如参数)请求，返回处理的资源信息
  • HEAD：请求页面，返回响应体的首部 操作类：
  • PUT :用客户端传给服务器的数据替换指定的URL里的内容
  • DELETE:请求服务器删除指定的页面
  • CONNECT:让服务器作为用户代理，访问其他页面（VPN）。不常考 信息类：
  • OPTIONS:允许客户端查看服务器性能
  • TRACE:协议调试方法,该方法会使服务器原样返回任意客户端请求的任何内容。 扩展：这里可能会引出POST和GET的异同，Http协议的相关问题。
3. http请求报文中User-Agent和Referer的含义是什么

比较常考，报文字段的含义和作用，只能说，挑重点记

  1. Referer:是HTTP协议中的一个请求报头，用于告知服务器用户资源的来源页面。比如说你从百度搜索结果中点击进入了某个页面，那么该次HTTP请求中的Referer就是搜索结果页面的地址。如果你的博客中引用了其他地方的一张图片，那么对该图片的HTTP请求中的Referer就是你那篇博客的地址。

  2. User Agent:中文名为用户代理，是Http协议中的一部分，属于头域的组成部分，User Agent也简称UA。它是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识 扩展：http请求报头字段解释

4.如何进行网站性能优化

多，太多了，个个详细的介绍很难，对于这种问题，要设计包袱，引起面试官注意，加深对你的印象。简单介绍比较简单或不太清楚的，等他进一步询问的时候，仔细讲讲你精通的。记忆时学会分类。在这里只是初步介绍。

  • 减少请求和使用缓存类
  1. 减少http请求:   减少http请求和其并发次数，主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。
  2. 使用本地存储进行缓存：Cookie ,LocalStorage,SessionStroage,IndexDB.它们的区别可以看看我的一篇文章
  3. 合理设置 HTTP缓存。强缓存：在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header，协商缓存：通过【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对 Header 分别管理。
  • 压缩类
  1. 启用压缩:在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。webpack是一个典型的前端工具
  • 图片类
  1. css Sprites，base64格式：雪碧图使用一张图片，截取图片的各个部分来用。把图片格式转换成base64格式可以显著减少图片字节数
  2. 懒加载(重点，可能还要手写)：对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图。主要思想是不直接使用img的src属性，用data-src存放url,判断图片是否出现在视窗,监听滚动条，出现则让src=data-src.关于详细讲解，掘金搜，找自己理解的即可。例如： @云伴风轻舞
let imgList=[...document.querySelectorAll('img')]
let length =imgList.length;

const imgLazyLoad=function(){
    let count =0;
    return (function (){
        let deleteIndexList=[];
        imgList.forEach((img,index)=>{
            let rect=img.getBoundingClientRect()
            if(rect.top<window.innerHeight)
            {
                img.src=img.data-src
                deleteIndexList.puah(index)
                count++
                if(count===length)
                {
                    document.removeEventListener('scroll',imgLazyLoad)
                }
            }
        })
        imgList=imgList.filter((img,index)=>{
            !deleteIndexList.includes(index)
        })
    })
}
  • 执行类
  1. CSS放在页面最上部，javascript放在页面最下面：优先页面渲染，避免js堵塞
  2. 尽量减少外部脚本的使用，减少DNS查询时间（实在不好分类） 扩展: 海阔由鱼越，天高任鸟飞。。。
5.display,float,position 的关系

一开始看到，真想不到它们之间能有什么关系，再想想它们之间可能相近，也可以有排斥的

  1. display属性指定了一个DOM元素说使用的盒子模型（box）。即元素应该生成的框的类型；float 属性定义元素在哪个方向浮动，。浮动元素会生成一个块级框；position属性指出一个元素的定位方法

  2. CSS框模型（盒子模型） 一切皆为框，没有display,就没有float和position，display:none,float,position失效

  3. float和positiond的互斥，display非none, position:absolute || fixed(绝对定位)，flex失效， display属性的值根据下表自动计算。box的位置取决于属性top，right，bottom，left以及box的容器

  • display,position固定且不影响float时，float的值和元素是否为根元素来决定

  1. display非none，并且position非absolute、fixed，float不为none，那么box是浮动的

  2. display非none，position非absolute、fixed，float为none,如果元素是根元素，display的值根据下表来计算。

  3. display非none,并且position非absolute、fixed,float为none,不是根元素，box按照被指定的display的属性值来显示。

转换表(记一点点):

inline-table->tale inlene，

table- **- ** —>block

扩展：盒模型 @ 喀喀 优秀作者，块级元素和内连元素的举例和对比；flex：1 1 1，三个属性 @Lovi 滴滴大佬；清除浮动的方式

6.什么是跨域问题以及如何解决

前端网络知识关于跨域的问题非常常见，是一个重点。

1.跨越的先决原因：同源策略是指协议，域名，端口相同。跨域含义：受浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

解决方案：

  1. JSONP 利用html的某些标签的src属性不受影响的特点，在请求的url后加参数callback=***，=后是一个你程序里接受服务器返回的一段被callback{}包裹的资源文本的处理函数名，该函数负责将文本处理为代码。

  2. cors：跨域资源共享（Cross-origin resource sharing）；实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

  • 简单请求：head，get，post，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。Origin字段用来说明本次请求来自哪个源。服务器根据这个值，决定是否同意这次请求。
  • 复杂请求：put和delete 除Origin字段外，"预检"请求的头信息包括两个特殊字段。Access-Control-Request-Method，用来列出浏览器的CORS请求会用到哪些HTTP方法；Access-Control-Request-Headers，指定浏览器CORS请求会额外发送的头信息字段。

  1. HTML5的postMessage

  2. window.name

  3. location.hash

扩展：推荐阅读 @jingda 美女同学，360 大佬，可多多关注😏

4 发：总结弱点

  • 上半部分http相关知识较多，计算机网络和js基础一样是前端的支柱，我的明显不够牢靠，需要加深学习
  • css不会很减分，盯着flex，translate,display,清除float等常考点拼命干。
  • 基础还是很薄弱，有的问题需要查询很多资料，知识广度不够。 一个字：学。N个字：只要学不死，就往死里学。

（可我还是很怕面试啊！！！怎么办。）

下篇的重点在于对vue技术栈的相关理解.感兴趣的小伙伴可以点个赞和关注。不日再会

本人大三，正寻实习，与君共勉。寥有拙作，万望指正。

悄悄话：长期关注我的同学可能知道我很喜欢TS,同样喜欢但没买新专的可以私下交流

avatar
文章
阅读
粉丝