首页 > 其他分享 >前端面经每日一题day10

前端面经每日一题day10

时间:2024-12-15 16:59:08浏览次数:15  
标签:DOM 浏览器 渲染 面经 阻塞 js day10 一题 加载

登陆后,如何得知已登录?

前端把服务器返回的认证信息(cookie/token/sessionID)等存储在本地(localstoragesessionstoragecookie),表明已经登录,并设置超时时间。

前端性能优化的方法

浏览器渲染机制,减少使用重绘重排。

事件处理程序,使用事件委托。

网络请求优化,善用缓存,不重复加载相同资源,减少HTTP请求。

静态资源使用内容分发网络

CDN

内容分发网络是一种分布式网络,通过在网络各处部署节点服务器加快用户访问应用的速度。

特点:

  • 分布式部署,CDN会在指定范围内设置多个节点服务器,自动选择离用户最近的节点提供资源,减少网络延迟,提高访问速度。
  • 负载均衡,根据网络流量和服务器负载,智能将用户请求分配到合适的节点,避免单点过载,提高网络的可靠性和稳定性。
  • 缓存机制,CDN使用缓存机制存储和提供资源。当用户首次请求资源时,CDN会把资源缓存到离用户最近的节点服务器,当用户再次请求相同资源时,CDN直接从缓存中读取,不需要再次请求服务器,提高内容访问速度。
  • 成本优化,减少对源服务器带宽和存储要求,降低运营成本。

DNS

域名解析器,域名转化为对应的IP地址。

流程:用户在浏览器输入域名,浏览器先在本地DNS服务器的缓存中查找,查询根DNS服务器,查询顶级域DNS服务器,查询顶级域DNS服务器

浏览器输入url后发生了什么

  • DNS解析:域名解析成IP地址

  • TCP连接:三次握手

  • 发生HTTP请求

  • 服务器处理请求并返回响应

  • 浏览器接受响应并渲染页面

    • 解析HTML,生成DOM树。树状结构,包含网页的结构和内容。
    • 解析CSS,生成CSSOM树。样式信息。
    • DOM树和CSSOM树合并结合,生存渲染树。包含可见的DOM节点及样式信息。
    • 布局。根据渲染树,浏览器计算每个节点的几何属性,大小位置等。
    • 绘制。将布局好的节点绘制到屏幕上。浏览器可能将页面分成多个层(固定元素,动画元素),最后合并不同层。
    • 在构建CSSOMDOM的时候,JavaScript会介入。遇到script时候,DOM会暂停,直至脚本执行完成。JavaScript可以修改和DOMCSSOM。JavaScript执行会阻塞页面渲染,实际上我们使用asyncdefer属性,异步加载,避免阻塞页面渲染。

    性能优化:减少重绘重排(减少使用引起重绘的css属性),优化资源加载(懒加载和异步加载延迟非关键资源加载),使用浏览器缓存和CDN,减少DOM节点数量(长列表使用虚拟化技术)

  • 断开连接:四次挥手

css加载会造成阻塞吗?

  • CSS不会阻塞DOM解析,但会阻塞DOM渲染。

DOMCSSOM并行建构,所以CSS加载不会阻塞DOM解析。但是渲染树 (Render Tree)依赖于CSSOMDOM,需要等两者加载完毕完成响应构建,才开始渲染,所以CSS阻塞DOM渲染。

  • CSS不会阻塞js文件下载,但会阻塞js执行。

js文件和css文件下载是并行的,所以css不会阻塞js文件下载。css文件有时候很大,js需要等待,为什么js执行要等css,因为如果js是获取元素样式,那么就需要依赖css,样式表在js执行执行前加载完毕,所以css会阻塞js执行。

JavaScript可以操作修改cssdom,如果JavaScript修改元素的同时渲染页面,那么渲染前后元素数据可能不一致,所以浏览器设置GUI渲染线程和JavaScript互斥。

为什么js会阻塞页面加载?

过程:js加载或执行都会阻塞DOM树,只有js执行完,DOM树才会继续解析,没有DOM树,浏览器就无法渲染。当js很大时候,可以看的页面长时间空白。

原因:js会操作修改节点,会影响DOM树,如果先生成DOM树,js修改节点,浏览器需要重新解析生成DOM树,性能差,所以需要js执行完再执行DOM解析。

