前端求职必备：全面复习资料与实战技巧

需积分: 42 7 浏览量更新于2024-07-17 1 收藏 2.01MB PDF 举报

前端复习资料涵盖了广泛的前端开发基础知识，旨在帮助学习者和求职者提升技能。以下是部分内容的详细解释： 1. **浏览器兼容性和内核**: 学习者需了解在哪些主流浏览器（如Chrome、Firefox、Safari、IE等）进行测试，并熟悉各自内核（如WebKit、Gecko、Trident）。理解浏览器内核的不同有助于避免兼容性问题。 2. **文档类型声明** (Doctype): Doctype告知浏览器文档采用哪种HTML版本或模式，这对页面解析至关重要。例如，<!DOCTYPE html>表示HTML5标准模式。 3. **Quirks模式与Standards模式**: Quirks模式是早期浏览器的传统解析模式，与W3C标准模式相比，可能会有不一致的行为。理解两者差异有助于编写跨浏览器兼容的代码。 4. **div+CSS布局**: div+CSS强调用HTML结构化内容，而非表格布局，提高了灵活性、可维护性和SEO友好性。 5. **图像标签**: img的alt属性提供替代文本，适合屏幕阅读器，title属性为鼠标悬停时显示的提示。strong和em用于强调文本，但语义上有所不同。 6. **渐进增强与优雅降级**: 渐进增强是指先实现基础功能，再逐步添加高级特性；优雅降级则是针对老版本浏览器，先提供基本功能，然后降级显示。 7. **多域名资源分发**: 提高网站速度，通过CDN（内容分发网络）将静态资源分布在全球服务器，减少延迟。 8. **网页标准和标准化机构**: 网页标准确保了网页的一致性和可访问性，理解W3C和相关组织的作用是前端开发者的基本素养。 9. **存储选项**: cookies、sessionStorage和localStorage的区别在于数据持久性和安全性，cookies会被发送到服务器，而本地存储只在客户端。 10. **src与href**: src通常用于引用外部资源（如图片、音频），href用于定义超链接的目标地址。 11. **图片格式**: 常见的图片格式有JPEG、PNG、SVG等，选择合适的格式能兼顾质量和文件大小。 12. **微格式**: 是一种自定义的HTML标记，用于增强结构信息，虽在现代前端不太常见，但了解其原理可以帮助处理元数据。 13. **性能优化**: 包括HTTP缓存、CSS和JS压缩、延迟加载图片等技术，提高用户体验。 14. **图片优化**: 使用懒加载、预加载、图片尺寸适配、压缩等策略优化图片加载速度。 15. **HTML语义化**: 通过合理使用标签（如<header>、<nav>、<article>等）增强页面结构，利于搜索引擎理解和用户辅助技术。 16. **SEO注意事项**: 考虑关键词、元标签、URL结构、页面加载速度等因素，提高搜索引擎排名。 17. **DOM样式设置**: CSS可通过class、id、标签选择器等操作DOM元素的样式。 18. **CSS选择器**: 包括基本选择器（如元素选择器、类选择器）、后代选择器、伪类等，用于精确控制样式。 19. **隐藏元素**: 使用display: none; 或 visibility: hidden; 属性让元素不在视窗中显示。 20. **hover样式问题及解决**: 检查是否过度覆盖hover状态，或者使用:hover伪类正确设置样式。 21. **CSS Hack和IE特定修复**: CSS Hack是针对特定版本IE的特殊解决方案，如条件注释，了解不同版本的hack技巧。 22. **元素类型和盒模型**: 行内元素（如span）占据内容盒，块级元素（如div）占据包含块，padding和margin对于行内元素可能有限制。 23. **外边距重叠**: 当相邻元素的外边距合并时，可能导致意外的间距，通过负边距或box-sizing属性调整。 24. **rgba()与opacity**: rgba()支持透明度，opacity仅改变元素的不透明度，影响整个元素，包括背景。 25. **垂直和水平叠加**: vertical-align和position属性可用于控制文本和元素在页面上的排列。 26. **浮动元素垂直居中**: 可通过Flexbox、Grid或利用绝对定位配合transform: translateY()实现。 27. **px与em单位**: px是固定像素值，em是相对于父元素字体大小的比例，适用于响应式设计。 28. **CSS reset与normalize.css**: reset清除浏览器默认样式，normalize.css则修复了这些默认样式的一些不一致性。 29. **Sass与LESS**: 两种预处理器语言，简化CSS编写，引入变量、嵌套规则和函数，提高代码复用和维护性。这些知识点构成了前端开发的基础框架，熟练掌握它们对于提升前端开发能力和就业竞争力至关重要。

136. 假设 a.html 和 b.html 在同一个文件夹下面，用 JavaScript 实现当打开 a.html 五秒

钟后，自动跳转到 b.html。

.................................................................................................

219

137. 请使用 JavaScript 写出三种产生一个 image 标签的方法（提示：从方法、对象、

HTML

.......................................................................................................................................

220

138. js 中网页前进和后退的代码

.........................................................................................

220

139. 请写出一条至少 3 个节点的 DOM 树 (YG)

................................................................

220

140. 实现点击按钮弹出窗口的代码 (YG)

...........................................................................

220

141. JavaScript 包括那些基本数据类型？（小米）

...........................................................

220

142. 移动端常见问题及解决方案

.......................................................................................

221

一、meta 基础知识

.......................................................................................................

221

二、常见问题

.................................................................................................................

221

6. 你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功

能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器

进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个

非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰

减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为

“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限

定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无

妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏

览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被

直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有

的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为

一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器

支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角，

阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？

7. 为什么利用多个域名来存储网站资源会更有效？

CDN 缓存更方便

突破浏览器并发限制

节约 cookie 带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

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

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降

低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，

最终提高网站易用性。

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

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话

中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久

化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主

动删除数据，否则数据是永远不会过期的。

web storage 和 cookie 的区别

Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小

是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费

了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie

需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie

的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在，而 Web Storage 仅仅是为

了在本地“存储”数据而生。

10. 简述一下 src 与 href 的区别。

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在

位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片

和 frame 等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行

完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将

js 脚本放在底部而不是头部。

剩余243页未读，继续阅读

l867323870

粉丝: 4
资源: 16

前端求职必备：全面复习资料与实战技巧

2020届Web前端面试复习宝典

"2022最新最全的React面试题PDF，前端小伙伴必收藏！

JAVA技术全面面试宝典：提升JAVA技能

建筑环境学复习资料.pdf

微机原理与接口技术复习资料.pdf

javascript网页设计期末考试复习资料.pdf

教师招聘考试公共基础知识复习资料.pdf

楼宇自动化技术与工程复习资料.pdf

华南师范大学《C#》期末复习资料.pdf

教师资格证考试中小学美术学科复习资料.pdf

最新资源