2023年经典前端面试题.docx

PAGE2 / NUMPAGES2 2023年经典前端面试题 一、HTML/CSS篇 1、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？ 【仅供参考】HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS、图像和 JavaScript脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。！doctype htmlhtml manifest=example. appcache/html与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。 2、HTML5为什么只需要写！doctype htm？ 【仅供参考】HTML5不基于SGML，因此不需要对DTD进行引用，但是需要 DOCTYPE来规范浏览器的行为（让浏览器按照它们的方式来运行）。而HTM4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的类型。 3、HTML5 的离线储存怎么使用，工作原理能不能解释一下？ 【仅供参考】在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。如何使用：创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性。html lang=en manifest=index.manifest在如下 cache.manifest 文件的编写离线存储的资源。CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK:/ /offline.htmlCACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出 来。NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。如何更新缓存： 1、更新 manifest 文件 2、通过 javascript 操作 3、清除浏览器缓存注意事项： 1、浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。 2、如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。 3、引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。 4、FALLBACK 中的资源必须和 manifest 文件同源。 5、当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。 6、站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。 7、当 manifest 文件发生改变时，资源请求本身也会触发更新。 4、本地存储和会话（事务）存储之间的区别是什么？ 【仅供参考】本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。 5、HTML5应用程序缓存为应用带来什么优势？ 【仅供参考】应用程序缓存为应用带来3个优势。（1）离线浏览，让用户可在应用离线时（网络不可用时）使用它们。（2）速度，让已缓存资源加载得更快。（3）减少服务器负载，让浏览器将只下载服务器更新过的资源。 6、如何区别HTML和HTML5？ 【仅供参考】用 DOCTYPE声明新增的结构元素和功能元素来区别它们。 7、如何进行网站性能优化 【仅供参考】content方面 1、减少HTTP请求：合并文件、CSS精灵、inline Image 2、减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名 3、减少DOM元素数量Server方面 1、使用CDN 2、配置ETag 3、对组件使用Gzip压缩