标签:DOM,浏览器,渲染,面经,阻塞,js,day10,一题,加载
From: https://blog.csdn.net/m0_73918807/article/details/144420349

相关文章

  • 前端面经每日一题Day12
    题目来源可以看这个博客  前端面经整理-CSDN博客做这个每日一题的初衷就是为了让自己能够每天有所收获,每天都能学习,而且还能激发我深入学习,但是我发现慢慢的我的初衷好像变了,变成了每天发博客就行,因为学习相对太难了,我最近需要重新看待我的行为,不能为了做什么而做,我的目的不......
  • 【每日一题】3266. K 次乘运算后的最终数组 I&II
    给你一个整数数组 nums ,一个整数 k  和一个整数 multiplier 。你需要对 nums 执行 k 次操作,每次操作中:找到 nums 中的 最小 值 x ,如果存在多个最小值,选择最 前面 的一个。将 x 替换为 x*multiplier 。k 次操作以后,你需要将 nums 中每一个......
  • 【CSS 面经】如何使用纯 CSS 实现一个三角形
    文章目录一、CSS三角形的基本原理1.利用边框生成三角形2.三角形的构造过程示例:向下的三角形二、改变三角形的方向向上的三角形向左的三角形向右的三角形三、CSS三角形的应用场景1.下拉菜单箭头2.对话框的指示3.布局装饰四、常见的面试考察点1.如何实现一个CS......
  • GDB调试面经
    1.linux下,如何debug查看内存泄露问题?在linux系统中可以使用top命令实时显示系统中进程的内存使用情况。free命令显示了系统中空闲和已使用的内存。使用valgrind是一个强大的内存调试和分析工具,它可以检测内存泄漏和其他内存相关的问题。'''valgrind--leak-check=yes--show-le......
  • 2025年Java面经(附答案)
    一、Java基础部分面试题1.Java面向对象的三个特征封装:对象只需要选择性的对外公开一些属性和行为。继承:子对象可以继承父对象的属性和行为,并且可以在其之上进行修改以适合更特殊的场景需求。多态:允许不同类的对象对同一消息做出响应。2.Java中基本的数据类型有哪些以......
  • 【每日一题】20241213
    【每日一题】伽利略曾设计如图\(1\)所示的一个实验,将摆球拉至\(M\)点放开,摆球会达到同一水平高度上的\(N\)点.如果在\(E\)或\(F\)处钉子,摆球将沿不同的圆弧达到同一高度的对应点;反过来,如果计摆球从这些点下落,它同样会达到原水平高度上的\(M\)点.这个实验可以说明,物体......
  • 【蓝桥杯每日一题】数的拆分——筛质数
    数的拆分2024-12-12数的拆分筛质数思维题目大意给定(T)个正整数aia_iai​,分别问......
  • 网络安全、Web安全、渗透测试之笔经面经总结(一)
    本篇文章总结涉及以下几个方面:对称加密非对称加密?什么是同源策略?cookie存在哪里?可以打开吗xss如何盗取cookie?tcp、udp的区别及tcp三次握手,syn攻击?证书要考哪些?DVWA是如何搭建的?渗透测试的流程是什么xss如何防御IIS服务器应该做哪些方面的保护措施:虚拟机的几种连接方......
  • 网络安全、Web安全、渗透测试之笔经面经总结(二)
    这篇文章涉及的知识点有如下几方面:1.SSLStrip(SSp)攻击到底是什么?2.中间人攻击——ARP欺骗的原理、实战及防御3会话劫持原理4.CC攻击5.添加时间戳防止重放攻击6.浅析HTTPS中间人攻击与证书校验7.什么是HttpOnly?8.如何设计相对安全的cookie自动登录系统9.SSH10.服务......
  • 【每日一题】20241211
    【每日一题】设\(0<a<1\),随机变量\(X\)的分布列如下表所示,则当\(a\)在\((0,1)\)内增大时,A.\(D(X)\)增大B.\(D(X)\)减小C.\(D(X)\)先增大后减小D.\(D(X)\)先减小后增大坡屋顶是我国传统建筑造型之一,其造型甚美,蕴含着丰富的数学元素.如图,某坡屋顶可视为一......