今天面试去啦，填了职业性格测试，人格测试及招聘的基本经历信息，面试官是技术头头，柔中带钢，问题润物细无声的感觉，很考验基本功。

上午10:30面试了一个达达的前端，采用的是线上腾讯会议的方式，面试官是个大美女，最窒息的操作是让我投屏在浏览器控制台敲代码，用编译器它不香？下午4:00面试的是一家生态监控的公司，比较注重完美人格的公司，除了技术主管谈到了的技术问题，其他的流程都是职业性格测试，职业经历，人格测试等。这里总结一下几个回答不是很好的问题。

目录

1.使用正则表达式验证手机号码

2.画一条0.5px的线？

3.从输入URL到页面加载完成期间经历了什么？

4.JavaScript是单线程，怎样执行异步的代码 ？

5.什么是正向代理与反向代理？

1.使用正则表达式验证手机号码

验证正则解释

  1. 从头开始第一位是1；
  2. 第二位是3,4,5,7,8；
  3. 第三位到结尾是0 - 9 的数字。
function checkPhone(phone) {//验证电话号码手机号码，包含至今所有号段? ?var ab = /^[1][3,4,5,7,8][0-9]{9}$/;if (ab.test(phone) == false) {layer.alert("请正确填写手机号码!", { icon: 5, offset: '200px' });returnfalse;}}

2.画一条0.5px的线？

我当时直接来一个border：0.5px.面试问我确定？因为平时可能都是直接border：1px.没注意细节。这里操作一下。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试0.5px</title><style type="text/css">#demo{border:0.5px solid #000000;background-color: red;width: 150px;height: 150px;}</style></head><body><div id="demo">我是求职者</div></body>
</html>

好像也没啥问题

面试官问到的应该不是这个问题，查一下资料。指的应该是某些0.5px在移动端低版本为0px的问题.经过试验你会发现有些版本可能会有误差，最小尺寸问题不详，按照他的思路撸一下吧。

采用meta viewport的方式。

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />

采用transform: scale()的方式

将绘制出来的线条的高度进行半倍的缩放

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>boardTest</title> <style> p{ margin: 50px auto; padding: 5px 10px 5px 10px; color: red; text-align: center; width: 60px; } p:first-child{ border-bottom: 1px solid red; } p:last-child{ position: relative; } p:last-child:after { position: absolute; content: ''; width: 100%; left: 0; bottom: 0; height: 1px; background-color: red; -webkit-transform: scale(1,0.5); transform: scale(1,0.5); -webkit-transform-origin: center bottom; transform-origin: center bottom } </style>
</head>
<body> <div> <p>点击1</p> <p>点击2</p> </div>
</body>
</html>

基本就是上面的方法啦，当然可能也可以用渐变色linear-gradient的方式，不谈了。

3.从输入URL到页面加载完成期间经历了什么？

1、DNS域名解析

回车敲响的那一刻，浏览器检查了输入框，www.sunjiaoshou.com是什么鬼东西？？我需要的可是IP地址呀！万般无奈之下找向了浏览器缓存，让其查找是否有这家伙的记录，结果并没有发现，此时找向系统缓存，主要去查找了系统中的hosts文件，同样没有，此时找向路由器缓存，查看路由器映射表，然而，并没有！于是，计算机将域名发给了本地DNS服务器（提供本地连接的服务商），本地DNS服务器找不到会将域名发送给其他服务器，进行递归过程，首先会发送到根域名服务器去找，返回顶级域名服务器的IP地址，再请求顶级域名服务器IP返回二级域名服务器IP，再请求二级域名服务器IP返回三级域名服务器IP......直到找到对应的IP地址，返回给浏览器。

2、发起TCP连接（三次握手）

拿到IP地址后的浏览器很开心，终于可以有目的的去联系远方的“朋友”了，此时作用于传输层的TCP协议向远端服务器发起连接请求，此举成为三次握手：

①源端->远端：你好，我想跟你连接可以吗？（SYN=1,seq=x）

②远端->源端：可以，你确定要连接是吧？（SYN=1,ACK=1,seq=y,ack=x+1）

③源端->远端：确定，我们连接吧！（ACK=1,seq=x+1,ack=y+1）

3、发送HTTP请求，接受HTTP响应

OK，连接上了，传输吧，这时就需要将用户输入的地址封装成HTTP Request请求报文，发送到服务器，服务器收到请求后会发出应答，即响应数据。

HTTP请求报文格式：请求行+请求头+空行+消息体，请求行包括请求方式（GET/POST/DELETE/PUT）、请求资源路径（URL）、HTTP版本号

HTTP响应报文格式：状态行+响应头+空行+消息体，状态行包括HTTP版本号、状态码、状态说明。

4、断开TCP连接（四次挥手）

传也传完了，那咱们断开连接吧！

①源端->远端：好了，咱们断开吧（FIN=1,seq=u）

②远端->源端：行，等我稍微检查一下还有没有要发你的数据（ACK=1,seq=v,ack=u+1）

③远端->源端：可以了，咱们断开吧，拜拜（FIN=1,ACK=1,seq=w,ack=u+1）

④源端->远端：好的，再会，拜拜（ACK=1,seq=u+1,ack=w+1）

5、浏览器解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户

浏览器获取文件后开始利用内核解析了，解析过程中也会出现一些HTTP请求请求一些资源，如js，css等文件，将这些文件下载到本地。浏览器解析HTML文件时会自上而下，起初产生一个DOM树，解析CSS之后产生CSS规则树，后将两树进行融合，合成为渲染层，最后调用操作系统的Native GUI的API绘制。

4.JavaScript是单线程，怎样执行异步的代码 ？

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript 不能有多个线程呢 ？这样能提高效率啊。

JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript 就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制，且不得操作 DOM。所以，这个新标准并没有改变 JavaScript 单线程的本质。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
js 引擎执行异步代码而不用等待，是因为有 消息队列和事件循环。

  • 消息队列：消息队列是一个先进先出的队列，它里面存放着各种消息。
  • 事件循环：事件循环是指主线程重复从消息队列中取消息、执行的过程。

实际上，主线程只会做一件事情，就是从消息队列里面取消息、执行消息，再取消息、再执行。当消息队列为空时，就会等待直到消息队列变成非空。而且主线程只有在将当前的消息执行完成后，才会去取下一个消息。这种机制就叫做事件循环机制，取一个消息并执行的过程叫做一次循环。

while(true) {var message = queue.get();execute(message);
}

主线程在执行完当前循环中的所有代码后，就会到消息队列取出这条消息(也就是 message 函数)，并执行它。到此为止，就完成了工作线程对主线程的通知，回调函数也就得到了执行。如果一开始主线程就没有提供回调函数，AJAX 线程在收到 HTTP 响应后，也就没必要通知主线程，从而也没必要往消息队列放消息。

5.什么是正向代理与反向代理？

正向代理

正向代理类似一个跳板机，代理访问外部资源

比如我们国内访问谷歌，直接访问访问不到，我们可以通过一个正向代理服务器，请求发到代理服，代理服务器能够访问谷歌，这样由代理去谷歌取到返回数据，再返回给我们，这样我们就能访问谷歌了

正向代理的用途：

　　（1）访问原来无法访问的资源，如google

（2） 可以做缓存，加速访问资源

　　（3）对客户端访问授权，上网进行认证

　　（4）代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息

 反向代理

反向代理（Reverse Proxy）实际运行方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器

反向代理的作用：

（1）保证内网的安全，阻止web攻击，大型网站，通常将反向代理作为公网访问地址，Web服务器是内网

（2）负载均衡，通过反向代理服务器来优化网站的负载

好啦，本期的内容就分享到这里，我们下期见！

好书不厌百回读，熟读自知其中意。让学习成为习惯，用知识改变命运，让博客见证成长，用行动证明努力。
            如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！
            听说

【前端面试题】2021/3/12挺经典的面试题，这个经历很深刻。相关推荐

  1. 12个经典性能测试面试题

    1.性能测试包含了哪些软件测试(至少举出3种)? 负载测试(Load Testing):负载测试是一种主要为了测试软件系统是否达到需求文档设计的目标,譬如软件在一定时期内,最大支持多少并发用户数,软件 ...

  2. java 算法笔试题_【干货】经典算法面试题代码实现-Java版

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 面试题3:二维数组中的查找 题目描述:一个二维数组,每一行从左到右递增,每一列从上到下递增．输入一个二维数组和一个整数,判断数组中是否含有整数. publ ...

  3. java算法面试题_【干货】经典算法面试题代码实现-Java版

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 面试题3:二维数组中的查找 题目描述:一个二维数组,每一行从左到右递增,每一列从上到下递增．输入一个二维数组和一个整数,判断数组中是否含有整数. publ ...

  4. 网易有道秋招前端面经

    网易有道秋招前端面经 2021/01/13 一面 时长:50分钟 vue双向绑定原理 为什么需要虚拟DOM,diff算法的作用 render树和DOM树的区别 组件间的通信 排序有哪些,手写快排 设计 ...

  5. 一道非常经典C++面试题|大厂面试

    问题1:小伙伴问我,这个unique_ptr出了作用域为什么没调它的析构函数呢? 问题2:第一个运行结果是什么?为什么? 我把问题抛到群里讨论,让大家一起思考,大家可以先思考一下: C++背景知识 C ...

  6. 2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）

    整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...

  7. 2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

    近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k-15k的常见面试题 个人录制的最新Vue项目学习视频:B站 小胖梅-的个人空间_哔哩哔哩_Bilibili 红色为常见面试题 ====== ...

  8. 前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)

    前端面试题 HTML5 相关面试题 CSS3 相关面试题 盒子模型 盒子水平垂直居中的方案 经典布局方案 圣杯布局 双飞翼布局 flex布局 定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...

  9. 2018最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)--转载

    版权声明:本文为转载文章,感谢博主小胖梅的博客,如有侵权,请联系我删除,谢谢 转载链接: https://blog.csdn.net/xm1037782843/article/details/8070 ...

