大连模板网站制作多少钱,南京建网科技有限公司,网站套餐到期是什么意思,网站制作推广SSL浏览器面试题 1.常见的浏览器内核有哪些#xff1f;2.浏览器的主要组成部分有哪些#xff1f;3.说一说从输入URL到页面呈现发生了什么#xff1f;4.浏览器重绘域重排的区别#xff1f;5.CSS加载会阻塞DOM吗#xff1f;6.JS会阻塞页面吗#xff1f;7.说一说浏览器的缓存机… 浏览器面试题 1.常见的浏览器内核有哪些2.浏览器的主要组成部分有哪些3.说一说从输入URL到页面呈现发生了什么4.浏览器重绘域重排的区别5.CSS加载会阻塞DOM吗6.JS会阻塞页面吗7.说一说浏览器的缓存机制8.Cookie相关与HttpOnly9.说说跨站请求伪造CSRF攻击10.浏览器的存储11.HTTP与HTTPS、第三方证书工作原理、以及HTTP各个版本12.怎么传递引用类型而互不影响 深拷贝13.静态多态14.怎么用js实现类的修饰符 private public15.前端如何性能优化 1.常见的浏览器内核有哪些
浏览器的内核分成两部分 渲染引擎和JS引擎⚠️注意我们常说的浏览器内核就是指JS引擎
FireFox 和 Chrome 使用不同的渲染引擎和 JavaScript 引擎 FireFox: 渲染引擎: GeckoJavaScript 引擎: SpiderMonkey Chrome (以及大多数基于Chromium的浏览器如新的Microsoft Edge) 渲染引擎: Blink (注意Blink是从WebKit分叉出来的WebKit是早期Chrome和现在的Safari使用的渲染引擎)JavaScript 引擎: V8
2.浏览器的主要组成部分有哪些
浏览器是一个复杂的应用程序其主要组件如下 用户界面 (User Interface): 这部分包括地址栏、书签栏、前进/后退按钮、刷新按钮等。简而言之除了您在浏览页面时看到的内容外用户界面包括了其他所有部分。 浏览器引擎 (Browser Engine): 该模块在用户界面和渲染引擎之间起到中介的作用传递命令。 渲染引擎 (Rendering Engine): 负责显示请求的内容。如果请求的是HTML内容渲染引擎就负责解析HTML和CSS并将解析后的内容显示在屏幕上。 网络 (Networking): 用于网络调用例如HTTP请求。它负责发送查询和下载网页、图片、其他资源。 JavaScript解释器 (JavaScript Engine): 解析和执行JavaScript来实现网页的动态功能。 数据存储 (Data Storage): 这是持久层。浏览器需要在本地存储各种数据如cookies。HTML5引入了web storage允许网页本地存储数据。 交互流程 当您在地址栏中输入URL并按下Enter时用户界面指示浏览器引擎加载请求的网页。 浏览器引擎告知网络模块获取该URL的内容。 一旦网络模块完成下载网页的主要内容通常是HTML文件它将数据传递给渲染引擎。 渲染引擎开始解析HTML并在解析过程中遇到其他资源如CSS文件、JavaScript文件或图片时请求网络模块加载它们。 如果渲染引擎在解析HTML时遇到JavaScript并且JavaScript没有被延迟或异步加载deffer\async异步加载js则渲染引擎暂停HTML解析并将控制权交给JavaScript引擎。一旦JavaScript引擎完成执行控制权返回渲染引擎。 渲染引擎根据HTML和CSS创建渲染树并在屏幕上显示内容。 JavaScript可以用来修改渲染后的页面它通过DOM文档对象模型与页面内容交互。 用户与页面交互例如点击按钮可能会触发JavaScript代码的执行这可能会导致页面内容的更改进而可能会导致重新渲染部分或全部页面。 浏览器的数据存储模块在整个过程中也会起到作用例如当页面设置或查询cookie时。
⚠️注意与大多数浏览器不同的是谷歌Chrome浏览器的每个标签页都分别对应一个渲染引擎实例。每个标签页都是一个独立的进程进程和线程
3.说一说从输入URL到页面呈现发生了什么 这个题可以说是面试最常见也是一道可以无限难的题了一般面试官出这道题就是为了考察你的前端知识深度。 URL解析浏览器首先会解析输入的URL提取出协议**如HTTP、HTTPS**、域名如www.example.com和路径等信息。 DNS解析浏览器会向本地DNS解析器发送一个DNS查询请求以获取输入域名对应的IP地址。如果本地DNS缓存中存在域名的解析结果则直接返回IP地址否则本地DNS解析器会向根DNS服务器、顶级域名服务器和授权域名服务器等级联查询最终获取到域名的IP地址。 建立TCP连接浏览器使用获取到的IP地址通过TCP/IP协议与服务器建立网络连接。这个过程通常经历三次握手确保客户端和服务器之间的可靠连接。 发起HTTP请求一旦建立了TCP连接浏览器就会发送一个HTTP请求到服务器。请求中包含了请求行请求方法如GET或POST以及请求的资源路径、请求头如Accept、User-Agent等和请求体对于POST请求等信息。 服务器处理请求服务器接收到浏览器发送的HTTP请求后会根据请求的路径和参数等信息处理请求并生成相应的响应。 接收响应浏览器接收到服务器发送的HTTP响应后会解析响应头和响应体。响应头包含了状态码如200表示成功404表示资源未找到和其他元信息响应体包含了服务器返回的实际内容如HTML、CSS、JavaScript、图片等。 渲染页面浏览器开始解析响应体中的HTML文档并构建DOM文档对象模型树。同时它还会解析CSS文件和JavaScript代码并进行样式计算、布局和渲染。最终将解析后的内容显示在用户界面上呈现出完整的页面。 关闭TCP连接四次挥手一旦页面呈现完成浏览器会关闭与服务器之间的TCP连接。如果页面中存在其他资源如图片、脚本、样式表则会继续发送相应的HTTP请求来获取这些资源并重复执行步骤5到步骤7直至所有资源加载完成。
4.浏览器重绘域重排的区别
重排 布局改变重排成本高重绘 样式改变布局没变 重绘不一定导致重排但重排一定绘导致重绘 如何触发重绘和重排 任何改变 用来构建渲染树的信息 都会导致一次重排或重绘
添加、删除、更新DOM节点通过display: none隐藏一个DOM节点-触发重排和重绘通过visibility: hidden隐藏一个DOM节点-只触发重绘因为没有几何变化
如何避免重绘或重排
集中改变样式比如使用class的方式来集中改变样式使用document.createDocumentFragment()我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点然后在此节点上批量操作最后插入DOM树中因此只触发一次重排提升为合成层 使用 CSS 的 will-change 属性将元素提升为合成层。有以下优点交由 GPU 合成比 CPU 处理要快使用 CSS3 的 transform 和 opacity 属性来进行动画效果它们可以利用 GPU 加速减少重排的发生。
5.CSS加载会阻塞DOM吗
先上结论 CSS不会阻塞DOM的解析但会阻塞DOM的渲染CSS会阻塞JS执行但不会阻塞JS文件的下载 为什么CSS不会阻塞DOM的解析但会阻塞DOM的渲染DOM和CSSOM通常是并行构建的所以CSS加载不会阻塞DOM的解析前一个DOM的解析指的是HTML的解析构建DOM树后一个DOM的渲染指的是DOM与CSSOM结合的渲染树的渲染
CSS解析之前由HTML解析出来的DOM已经开始构建并行的但是如果dom解析到一半遇到js改变css样式则需要等待css被加载完毕这也是为什么css会阻塞JS的执行 DOM 构建: 当浏览器开始接收到HTML内容时它会开始构建DOMDocument Object Model。DOM是一个树形结构表示页面的内容结构。DOM的构建是逐步的也就是说当浏览器接收到HTML内容的一部分时它就开始构建DOM的这一部分。 CSSOM 构建: 同时当浏览器遇到外部CSS文件通过link标签或内部样式通过style标签时它开始构建另一个树结构称为CSSOMCSS Object Model。CSSOM表示样式规则及其如何应用到DOM上。 渲染树 构建: 一旦浏览器有了DOM和CSSOM它会结合这两者来创建渲染树。渲染树只包含在页面上可见的元素以及这些元素的样式。 布局: 当渲染树被创建并完成之后浏览器开始了布局过程也被称为reflow。这是计算每个可见元素的大小和位置的过程。 绘制: 经过布局之后浏览器会开始绘制页面将每个元素渲染到屏幕上。
但是一个重要的点要注意当浏览器在构建DOM时遇到script标签并且该脚本不是async或defer的浏览器会暂停DOM的构建直到脚本执行完毕。如果此时的JavaScript试图访问某些尚未解析的CSS属性那么浏览器可能需要先完成CSSOM的构建。这就是为什么阻塞的非异步的JavaScript和大量的CSS可能会导致页面加载延迟的原因之一。
6.JS会阻塞页面吗
先上结论 JS会阻塞DOM的解析也会与渲染线程互斥因此也就会阻塞页面的加载 这也是为什么要把JS文件放在最下面的原因
由于 JavaScript 是可操纵 DOM 的,如果在修改这些元素属性同时渲染界面即 JavaScript 线程和 UI 线程同时运行,那么渲染线程前后获得的元素数据就可能不一致了。
因此为了防止渲染出现不可预期的结果,浏览器设置 「GUI 渲染线程与 JavaScript 引擎为互斥」的关系。
当浏览器在执行 JavaScript 程序的时候,GUI 渲染线程会被保存在一个队列中,直到 JS 程序执行完成,才会接着执行。
因此如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
7.说一说浏览器的缓存机制
认识浏览器缓存 当浏览器请求一个网站时会加载各种资源对于一些不经常变动的资源浏览器会将他们保存在本地内存中下次访问时直接加载这些资源提高访问速度。
浏览器缓存分类
强缓存不会发请求给服务器直接从本地缓存读取返回状态码是200from cache。协商缓存会发请求给服务器比对资源是否有变化如果没有变化返回状态码是304not modified然后从本地缓存读取。
什么样的资源使用强缓存什么样的资源使用协商缓存 使用强缓存的资源不经常变化的资源例如 CSS、JavaScript 文件图片、视频等 使用协商缓存的资源经常变化的资源例如来自数据库的内容、新闻、博客帖子等它们可能经常变化
如何实现强缓存 设置Expires与Cache-ControlExpires逐渐被Cache-Control取代。
Cache-Control控制缓存字段后端配置常见的取值包括
public表示资源可以被任何缓存包括浏览器和CDN缓存。private表示资源只能被单个用户的私有缓存缓存不能被共享缓存如CDN缓存。no-cache强制使用协商缓存即每次请求都要与服务器确认资源是否有更新。no-store:不使用缓存每次重发请求包括请求响应体。max-ageseconds用来设置强缓存表示资源的有效期即从请求时间开始缓存会在指定的秒数内有效。s-maxageseconds类似于 max-age但仅适用于共享缓存如CDN。
Expires这是一个过时的字段被 Cache-Control 所取代。它指定了一个绝对的过期日期由于客户端与服务器端的时间不同可能存在不准确的问题。
如何实现协商缓存
Cache-Control中的no-cacheLast-Modified / If-Modified-SinceETag哈希值 / If-None-Match
后面两种方法通常与Cache-Control指令一起使用。
与缓存相关的配置方法
请求头(Request Headers)
If-None-Match: 等于上次服务器响应体中的ETag值询问服务器资源是否被修改。If-Modified-Since: 询问资源是否过期。
响应头(Response Headers) Cache-Control: 指明了资源如何被缓存的指令例如max-age, no-cache, private, public等。 Expires: 设置资源过期的绝对时间。 ETag: 服务器为资源生成的一个标识符。 Last-Modified: 表示资源最后一次被修改的时间。 Vary: 告诉缓存机制哪些请求头部信息应该被考虑进去。
缓存完整流程图 8.Cookie相关与HttpOnly
什么是HttpOnly为什么我们需要它
HttpOnly 是一个用于设置 HTTP Cookie 的属性它的作用是限制客户端通常是浏览器对 Cookie 的访问只允许通过 HTTP 或 HTTPS 协议进行访问而禁止通过脚本如 JavaScript进行访问。
使用 HttpOnly 属性可以提高 Web 应用程序的安全性防止跨站脚本攻击XSS浏览器将禁止 JavaScript 访问带有该属性的 Cookie
除了HttpOnly哪些其他标志或属性可以提高Cookie的安全性 Secure 属性只允许通过 HTTPS 连接传输 Cookie。 SameSite 属性SameSite 属性用于定义 Cookie 发送的规则以防止跨站点请求伪造CSRF攻击。可以将 SameSite 属性设置为以下值之一Strict、Lax 或 None。Strict 模式完全禁止跨站点发送 CookieLax 模式在导航到目标站点之前仅允许在安全上下文(指顶导)中发送 Cookie而 None 模式允许在任何情况下发送 Cookie需要同时设置 Secure 属性。使用适当的 SameSite 设置可以限制 Cookie 的发送范围减少 CSRF 攻击的风险。 Domain 属性通过设置 Domain 属性可以限制 Cookie 的作用域。将 Domain 属性设置为与当前网站的主域名匹配可以防止恶意网站访问到另一个网站的 Cookie。这可以提高 Cookie 的隔离性和安全性。 Path 属性Path 属性用于限制 Cookie 的可见性。将 Path 属性设置为特定的路径可以确保 Cookie 只在与该路径匹配的 URL 下发送。这样可以防止其他路径下的恶意脚本访问和窃取 Cookie。 定期更新和轮换 Cookie定期更改敏感 Cookie 的值增加攻击者窃取 Cookie 的难度。同时使用有限的有效期限制 Cookie 的生命周期。 CSP内容安全策略通过 CSP可以定义网页可以加载的资源源限制恶意脚本的执行和 Cookie 的访问。
res.cookie(cookieName, cookieValue, { httpOnly: true,secure: true,sameSite: Strict,domain: example.com,path: /
});SameSite场景 那我如果设置SameSite中的Strict那是不是完全禁止跨站点发送 Cookie。也就是在evil.com里面点。也不会携带cookie了
您完全正确。SameSite 属性是一个相对较新的 Cookie 属性用于增强浏览器中的跨站点请求的安全性。该属性有三个可能的值Strict、Lax 和 None。 当设置为 SameSiteStrict 时该 Cookie 仅在请求来自同一站点时发送。这意味着即使用户已经在 bank.com 上登录如果他们访问了 evil.com 并从那里尝试通过 img 标签或任何其他方式触发一个跨站点请求浏览器将不会附带与 bank.com 相关的任何 SameSiteStrict 的 Cookie。 SameSiteLax 是一个稍微宽松一点的版本它允许一些安全的跨站点请求例如GET请求携带 Cookie但不允许跨站点的 POST 请求携带 Cookie。这可以避免许多 CSRF 攻击同时仍然允许某些跨站点的使用场景。 SameSiteNone 意味着 Cookie 可以在任何跨站点请求中发送但这需要与 Secure 标志一起使用这意味着 Cookie 只能通过 HTTPS 发送。
为了增强安全性许多现代浏览器已经开始更改其对 SameSite 的默认行为将其默认设置为 Lax。这就是为什么在某些场景中如果没有明确设置 SameSite 属性您可能会看到一些关于 Cookie 行为的变化。
综上所述设置 SameSiteStrict 确实可以大大减少 CSRF 攻击的风险因为它会完全阻止跨站点发送 Cookie。
如何理解Samesite Lax?
假设用户已登录bank.com并获取了一个带有SameSiteLax属性的cookie。用户访问一个第三方的恶意网站evil.com。在evil.com上有一个尝试利用CSRF漏洞发起的XHR请求目标是bank.com/transferMoney。由于cookie设置为Lax这个跨站XHR请求不会携带bank.com的cookie从而防止了潜在的CSRF攻击。但是如果用户在evil.com上点击一个指向bank.com的链接由于这是一个顶层导航请求bank.com的cookie将会被发送尽管是从evil.com触发的。
总结从而确保不破坏用户的正常浏览体验.
SameSite与Secure的不同
SameSite 属性用来控制 Cookie 是否能够在跨站请求中被发送。Secure 属性确保 Cookie 只能通过 HTTPS 协议发送。
如何理解Domain属性
Domain属性在Cookie中定义了哪些域名可以访问该Cookie。它有助于定义Cookie的范围。
默认情况下Cookie只能被创建它的页面所访问。但是如果你设置了Domain属性这个Cookie就可以被此域下的其他子域所访问。
假设你有一个主域example.com以及两个子域sub1.example.com和sub2.example.com。 如果你在sub1.example.com上设置了一个Cookie并未指定Domain属性那么默认情况下只有sub1.example.com可以访问该Cookiesub2.example.com和example.com都无法访问。 但如果你在sub1.example.com设置了一个Cookie并且指定了Domain属性为.example.com注意域名前面的点表示这是一个通配符匹配那么example.com、sub1.example.com、sub2.example.com都可以访问该Cookie。
需要注意的是为了安全性你不能设置一个与当前域完全不相关的Domain属性。也就是说sub1.example.com不能设置一个Domain为.anotherexample.com的Cookie。
另外使用Domain属性时应特别小心因为它可能会导致隐私和安全问题。确保你完全理解了这个属性的工作方式并合理使用。
如何在JavaScript中设置和读取Cookies如果一个Cookie被设置为HttpOnly这会发生什么
如何在JavaScript中设置和读取Cookies
在JavaScript中可以使用document.cookie属性来读取和设置cookies。
设置cookie:
document.cookie usernameJohnDoe; expiresThu, 18 Dec 2023 12:00:00 UTC; path/;这里我们设置了一个名为 “username” 的cookie其值为 “JohnDoe”该cookie将在2023年12月18日12:00:00 UTC到期并且它可在整个网站上使用由于path/。
读取cookie:
var allCookies document.cookie;这会返回一个字符串其中包含所有为当前页面设置的cookies。你可能需要解析此字符串以获得特定的cookie值。
如果一个Cookie被设置为HttpOnly这会发生什么
当一个cookie被设置为HttpOnly时它将不能被JavaScript脚本访问。这意味着尽管该cookie仍然存在于客户端且仍可以通过HTTP或HTTPS请求发送给服务器但你无法使用例如document.cookie的方法在浏览器端JavaScript代码中读取或修改它。
这个属性的主要目的是增加安全性防止潜在的跨站脚本攻击XSS。在这样的攻击中攻击者可能会尝试使用恶意脚本来读取用户的cookies包括可能包含敏感信息或会话标识符的cookies。通过将cookie设置为HttpOnly我们可以有效地减少这种风险因为即使恶意脚本运行在用户的浏览器上它也无法访问这些标记为HttpOnly的cookies。 解释第三方Cookies与第一方Cookies的区别。 为什么长时间的session cookies可能不是一个好主意 什么是Cookie的域Domain和路径Path它们如何影响Cookie的作用域 在服务端如何设置HttpOnly Cookie 为什么我们应该避免在Cookies中存储敏感信息即使它们被设置为HttpOnly 描述Cookie的生命周期。怎样设置一个会话Cookie以及一个持久性Cookie 在Web应用程序中Cookies与Session有什么区别和联系 如何确保Cookies在不同的环境和浏览器中一致性地工作 什么是Cookie的大小限制如果你需要存储的信息超过了这个限制你会如何处理
9.说说跨站请求伪造CSRF攻击
CSRF 攻击简化流程 目标攻击者希望攻击某个受害者在网站 bank.com 上的账户该受害者在 bank.com 有登录状态。 建立陷阱攻击者在一个他控制的网站 evil.com 上放置了一个恶意脚本或者构造了一个看起来正常的链接。这个链接或脚本其实是向 bank.com 发送一个请求。 例如img srchttps://img-home.csdnimg.cn/images/20230724024159.png?origin_urlhttps%3A%2F%2Fbank.com%2Ftransfer%3Fto%3Dattacker%26amount%3D1000pos_idimg-kXng9Qhn-1694418053406) width0 height0 当受害者访问 evil.com 时上述链接会尝试向 bank.com 发起一个转账请求。 利用用户登录状态如果受害者在 bank.com 处于登录状态并且其浏览器还有 bank.com 的 Cookie这个请求就会带上这个 Cookie因为浏览器会自动附带相应站点的 Cookie。从 bank.com 的角度看这个请求看起来是一个合法的用户请求。 完成攻击如果 bank.com 没有进行 CSRF 保护它会执行这个恶意请求将受害者的钱转到攻击者的账户。
如何防范 CSRF 攻击 使用 CSRF 令牌为每个会话和请求生成一个随机的、不可预测的令牌。只有在收到正确的令牌时服务器才会处理请求。 检查 Referer 标头如果请求的来源不是预期的域例如从 evil.com 来的请求那么可以拒绝该请求。 强制重新认证对于敏感的操作如转账要求用户再次输入密码或进行其他形式的二次认证。
我的问题 cookie默认情况就是不跨域的为什么受害者访问 evil.com 时点击了链接能发送bank.com 的 Cookie
当我们提到 CSRF 攻击其关键在于它是如何利用浏览器的自动行为进行的。
在 CSRF 攻击中攻击者不会尝试直接读取 bank.com 的 Cookie也不会尝试从 evil.com 创建或设置一个新的 Cookie 为 bank.com。而是利用的是浏览器在用户请求特定站点时自动将与该站点相关联的 Cookie 附加到请求上的特性。
详细解释一下
用户先前登录了 bank.com 并获得了一个与其会话关联的 Cookie。用户在另一个标签或窗口中访问了 evil.com。evil.com 包含一个使浏览器发起请求到 bank.com 的恶意代码如之前提到的 img srchttps://img-home.csdnimg.cn/images/20230724024159.png?origin_urlhttps%3A%2F%2Fbank.com%2Ftransfer%3Fto%3Dattacker%26amount%3D1000pos_idimg-kXng9Qhn-1694418053406) width0 height0。当浏览器尝试加载上述 img 标签指向的 URL 时它会自动地按照设计将与 bank.com 相关的 Cookie 附加到这个请求上。这就是浏览器的正常行为。这意味着即使请求是从 evil.com 页面发起的由于它是针对 bank.com 的浏览器仍然会附加与 bank.com 相关的 Cookie。
这就是 CSRF 攻击的核心它不是试图窃取或直接利用 Cookie而是利用浏览器的这种自动行为来执行未经授权的操作。
10.浏览器的存储
浏览器提供了多种客户端存储机制每种机制都有其特定的用途、特性和限制。以下是对 cookie、localStorage、sessionStorage 和 IndexedDB 的对比
1. Cookie
存储大小: 通常限制为4KB。生命周期: 可以设置过期时间。如果没有设置它的生命周期将与会话持续相同即关闭浏览器后会被删除。与服务器交互: 每次HTTP请求都会附带这可能会浪费带宽。访问性: JavaScript可以访问但需要考虑安全性例如设置HttpOnly标志以防止通过JS访问。使用场景: 适合小量数据的存储经常用于身份验证如存储JWT或会话ID。
2. LocalStorage
存储大小: 通常限制为5-10MB。生命周期: 没有过期时间除非明确删除否则数据会永久存储。与服务器交互: 数据只在客户端存储不会随每次请求发送给服务器。访问性: 可以通过JavaScript访问。使用场景: 适合大量持久化的数据如用户偏好设置、主题等。
3. SessionStorage
存储大小: 通常限制为5-10MB。生命周期: 数据在页面会话期间可用关闭页面或浏览器后会被清除。与服务器交互: 数据只在客户端存储不会随每次请求发送给服务器。访问性: 可以通过JavaScript访问。使用场景: 适合需要在浏览器会话中临时存储的数据。
4. IndexedDB
存储大小: 无明确的限制但可能受到磁盘空间的影响。通常可以存储大量数据。生命周期: 没有过期时间除非明确删除否则数据会永久存储。与服务器交互: 数据只在客户端存储不会随每次请求发送给服务器。访问性: 可以通过JavaScript访问。结构: 它是一个事务性的数据库系统可以存储键值对支持索引事务和游标。使用场景: 适合大量数据的存储如离线应用数据、大数据集等。
总结
大小: cookie localStorage/sessionStorage IndexedDB生命周期: sessionStorage cookie (如果设置了过期时间) localStorage IndexedDB与服务器交互: 只有cookie会随HTTP请求自动发送。结构: 只有IndexedDB提供了数据库的功能和结构。用途: 根据存储需求和数据的大小、持续性来选择合适的存储机制。
11.HTTP与HTTPS、第三方证书工作原理、以及HTTP各个版本
HTTP各个版本
HTTPHypertext Transfer Protocol和HTTPSHTTP Secure是用于在客户端和服务器之间传输数据的协议它们在以下几个方面有所区别
安全性
HTTP是明文协议数据在传输过程中不加密容易被窃取和篡改。而HTTPS通过使用SSL/TLS协议对数据进行加密确保传输的数据是安全的可以有效防止中间人攻击和数据泄露。HTTPS使用数字证书对数据进行数字签名确保传输的数据在传输过程中没有被篡改或修改。客户端可以验证证书的合法性确保与服务器建立的连接是可信的。
默认端口HTTP使用80端口进行通信而HTTPS使用443端口进行通信。
对于第三方证书如何保证服务器的可信性这涉及到公开密钥基础设施PKI的工作原理。具体步骤如下 服务器生成密钥对服务器首先生成一个密钥对包括公钥和私钥。 证书请求服务器将公钥发送给受信任的第三方机构证书颁发机构CA请求颁发证书。 验证身份证书颁发机构验证服务器的身份。 颁发证书一旦服务器的身份验证通过证书颁发机构会生成证书并将其签名。证书中包含了服务器的公钥以及其他相关信息。 客户端验证当客户端与服务器建立HTTPS连接时服务器会将证书发送给客户端。客户端会验证证书的合法性包括检查证书的签名、过期时间、颁发机构等。 可信根证书客户端会使用自己内置的受信任的根证书Root CA来验证服务器证书的合法性。如果证书链可以追溯到受信任的根证书且没有被撤销或过期客户端会信任服务器的证书。
12.怎么传递引用类型而互不影响 深拷贝
当传递引用类型如对象、数组时你实际上是传递了一个指向原始数据的指针或引用。因此如果你修改了传递后的引用原始数据也会受到影响。为了避免这种情况你可以进行“深复制”或“深克隆”以创建原始数据的一个完整副本这样原始数据和副本之间就不会相互影响。
以下是一些常用方法来传递引用类型并确保它们互不影响 使用 JSON 方法 这是一个简单的方法但有局限性例如它不能处理函数、undefined、正则表达式或新的数据类型如 Map 和 Set。 var original { a: 1, b: { c: 2 } };
var copy JSON.parse(JSON.stringify(original));使用递归方法进行深克隆 function deepClone(obj, hash new WeakMap()) {if (obj null) return obj; // 如果是null或undefined直接返回if (obj instanceof RegExp) return new RegExp(obj);if (obj instanceof Date) return new Date(obj);if (hash.has(obj)) return hash.get(obj); // 防止循环引用let t new obj.constructor();hash.set(obj, t);for (let key in obj) {if (obj.hasOwnProperty(key)) {t[key] deepClone(obj[key], hash);}}return t;
}var original { a: 1, b: { c: 2 } };
var copy deepClone(original);使用第三方库 例如lodash 提供了一个 cloneDeep 方法可以用来进行深克隆。 var _ require(lodash);
var original { a: 1, b: { c: 2 } };
var copy _.cloneDeep(original);这些方法可以确保你传递的引用类型数据互不影响。但在使用时你应该考虑到深克隆可能会比浅克隆或直接传递引用更加耗时尤其是在处理大数据结构时。
13.静态多态
在前端面试中静态多态是一个常见的概念通常与面向对象编程Object-Oriented Programming简称OOP相关。
静态多态Static Polymorphism也被称为编译时多态或早期绑定Early Binding它是在编译时确定方法调用的一种特性。在静态多态中方法重载是最常见的应用形式。
方法重载是指在同一个类中定义多个具有相同名称但参数列表不同的方法。通过重载可以根据传递给方法的参数的类型、数量或顺序来决定具体调用哪个方法。这种静态多态性是通过编译器在编译时根据方法的签名来确定的。
静态多态的一个示例是在前端开发中使用的函数重载。在JavaScript中函数重载是一种模拟静态多态的技术因为JavaScript不直接支持方法重载。通过在函数内部根据参数的类型和数量进行条件判断可以实现不同的函数行为。
下面是一个简单的JavaScript函数重载示例
function add(x, y) {return x y;
}function add(x, y, z) {return x y z;
}console.log(add(2, 3)); // 输出 5
console.log(add(2, 3, 4)); // 输出 9在上面的例子中通过定义两个同名但参数个数不同的函数add实现了根据参数个数的不同来执行不同的加法操作。
总结来说静态多态是指在编译时根据方法的签名来确定方法调用的特性。在前端开发中函数重载是一种模拟静态多态的技术可以根据参数的类型、数量或顺序来实现不同的函数行为。
14.怎么用js实现类的修饰符 private public
在 JavaScript 中从 ES6ES2015开始我们可以使用类classes来定义对象的结构和方法。但是直到 ES2020JavaScript 的类并没有提供原生的 private 或 public 修饰符。ES2020 为类引入了真正的私有字段和方法这为 JavaScript 开发者提供了一种确保数据封装和私有状态的方式。
以下是如何在 JavaScript 中使用 private 和 public 修饰符 public默认情况下 所有没有使用任何修饰符的属性和方法默认都是公有的。你不需要显式地标注它们为 public。 class MyClass {publicField Im public!; // public by defaultpublicMethod() {console.log(Hello from a public method!);}
}const instance new MyClass();
console.log(instance.publicField); // Im public!
instance.publicMethod(); // Hello from a public method!private 在属性或方法的名称前使用 # 可以将其标记为私有。私有字段或方法不能从类的外部访问。 class MyClass {#privateField Im private!;#privateMethod() {console.log(Hello from a private method!);}accessPrivate() {console.log(this.#privateField);this.#privateMethod();}
}const instance new MyClass();
// console.log(instance.#privateField); // Error! Private field
// instance.#privateMethod(); // Error! Private method
instance.accessPrivate(); // This will access the private field and method注意真正的私有类字段和方法在旧的浏览器或 JavaScript 环境中可能不受支持。在使用前请确保你的目标环境支持 ES2020 或更高版本的功能。
15.前端如何性能优化
前端性能优化是提高网页加载速度和响应性能的关键方面。以下是一些常见的前端性能优化技巧 减少 HTTP 请求减少网页需要发送的 HTTP 请求次数可以通过合并和压缩文件、使用 CSS 精灵图、减少第三方库和插件的使用等方式来实现。 压缩文件压缩 CSS、JavaScript 和 HTML 文件可以减小文件大小加快下载速度。可以使用压缩工具如UglifyJS、CSSNano等或使用构建工具如Webpack、Gulp进行文件压缩。 使用浏览器缓存通过设置适当的缓存头Cache-Control、Expires等使得浏览器可以缓存静态资源减少不必要的请求和下载。 图片优化对图片进行优化包括压缩图片大小、选择合适的图片格式如JPEG、PNG、WebP以及使用图片懒加载等技术来减少页面加载时间。 延迟加载延迟加载非关键内容如图片、视频、广告等可以通过懒加载技术如Intersection Observer API来实现以提高初始页面加载速度。 代码优化优化 JavaScript 和 CSS 代码包括删除不必要的注释和空格、减少重绘和重排、避免不必要的计算和循环等以提高执行效率。 使用 CDN将静态资源如图片、CSS、JavaScript文件托管到内容分发网络CDN上可以提高资源加载速度减少服务器负载。 预加载和预渲染使用预加载Preload和预渲染Prerender技术提前加载和渲染关键资源和页面以加快用户访问体验。 响应式设计采用响应式设计使网页能够适应不同屏幕尺寸和设备提供更好的用户体验。 代码分割和按需加载将大型应用程序拆分为小模块并按需加载以避免不必要的资源加载和初始化提高页面加载速度。 监测和分析使用工具如Lighthouse、WebPageTest、Google Analytics等监测和分析网页性能找出性能瓶颈并针对性地进行优化。
以上是一些常见的前端性能优化技巧具体的优化策略和技术选择应根据项目需求和实际情况进行评估和实施。重要的是不断测试和测量优化的效果并进行持续改进。
进程和线程 七层模型、五层模型 deffer\async 加载js Http、Https 深度优先遍历和广度优先遍历 diff算法 安全性相关 react原理fiber调度算法
