十道前端面试题（6）

最新推荐文章于 2021-08-21 18:48:13 发布
最新推荐文章于 2021-08-21 18:48:13 发布
阅读量909 收藏 63
点赞数 11
分类专栏： 前端大厂面试题总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43572937/article/details/102716036
版权
  1. 闭包的作用理解，以及那些地方用过闭包，以及闭包的缺点，如何实现闭包
  2. 从1-10，设置一个定时器，让它每秒钟打印一个？
  3. 从在浏览器输入URL到页面显示出来都发生了什么？
  4. 浏览器如何渲染页面的
  5. html5有什么新的tag，canvas…
  6. 如何理解html语义化
  7. border-box和content-box
  8. 正则如何将一个数千分化表示
  9. 如何处理CSS兼容问题
  10. BFC

1. 闭包的作用理解，以及那些地方用过闭包，以及闭包的缺点，如何实现闭包？(点击查看>>)

2. 从1-10，设置一个定时器，让它每秒钟打印一个？

(function(){
    let i = 0;
    function change(num){
        i++;
        console.log(i);
        let timer = setTimeout(() => {
            change(num);
        }, 1000);
        if(i === num){
            clearTimeout(timer);
            return false;
        }
    }
    return change;
})()(10);

3. 从在浏览器输入URL到页面显示出来都发生了什么？

  1. 输入网址

  2. DNS解析域名，查找IP地址。

  3. 应用层客户端发送HTTP请求。
    HTTP请求包括请求头和请求主体两个部分，其中请求头包括请求的方法，URL，遵循的http协议，返回信息是否需要缓存，以及cookie等

  4. 传输层TCP传输报文 “三次握手”
    位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输，将大块的数据分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。
    “三次握手”的过程是，发送端先发送一个带有SYN（synchronize）标志的数据包给接收端，在一定的延迟时间内等待接收的回复。接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中，如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求，而再次发送，直到收到回复为止。

  5. 网络层IP协议查询MAC地址
    IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

  6. 数据到达数据链路层
    在找到对方的MAC地址后，就将数据发送到数据链路层传输。这时，客户端发送请求的阶段结束

  7. 服务器接收数据
    接收端的服务器在链路层接收到数据包，再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。

  8. 服务器响应请求
    服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，其中比较常见的是200 OK表示请求成功。301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

  9. 服务器返回相应文件
    请求成功后，服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。

  10. 页面渲染
    现代浏览器渲染页面的过程是这样的：解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。
    DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像元素或display属性值为none的元素都不在渲染树中。
    在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

一般问到这样的题，说得越详细越好。。。

4. 浏览器如何渲染页面的

  1. 解析HTML构建DOM树
    怎样解析HTML？
  • 读取HTML的原始字节，根据文件指定编码解析各个字符
  • 将字符串转化为各种标签
  • 然后将标签转化为node节点
  • 构建DOM树
    在这里插入图片描述
  1. 解析CSS构建CSSOM树
    怎样解析CSS？
  • CSS字节转化为字符，接着转换为令牌和节点，最后生成CSSOM树
    在这里插入图片描述
  1. 将DOM与CSSOM合并成一个渲染树
    CSSOM树和DOM树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
    怎么构建渲染树？
  • 从DOM树的根节点开始遍历每个可见节点（display:none与visibility:hidden的区别）
  • 对于每个可见节点，为其找到适配的CSSOM规则并应用它
  • 生成渲染树

  1. 布局阶段：输出盒模型
    根据渲染树来布局，计算每个节点的布局信息

  2. 绘制：输出到屏幕上的像素

5. html5有什么新的tag，canvas…

点击查看html5新增标签 >>

6. 如何理解html语义化

  • 背景
    HTML语义化是近几年才提出来的，以前的DOM结构基本上就是一堆冷冷冰冰的没有语义化的标签。一打开就是一堆div+css。为了改变这种情况才提出了让HTML结构化的概念，并且HTML也给出了一些语义化的标签。比如：<header>,<nav>,<footer>等
  • 那到底什么是语义化呢？
    语义化就是让我们写的HTML结构，是用相对应且有一定语义的英文字母（标签）表示的，标记的语言。
    在没有CSS样式的情况下，依然能够呈现内容的结构，以及代码的结构。
  • 为什么要语义化呢？（好处）
  1. 提升用户体验，在没有CSS的情况下页面也能呈现出很好的结构
  2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多有效信息。（爬虫依赖于标签来确定上下文和各个关键字的权重）
  3. 有利于团队开发和维护，增强可读性。

7. border-box和content-box

border-box和content-box都是表示盒模型的尺寸：border-sizing

  1. border-sizing: border-box(默认);: border和padding计算入width之内
  2. border-sizing: border-content;: border和padding不计算入width之内

