2023最新前端面试题1（持续更新）

1、页面从输入 URL到页面加载显示完成，这个过程中都发生了什么?

1.输入域名地址
2.发送至 DNS 服务器并获得域名对应的 WEB 服务器IP 地址
3.与 WEB 服务器建立TCP 连接;
4.服务器的永久重定向响应 (从 http://example.com到http://www.example.com)
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个 HTTP 响应
8.浏览器显示 HTML
9.浏览器发送请求获取的资源 (如图片、音频、视频、CSS、JS 等等)
10.浏览器发送异步请求

2、浏览器工作原理

1、用户界面；2.网络 ；3.U1 后端；4.数据存储；5.浏览器引擎 ；6.渲染引擎；7.js 解释器

3、浏览器解析过程:

流程: 解析 html 以构建 dom 树 -> 建 render 树->布局 render 树->绘制 render 树

4、介绍一下你对浏览器内核的理解?

主要分成两部分: 渲染引擎ayout engineer 或 Rendering Engine)和JS引擎
渲染引擎: 负责取得网页的内容 (HTML、XML、图像等等)、整理讯 (例如加入CSS 等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS 引擎则: 解析和执行 javascript 来实现网页的动态效果。最开始染引擎和JS引擎并没有区分的很明确，后来JS 引擎越来越独立，内核就倾向于只指渲染引擎

5、常见的浏览器内核有哪些?

Trident 内核: IE,360，傲游，搜狗，世界之窗，腾讯等。[又称 MSHTML]
Gecko 内核: Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey等
Presto 内核: Opera7 及以上。 [Opera 内核原为: Presto，现为: Blink;]
Webkit 内核: Safari,Chrome等。 [ Chrome的: Blink (WebKit 的分支) ]

6、请描述一下 cookies，sessionStorage 和 localStorage的区别?

cookie 是网站为了标示用户身份而储存在用户本地终端 (Client Side) 上的数据(通常经过加密)，数据会在浏览器和服务器间来回传递。 sessionStorage和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小:
cookie 数据大小不能超过 4k
sessionStorage和localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

有期时间:
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

7、请大概描述下页面访问 cookie 的限制条件

跨域问题，设置了 HttpOnly

8、如何实现浏览器内多个标签页之间的通信?(阿里)

调用localstorge、cookies 等本地存储方式

9、页面可见性 (Page Visibility API) 可以有哪些用途?

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

10、网页验证码是做什么的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票论坛灌水; 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

11、为什么利用多个域名来存储网站资源?

CDN 缓存更方便 ，突破浏览器并发限制 节约 cookie 带宽 ，节约主域名的连接数，优化页面响应速度 防止不必要的安全问题

12、谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，最终提高网站易用性。

13.知道什么是微格式吗?

微格式 (Microformats) 是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准，是为特殊应用而制定的特殊格式

优点: 将智能数据添加到网页，让网站内容在搜索引擎结果界面可以显示额外的提示。

14、一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

(1)图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
(2)如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前张和后一张优先下载。
(3)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
(4)如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

15、谈谈以前端角度出发做好 SEO(搜索引擎) 需要考虑什么?

合理的标签使用，主要的互联网目录，链接交换和链接广泛度。

16、请写出一些前端性能优化的方式，越多越好

1.减少 dom 操作
2.部署前，图片压缩，代码压缩
3.优化js 代码结构，减少元余代码
4.减少 http 请求，合理设置 HTTP 缓存
5.使用内容分发 cdn 加速
6.静态资源缓存
7.图片延迟加载

17、描述一下渐进增强和优雅降级之间的不同?

区别: 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级(功能衰减)意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

18、webSocket 如何兼容低浏览器? (阿里)

Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR

19、web 开发中会话跟踪的方法有哪些

1.cookie
2.session
3.url 重写
4.隐藏 input
5.ip 地址

20、HTTP method

1.一台服务器要与 HTTP1.1 兼容，只要为资源实现 GET 和 HEAD 方法即可。
2.GET 是最常用的方法，通常用于请求服务器发送某个资源。
3.HEAD 与 GET 类似，但服务器在响应中值返回首部,不返回实体的主体部分。
4.PUT 让服务器用请求的主体部分来创建一个由所请求的 URL 命名的新文档或者，如果那个 URL 已经存在的话，就用干这个主体替代它。
5.POST 起初是用来向服务器输入数据的。实际上，通常会用它来支持 HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
6.TRACE 会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE 响应并在响应主体中携带它收到的原始请求报文。TRACE 方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。
7.OPTIONS 方法请求 web 服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
8.DELETE 请求服务器删除请求 URL 指定的资源。