最新文章

  1. 美国AI博士指出，自学Python到底能做什么
  2. java jvm崩溃_IObjects java 代码导致jvm崩溃了
  3. Web服务的体系架构
  4. 11旋转编码器原理图_雷恩PRECILEC I9H系列增量式编码器
  5. HDU - 3605 Escape(二分图多重匹配-网络流最大流+思维建边+状态压缩)
  6. Java技术：Optional 相关用法介绍笔记
  7. 伪指令endp告诉汇编程序_全国2004年10月高等教育自学考试微型计算机原理及应用试题历年试卷...
  8. 语音识别端到端模型解读：FSMN及其变体模型
  9. 019-Spring Boot 日志
  10. .NET伪静态使用以及和纯静态的区别
  11. liunx Swap 分区的作用
  12. 北京周边有意境的好去处！！！
  13. 三星s10刷linux,三星S10/S10+刷入TWRP_Recovery最新版教程
  14. 意识与本我、自我、超我理论
  15. 如何用PPT画出好看的科研图
  16. 全球及中国游戏耳机行业销售模式与动态盈利分析报告2022版
  17. 你想要的宏基因组-微生物组知识全在这(2020.5)
  18. Referrer、Referrer-policy
  19. windows 防火墙日志_如何使用Windows防火墙日志跟踪防火墙活动
  20. java 相关论坛或网站

热门文章

  1. 电源模块低温和高温工作会造成什么后果？
  2. bloomfilter的java实现,BloomFilter（布隆过滤器）原理及实战详解
  3. c语言构造报文,构造一个缓冲区溢出的C语言的例子
  4. StevenBoyd--Convex optimization--0. Contents
  5. vc mysql 图片_VC连接MySQL
  6. visual studio odbc数据源设计器_NEW！WinForm界面开发设计时正式支持.NET 5
  7. (2,1,3)卷积码与一种QC-LDPC码的译码性能对比
  8. 隔离区别对待？如何捆绑？Java中的jdbc数据库事务及其隔离级别
  9. gacutil不是内部或外部命令_Win7命令提示符输入taskkill提示不是内部或外部命令...
  10. 笔记_SQLite入门