沈阳手机网站开发,浙江省建设安监站网站,打开有些网站显示建设中,建站平台一键申请三方支付通道面试前端八股文十问十答第二期 作者#xff1a;程序员小白条#xff0c;个人博客 相信看了本文后#xff0c;对你的面试是有一定帮助的#xff01;关注专栏后就能收到持续更新#xff01;
⭐点赞⭐收藏⭐不迷路#xff01;⭐
1#xff09;从输入URL到页面加载的全过程…面试前端八股文十问十答第二期 作者程序员小白条个人博客 相信看了本文后对你的面试是有一定帮助的关注专栏后就能收到持续更新
⭐点赞⭐收藏⭐不迷路⭐
1从输入URL到页面加载的全过程
浏览器根据输入的URL进行DNS解析获取对应的服务器IP地址浏览器向服务器发起HTTP请求请求页面的HTML文档服务器响应请求返回HTML文档给浏览器浏览器解析HTML文档构建DOM树浏览器解析CSS样式文件构建CSSOM树将DOM树和CSSOM树合并生成渲染树Render Tree根据渲染树计算每个节点的样式和位置进行布局Reflow/Reflow浏览器将页面内容绘制到屏幕上。
2浏览器重绘与重排的区别
重排Reflow是指当页面布局发生变化需要重新计算元素的位置和大小从而影响整个页面的布局。这会触发浏览器重新布局、重新计算元素位置和大小消耗较大的性能。重绘Repaint是指当元素的样式发生变化但不影响布局的情况下浏览器只需重新绘制受影响的部分而不需要重新计算元素的位置和大小。这比重排消耗的性能要小。
3如何触发重排和重绘
修改DOM结构添加、删除、移动DOM元素都会触发重排和重绘修改DOM元素的样式修改元素的样式属性如颜色、大小、位置等会触发重排和重绘获取某些属性获取一些会引起元素大小、位置变化的属性如offsetTop、offsetLeft、clientWidth等会触发重排改变窗口大小当浏览器窗口大小改变时会触发页面的重排和重绘。
4如何避免重绘或者重排
使用CSS的transform和opacity属性来进行动画而不是直接修改元素的位置和大小避免在循环中频繁操作样式可以先将需要操作的元素进行隐藏完成所有操作后再显示使用文档片段DocumentFragment来批量操作DOM减少重排和重绘的次数将需要频繁操作的元素设置为position: absolute或position: fixed脱离文档流减少影响的元素避免频繁获取会引起重排的属性如offsetTop、offsetLeft等可以将这些属性缓存起来。
5介绍下304过程
HTTP状态码304表示“未修改”当浏览器发送请求时如果资源在服务器上没有发生变化服务器会返回状态码304告诉浏览器可以直接使用本地缓存的资源无需重新下载。这样可以减少网络传输提高页面加载速度。
6浏览器的缓存机制 强制缓存 协商缓存
强制缓存浏览器在请求资源时会先检查缓存是否过期如果未过期则直接使用本地缓存不发送请求到服务器。常见的设置强制缓存的响应头字段有Cache-Control和Expires。协商缓存当强制缓存失效时浏览器会发送请求到服务器服务器会根据资源的缓存标识如ETag或Last-Modified来判断资源是否有更新。如果资源未发生变化服务器返回304状态码告诉浏览器可以直接使用缓存。常见的设置协商缓存的响应头字段有ETag和Last-Modified。
7说下进程、线程和协程
进程Process是计算机中运行中的程序的实例每个进程都有独立的内存空间和系统资源进程之间相互独立互不干扰。线程Thread是进程中的执行单元一个进程可以包含多个线程线程共享进程的内存空间和系统资源线程之间可以共享数据和通信。协程Coroutine是一种用户态的轻量级线程协程可以在同一个线程中实现多个不同的任务之间的切换避免了线程切换的开销提高了程序的执行效率。
8HTML5 新特性、语义化
新的语义化标签如header、footer、nav、section等增强的表单元素如input typedate、input typeemail等多媒体元素如video、audioCanvas绘图功能Web存储LocalStorage和SessionStorage新的API如Geolocation、Web Workers、WebSockets等。
HTML5强调语义化即通过标签的选择和使用使页面的结构更加清晰、可读性更强有利于搜索引擎的理解和优化。
9CSS 选择器及优先级
内联样式Inline Styles通过style属性直接定义在HTML元素上具有最高优先级ID选择器ID Selectors通过#符号定义具有比类选择器更高的优先级类选择器Class Selectors通过.符号定义可以同时应用于多个元素元素选择器Element Selectors通过标签名称定义作用于相应的元素通配符选择器Universal Selector使用*定义作用于所有元素继承Inheritance从父元素继承样式。
选择器的优先级遵循内联样式 ID选择器 类选择器 元素选择器 通配符选择器。
10position 属性的值有哪些及其区别
static默认值元素遵循正常的文档流不受top、bottom、left、right等属性的影响。relative相对定位元素相对于其正常位置进行定位但仍占据原本的空间。absolute绝对定位元素相对于最近的已定位祖先元素进行定位如果没有已定位的祖先元素则相对于初始包含块进行定位。fixed固定定位元素相对于浏览器窗口进行定位不随页面滚动而移动。sticky粘性定位元素在跨越特定阈值前为相对定位之后为固定定位。
这些position属性可以通过配合top、bottom、left、right等属性来调整元素的位置。
开源项目地址https://gitee.com/falle22222n-leaves/vue_-book-manage-system
前后端总计已经 900 Star1.5W 访问
⭐点赞⭐收藏⭐不迷路⭐