点击查看盒模型>>

8. 正则如何将一个数千分化表示

function formatNum(num) {  
	 const pattern = /(?=((?!\b)\d{3})+$)/g;
	 return String(num).replace(pattern, ',');
}

formatNum(100000);     //   100,000

9. 如何处理CSS兼容问题

先了解一个概念：hack
我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack。

CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法；

常见的CSS兼容问题：

  1. 不同浏览器对标签的默认支持不同，所以的初始化样式。（点击查看初始化样式>>）
  2. IE6的双边距bug。块级元素添加float属性之后，如果在float方向上有margin值，那么margin值会加倍。主要是会挤压其他元素。
    解决办法：
  • 给浮动的元素添加display：inline
  • 采用CSS属性前缀法，如：_margin-left:5px;

  1. 上下margin重合。两个相邻元素的margin左右不会重合，但是上下margin会重合。尽量要同时采用bottom和margin

  2. 超链接访问过后样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A
    a:link{} a:visited{} a:hover{} a:active{}

  3. chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：
    -webkit-text-size-adjust: none;

  4. CSS控制透明度问题：
    一般 opacity: 0.6;
    IE: filter: Alpha(opacity=60)；
    但在IE6下有问题，所以又得写成filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

  5. 鼠标的手势：FireFox的cursor属性不支持hand``，但是支持pointer，IE两个都支持；所以为了兼容都用pointer```；

  6. IE6下div高度无法小于10px: 比如定义一条高2px的线条，FF和IE7都正常；但IE6就是10px；
    解决办法：

  • 添加overflow属性或设置font-size大小为高度大小 ；
 div{ height: 2px; overflow: hidden; background: #333; width: 100px; }
div{ height: 2px; font-size: 2px; background: #333; width: 100px; }
  1. CSS3 风格的前缀
    如果你正在使用最新的 CSS 代码，比如 box-sizing，或者background-clip等，确保你使用了合适的供应商前缀。
-moz- /* Firefox 和其他使用 Mozilla 浏览器引擎的浏览器 */
-webkit- /* Safari，Chrome 和其他使用了 Webkit 引擎的浏览器 */
-o- /* Opera */
-ms- /* IE 浏览器（但不总是 IE） */

10. BFC

BFC即 Box Format Context的缩写
直译为“块级格式上下文”，是一个独立的渲染区域，也就是盒子内部的元素无论如何布局都不会影响到外部的元素。

BFC的布局规则：

  1. 内部元素在垂直方向一个一个放置
  2. Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻元素的margin会发生重叠。
  3. 内部元素的margin不会传递给BFC
  4. 浮动元素会被BFC计算高度
  5. 非浮动元素不会覆盖浮动元素位置

哪些元素可以生成BFC：

  1. 根元素
  2. float属性不为none的元素
  3. position属性为absolute或fixed的元素
  4. display为inline-block, table-cell, table-caption, flex, inline-flex的元素
  5. overflow不为visibility的元素
小馋猫s
关注
专栏目录
2024高频前端面试题（含答案）
weixin_44672169的博客
04-22 21万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
前端面试题：前端框架面试题大全
06-21
前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； 前端面试题：前端框架面试题大全； ...
十道前端面试题（3）
shijie
10-22 7522
1. 手写一下深拷贝 2. == 和 === 的区别 3. 写一个方法提取一下search里面的参数 4. 写一下不知道宽高元素垂直水平居中方法 5. 301和302的区别 6. git命令 7. JS基本数据类型 8. css选择器的优先级 9. 行内元素，块级元素区别 10. css伪元素有哪些 8. 实现一个两列等高布局，思路 9. 行元素，块级元素区别 10. css伪元素有哪些
十道前端面试题（4）
shijie
10-23 2027
1. 重排重绘 2. proto 和prototype分别是什么 3. 原型链原理 4. 在原型链上Object再往上是什么 5. new和Object.create的区别 6. 哪种情况下__proto__和prototype的指向是同一个？ 7. typeof array null undefined NaN分别是什么 8. 把undefined和null转成Number分别是什么 9. 如何判断是否为数组？（instanceOf和constructor可以，但是有原型链 断裂的风险，Object.
十道前端面试题（9）
shijie
10-29 647
1. 前端性能理解，优化有哪些 2. 为什么浏览器会产生同源策略 3. 如何获取元素的父节点和兄弟节点 4. jsonp的原理是什么，处理script标签还可以通过什么实现？（静态资源标签） 5. HTTP请求头，响应头里面有哪些 6. margin坍塌 7. 写一个API实现insertAfter 8. 浏览器是如何实现通过你的代码去找到指定的元素的 9. preventDefault和stopPropagation的区别 10. 事件冒泡，事件捕获相关，以及事件委托？
前端多图片上传怎么控制顺序_Web前端经典面试题有哪些 如何能走向高薪之路...
weixin_39620943的博客
11-30 431
　　Web前端经典面试题有哪些？如何能走向高薪之路？Web前端在近几年是越来越火热了，很多人看到了前端的高薪资，更看到了前端行业的发展前景，所以纷纷投入到学习前端技术学习中来。下面给大家总结整理一些Web前端经典面试题，助力大家找到更好的工作，走向高薪前端之路。　　1、CSS，JS代码压缩，以及代码CDN托管，图片整合。　　(1)CSS,JS 代码压缩：　　可以应用gulp的gulp-uglify...
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)
weixin_33915554的博客
09-21 553
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 expr...
100道前端面试题.pdf
07-08
### 前端面试题知识点 #### 1. 面试题目的类型及内容 - **自我介绍**：不仅仅要提供基本信息，还需突出个人特点和优势。 - **开放性题目**：考察应聘者的应变能力、思维深度和广度。 - **项目介绍**：阐述具体参与...
96道web前端面试题96道web前端面试题.pdf
08-05
在准备web前端面试时，面试官可能会考察求职者对基础知识的掌握情况以及解决实际问题的能力。以下是根据给定文件内容整理出的知识点： 1. 自我介绍是面试的开场环节，除了基本个人信息外，面试者应该突出自己的技术...
前端面试题汇总前端面试题汇总前端面试题汇总
最新发布
09-10
前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端面试题汇总前端...
用正则表达式实现千分位分隔符
Venchi的博客
02-18 5881
正则实现数字以每3位加逗号的表示，如12345678 输出为12,345,678。输入为整数时的代码为：num.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,')将数字num转化为字符串后，全局（/g）正向匹配，看是否符合断言(\d)(?=(\d{3})+$)部分，直到匹配结束。即遇到 数字 + 该数字后面紧跟连续的三位数字（并且不管这连续的三位数字出...
千分位正则
weixin_30765577的博客
10-26 321
'9999999999999.12'.replace(/\d{1,3}(?=(\d{3})+(?:\.\d{1,2})?$)/g, '$1,') 转载于:https://www.cnblogs.com/little-ab/p/9856159.html
使用正则表达式将数值转化为千分位格式
qq_44900902的博客
08-21 1789
实现思路 拿到这个问题的时候先从最简单的入手，假如我们拿到的是一个四位数的整数，那么问题就变得好简单了。 后面的看代码自己悟。。。 技术核心 正则对象的**test()**方法 字符串的**replace()**方法 代码实现 function thousands(num) { // 转成 Number 类型 num = +num // 判断是否是一个合法数 if (isNaN(num)) { return '请传入一个合法数' } num = '' + num l
千分位 区分 正则
Fuohua的博客
05-08 844
function numFormat(num) { var res = num.toString().replace(/\d+/, function (n) { // 先提取整数部分 return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { ...
正则表达式 千分位
厚积薄发
11-22 2766
无小数位 有小数位 最近写了另外一个更简洁的 var str='123456789.2356' // 123,456,789.235,6 var reg=/\B(?<!(\.\d+))(?=(\d{3})+\b)/g // 匹配一个位置：该位置后有3的倍数个数字，该位置的前面不能出现小数点 var res=str.replace(reg,',') console.log(res)/...
[JavaScript]用正则的方式实现千位分隔符
DaftJayee的博客
09-10 783
reg=/\d{1,3}(?=(\d{3})+$)/g // 表示前面有1~3个数字，后面的至少由一组3个数字结尾 let num =12345678 let result = (num+'').replace(reg, '$&,'); console.log(result)
把一串数字表示成千位分隔形式——JS正则表达式的应用
weixin_34320159的博客
03-28 546
一个案例 如何把一串整数转换成千位分隔形式，例如10000000000，转换成10,000,000,000。 在了解正则表达式之前，想要实现这个功能，无论代码量还是烧脑程度，都很令人抓狂，但若是运用正则表达式来解决的话，两三行代码即可搞定！匹配、替换那些符合某种规则的字符串，恰恰是正则表达式的强项。 正则表达式 #####概念 正则表达式，又称规则表达式。（英语：Regular Expressio...
正则表达式 - 千分位分隔符
Tansum
11-21 8562
若对下文中 ?= 和 ?: 不是很了解的同学可以先看看：正则表达式 ?= ?! 和 ?: 下面来看看给数字添加千分位的正则表达式方法： let num = "12345678"; console.log(num.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,'))//"12,345,678" 让我们来解析一下上面的代码。 正则表达式 /(\d)(?=(?:\d{3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值