【前端面试题】2021/3/12挺经典的面试题,这个经历很深刻。

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

上午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)负载均衡,通过反向代理服务器来优化网站的负载

 

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

            好书不厌百回读,熟读自知其中意。让学习成为习惯,用知识改变命运,让博客见证成长,用行动证明努力。
            如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!
            听说 👉 点赞 👈 的人运气不会太差,每一天都会元气满满呦!^ _ ^ ❤️ ❤️ ❤️
            码字不易,大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦!
            更多精彩内容请前往 孙叫兽的博客

微信公众号【电商程序员】,分享改变自己的项目。

如果以上内容有任何错误或者不准确的地方,欢迎在下面 👇 留个言。或者你有更好的想法,欢迎一起交流学习~~~
 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357479.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html5 ios cookie,ios – WKWebView,获取所有cookie

我想从WKWebView获取所有cookie.为什么&#xff1f;我已经启动了一个使用基于Web的身份验证的项目.因此,我应该拦截cookie以确保用户已登录并用于其他目的.另一种情况 – 想象一下,如果用户登录,而不是“杀死”应用程序 – 由于存储此cookie会话的一些延迟将丢失:(.The problem…

【前端面试题】2021/3/15面试题

最近在boss直聘上投了很多简历&#xff0c;记录一下今天的面试题&#xff0c;这个好几个都是电话直接打过来问时间方便&#xff1f;我一回答方便就直接开始丢题目&#xff0c;我也不知道哪个公司的。感觉公司不是很正规的感觉&#xff0c;感觉那边有个问题题库&#xff0c;面试…

javafx打包路径问题_关于JavaFX的最常见问题

javafx打包路径问题上周&#xff0c;我在斯德哥尔摩的Jfokus 2012上做了一个关于JavaFX的演讲&#xff0c;当时我意识到每次活动都会问三个问题。 似乎有一个普遍的兴趣&#xff0c;所以我尝试在这篇文章中回答他们&#xff08;尽可能的说实话&#xff09;&#xff1a; iPad或其…

【前端面试题】关于一些js的一些面试题(金融行业),我和面试官扯了三个小时

今天去面试了一家金融公司&#xff0c;招聘比较着急&#xff0c;一面后直接二面等结果&#xff0c;这种公司一般对js要求比较高&#xff0c;笔试题基本都是js相关的题&#xff0c;针对公司的客户要求也会做一些jquery,vue.react相关的插件&#xff0c;H5及webAPP。下面直接说题…

上海大学计算机学院客座教授,刘云虹教授受聘上海大学外国语学院客座教授并做学术讲座...

11月29日14:00&#xff0c;南京大学外国语学院副院长、博士生导师刘云虹教授被我院聘为客座教授并做主题为《中国文学外译与翻译历史观》的学术讲座。学院副院长苗福光教授主持&#xff0c;副院长邓志勇教授(主持工作)为刘教授颁发了聘书。讲座从刘教授自己的学术研究领域和起点…

安徽阜阳计算机高中学校排名,安徽阜阳排名靠前的三大高中,有争议?2020年高考成绩说话!...

安徽省阜阳市&#xff0c;古称汝阴&#xff0c;阜阳历史悠久、文化璀璨、人才辈出&#xff0c;有阜阳剪纸等国家非物质文化遗产&#xff0c;也是管仲、鲍叔牙等历史名人的故乡&#xff1b;阜阳风景秀丽&#xff0c;辖区内有诸多知名景点&#xff0c;其中八里河风景区为国家AAAA…

数组练习2

结对开发&#xff1a;张哲 张晓菲 题目&#xff1a;返回一个数组中子数组最大和&#xff0c;数组可以首尾相连。 一、实验思路 本次实验在第一次的基础上增加了一些难度&#xff0c;数组可以首尾相连组成一个环&#xff0c;我们两个经过思考和讨论后得到一个方法&#xff1a; …

Java 8中最快的垃圾收集器是什么?

OpenJDK 8具有几种垃圾收集器算法&#xff0c;例如Parallel GC &#xff0c; CMS和G1 。 哪一个最快&#xff1f; 如果默认的GC从Java 8中的并行GC更改为Java 9中的G1&#xff08;当前建议&#xff09;&#xff0c;将会发生什么&#xff1f; 让我们对其进行基准测试。 基准方法…

【粉丝需求】如何把一个前端网页都搞下来?

一般比较简单的就是展示型网站,这类网站 最好仿制,如果带后台的不太好获取完整后台代码,但是搞一下前端代码还是可以的。一般前端不管用什么框架,基础元素由html+css+javaScript组成。 声明:本文仅仅提供一种思路,如有对站点侵权的地方,请联系博主删除。 我用的是HB-X,…

