阿里前端面试精华：HTML&CSS核心技术详解

需积分: 13 71 浏览量更新于2024-07-09 收藏 2.38MB PDF 举报

阿里前端面试题第一期涵盖了广泛的HTML、CSS、JavaScript以及前端开发基础知识，旨在评估应聘者的理论知识和实践经验。以下是一些重要的知识点总结： 1. **HTML基础**： - DOCTYPE的作用是声明文档类型，确保浏览器以正确的模式解析文档，如<!DOCTYPE HTML>表示采用HTML5标准。 - HTML5简化了DOCTYPE，不再需要引用DTD（文档类型定义），提高了开发效率。 - SGML、HTML、XML和XHTML的关系：SGML是基础，HTML是应用层，XML用于数据交换，XHTML是HTML的XML版本，强调结构和语义。 2. **HTML元素与结构**： - 行内元素（如`<a>`、`<span>`）嵌入文本中，块级元素（如`<div>`、`<p>`）独立占据空间。 - HTML5元素分类包括结构化元素（如`<header>`、`<footer>`）、表单元素（如`<input>`）、媒体元素（如`<video>`）等。 3. **CSS与浏览器解析**： - `link`和`@import`用于引入外部样式表，`link`会阻塞文档解析，`@import`不阻塞。 - 浏览器理解、内核、渲染原理涉及浏览器如何解析HTML、执行CSS和JavaScript，以及异步和延迟加载的处理。 - 预解析、文档阻塞、CSS阻塞解析以及渲染不良现象的理解，有助于优化页面性能。 - 重绘和回流的概念，以及如何通过减少DOM操作来提升渲染速度。 4. **HTML5特性和兼容性**： - HTML5新特性包括新的标签、离线存储、更好的语义化支持等。处理新标签时需关注跨浏览器兼容问题。 - HTML5离线存储利用Service Worker实现，允许网站在离线状态下访问缓存资源。 - 常见的存储技术包括cookies、sessionStorage、localStorage及其适用场景和区别。 5. **表单与交互**： - `<label>`标签的作用是关联表单元素，提供可点击区域便于用户交互。 - HTML5表单的自动完成功能利用`autocomplete`属性，提升用户体验。这些知识点覆盖了前端开发的核心领域，面试者需要具备扎实的基础理论，了解最新的HTML5特性，并熟悉浏览器的工作原理和性能优化技巧。掌握这些内容对于进入阿里这样的大型公司担任前端职位至关重要。

1.33 HTML5 的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用

户机器上的缓存文件。

原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），

通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之

后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

（1）创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个

manifest 的属性。

（2）在如下 cache.manifest 文件的编写离线存储的资源。

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

CACHE: 表示需要离线存储的资源列表，由于包含 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 文件发生改变时，资源请求本身也会触发更新。

详细的使用可以参考：《HTML5 离线缓存-manifest 简介》《有趣的 HTML5：离线存储》

1.34 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果

是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行

离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资

源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发

生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存

储。

离线的情况下，浏览器就直接使用离线存储的资源。

1.35. 常见的浏览器端的存储技术有哪些？

浏览器常见的存储技术有

、

localStorage

和

sessionStorage

。

还有两种存储技术用于大规模数据存储，

webSQL

（已被废除）和

indexDB

。

支持

userData

存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

详细的资料可以参考：《很全很全的前端本地存储讲解》

1.36 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

相关资料：

SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都

是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客

户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常

经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使

不需要），会在浏览器和服务器间来回传递。

存储大小：

cookie 数据大小不能超过 4 k 。

sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以

达到 5M 或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。

sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，

并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶

级浏览上下文中初始化一个新的会话。

cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

作用域：

sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中

共享。

localStorage 在所有同源窗口中都是共享的。

cookie 在所有同源窗口中都是共享的。

回答：

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存

储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存

时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session

的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在

当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源

页面所访问共享。

localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者

更大的数据。它和 sessionStorage

不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访

问共享。

上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时

候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不

是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

详细的资料可以参考：《请描述一下 cookies，sessionStorage 和 localStorage 的区别？》

《浏览器数据库 IndexedDB 入门教程》

1.37 iframe 有那些缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

主要缺点有

（1） iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe

加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态

设置 iframe 的 src 可以避免这种阻塞情况。

（2）搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO 。

（3） iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的

并行加载。

（4）浏览器的后退按钮失效。

（5）小型的移动设备无法完全显示框架。

详细的资料可以参考：《使用 iframe 的优缺点》《iframe 简单探索以及 iframe 跨域处

理》

1.38 Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签

阿里前端面试精华：HTML&CSS核心技术详解

阿里前端面试题第二期.pdf

字节前端面试题.pdf

2019阿里巴巴技术面试题汇总.pdf

阿里巴巴前端开发工程师笔试二.pdf

阿里P6-1年经验-25K.pdf

"字节前端面试题pdf：React/Vue列表组件key的必要性及作用分析

【16】第2版：​大厂面试题.rar

2021年最新Java后端学习路线，适用于所有想要踏入Java行业的初学者（csdn）————程序.pdf

leetcode算法题主函数如何写-interview-question:Web前端开发者面试

JavaScript面试深度解析：从基础到高级

最新资源

【16】第2版：大厂面试题.rar