九、其他常用命令

一、挂载命令 可以理解为windows当中的分配盘符操作 1.查询与自动挂载 [rootlocalhost ~]# mount #查询系统中已经挂载的设备 [rootlocalhost ~]# mount –a #依据配置文件/etc/fstab的内容&#xff0c;自动挂载一遍 只要按照对应的格式将相应的分区添加到list中&#xff0c;那…

【ECharts系列|01入门】 从入门到天黑【入门级教程实战】

ECharts 是一个使用 JavaScript 实现的开源可视化库&#xff0c;涵盖各行业图表&#xff0c;满足各种需求。 ECharts 遵循 Apache-2.0 开源协议&#xff0c;免费商用。 ECharts 兼容当前绝大部分浏览器&#xff08;IE8/9/10/11&#xff0c;Chrome&#xff0c;Firefox&#xff0…

Java开发人员应了解的JVM流行语

本文将与您分享一些JVM“流行语”&#xff0c;它们对于Java开发人员在执行任何JVM性能和垃圾回收调优之前理解和记住非常重要。 本文末尾还提供了一些技巧&#xff0c;包括一些高级性能调优最佳实践。 将来的文章中将探讨有关Oracle HotSpot并发GC收集器&#xff08;例如CMS和G…

【ECharts系列|02可视化大屏】 舆情分析,人口分析及警情警力活动情况的实现【上篇】

简介&#xff1a;ECharts实现可视化大屏展示&#xff0c;包含人口分析&#xff0c;警情警力分析多张效果图&#xff0c; 完整的htmlcssjsimg:https://download.csdn.net/download/weixin_41937552/16361615 项目结构&#xff1a; activity.html <!doctype html> <met…

spring rmi_Spring远程支持和开发RMI服务

spring rmiSpring远程支持简化了启用远程服务的开发。 当前&#xff0c;Spring支持以下远程技术&#xff1a;远程方法调用&#xff08;RMI&#xff09;&#xff0c;HTTP调用程序&#xff0c;Hessian&#xff0c;Burlap&#xff0c;JAX-RPC&#xff0c;JAX-WS和JMS。 远程方法调…

用Paint Tool SAI绘制漫画

漫画绘图软件 Paint Tool SAI是一个来自日本的小巧的漫画辅助绘图软件&#xff0c;只有11M大小。 这个没有任何现成的模板和组件&#xff0c;只能自己一笔一笔的话&#xff0c;画笔、图层等功能与Photoshop类似&#xff0c;但没有PS其它大量功能&#xff0c;因此操作更加便捷&a…

【ECharts系列|02可视化大屏】 舆情分析,人口分析及警情警力活动情况的实现【下篇】

简介&#xff1a;ECharts实现可视化大屏展示&#xff0c;包含人口分析&#xff0c;警情警力分析多张效果图&#xff0c; 完整的htmlcssjsimg:https://download.csdn.net/download/weixin_41937552/16361615 上一篇&#xff1a;【ECharts系列|02可视化大屏】 舆情分析&#xff0…

在WildFly上将JPA和CDI Bean与骆驼一起使用

我并没有真正为此计划&#xff0c;但是在一个免费的会议月份中&#xff0c;我有机会进行了一些深入的探讨&#xff0c;并向您展示了WildFly-Camel子系统提供的WildFly魔术上的更多Camel。 商业背景 该演示来自Christina Lin在JBoss Demo-Central上的演示 。 她演示了Camel中Fi…

C#开发微信公众平台-就这么简单(附Demo)(转)

原文&#xff1a;http://www.cnblogs.com/xishuai/p/3625859.html 写在前面 阅读目录&#xff1a; 服务号和订阅号URL配置创建菜单查询、删除菜单接受消息发送消息&#xff08;图文、菜单事件响应&#xff09;示例Demo下载后记最近公司在做微信开发&#xff0c;其实就是接口开发…

【ECharts系列|03可视化大屏】大数据管理平台实时展示

基于echats实现可视化大数据管理平台实时展示。 完整htmlcssjsjsonfontvideo:https://download.csdn.net/download/weixin_41937552/16362433 项目结构&#xff1a; index.html <!DOCTYPE html> <html lang"en"> <head><link href"css/Bi…

【ECharts系列|04可视化大屏】ECharts可视化经典案例总结

收集整理一些ECharts实现可视化大屏效果的一些经典案例&#xff0c;方便在工作的时候及时的响应客户&#xff0c;及修改展示&#xff0c;根据业务需求在此基础修改即可。 第一篇为Echarts入门文档&#xff0c;如果没有Echarts基础&#xff0c;理解起来比较费劲&#xff0c;这个…