在我们找工作时经常会因为面试问题而头痛, 本文就来为大家收集一些前端面试的题目和答案, 希望对大家有一定的帮助.
目录
你做的页面在哪些流览器测试过? 这些浏览器的内核分别是什么? https://www.html.cn/interview/16554.html#test1
Quirks 模式是什么? 它和 Standards 模式有什么区别 https://www.html.cn/interview/16554.html#test2
Doctype 作用? 严格模式与混杂模式 - 如何触发这两种模式, 区分它们有何意义? https://www.html.cn/interview/16554.html#test3
div+CSS 的布局较 table 布局有什么优点? https://www.html.cn/interview/16554.html#test4
img 的 alt 与 title 有何异同? strong 与 em 的异同? https://www.html.cn/interview/16554.html#test5
你能描述一下渐进增强和优雅降级之间的不同吗? https://www.html.cn/interview/16554.html#test6
为什么利用多个域名来存储网站资源会更有效? https://www.html.cn/interview/16554.html#test7
请谈一下你对网页标准和标准制定机构重要性的理解. https://www.html.cn/interview/16554.html#test8
请描述一下 cookies,sessionStorage 和 localStorage 的区别? https://www.html.cn/interview/16554.html#test9
简述一下 src 与 href 的区别. https://www.html.cn/interview/16554.html#test10
知道的网页制作会用到的图片格式有哪些? https://www.html.cn/interview/16554.html#test11
知道什么是微格式吗? 谈谈理解. 在前端构建中应该考虑微格式吗? https://www.html.cn/interview/16554.html#test12
在 CSS/JS 代码上线之后开发人员经常会优化性能, 从用户刷新网页开始, 一次 JS 请求一般情况下有哪些地方会有缓存处理? https://www.html.cn/interview/16554.html#test13
一个页面上有大量的图片(大型电商网站), 加载很慢, 你有哪些方法优化这些图片的加载, 给用户更好的体验. https://www.html.cn/interview/16554.html#test14
你如何理解 HTML 结构的语义化? https://www.html.cn/interview/16554.html#test15
谈谈以前端角度出发做好 SEO 需要考虑什么? https://www.html.cn/interview/16554.html#test16
有哪项方式可以对一个 DOM 设置它的 CSS 样式? https://www.html.cn/interview/16554.html#test17
CSS 都有哪些选择器? https://www.html.cn/interview/16554.html#test18
CSS 中可以通过哪些属性定义, 使得一个 DOM 元素不显示在浏览器可视范围内? https://www.html.cn/interview/16554.html#test19
超链接访问过后 hover 样式就不出现的问题是什么? 如何解决? https://www.html.cn/interview/16554.html#test20
1. 你做的页面在哪些流览器测试过? 这些浏览器的内核分别是什么?
浏览器 | 内核 |
---|---|
IE | trident 内核 |
Firefox(火狐) | gecko 内核 |
Safari | webkit 内核 |
Opera | 以前是 presto 内核,现已改用 Google Chrome 的 Blink 内核 |
Chrome | Blink 内核 (基于 webkit, Google 与 Opera Software 共同开发) |
2.Quirks 模式是什么? 它和 Standards 模式有什么区别?
Quirks 模式(怪癖模式, 诡异模式, 怪异模式)
Quirks 模式和 Standards 模式的区别:
首先, 严格模式 (又称标准模式, Standards 模式) 和混杂模式 (Quirk 模式) 都是指浏览器的呈现模式, 要与 Doctype 的两种风格区别开来 (严格( strict ) 和过渡( transitional ), 过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本).
严格模式下: 页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式: 不严格按照标准执行, 主要用来兼容旧的浏览器, 向后兼容
而浏览器究竟是使用严格模式还是混杂模式呈现页面与网页中的 DTD (文件类型定义)直接相关.
注意: DTD(文档类型定义)
作用是定义 xml 文档的合法构建模块. 它使用一系列的合法元素来定义文档结构. 列如:<!DOCTYPE 根元素 [元素声明]>
两种模式的一些差别案列如下:
盒模型: 在 W3C 标准中, 如果设置一个元素的宽度和高度, 指的是元素内容的宽度和高度, 而在 Quirks 模式下, 设置的宽度和高度还包含了 padding 和 border.
设置行内元素的高宽: 在 Standards 模式下, 给 < span > 等行内元素设置 wdith 和 height 都不会生效, 而在 quirks 模式下, 则会生效.
设置百分比的高度: 在 standards 模式下, 一个元素的高度是由其包含的内容来决定的, 如果父元素没有设置百分比的高度, 子元素设置一个百分比的高度是无效的.
用 margin:0 auto 设置水平居中: 使用 margin:0 auto 在 standards 模式下可以使元素水平居中, 但在 quirks 模式下却会失效.
诸如此类的, 还有很多. 有根据经验遇到的, 也有文章上看到的, 大家自行摸索吧...
3. Doctype 作用? 严格模式与混杂模式 - 如何触发这两种模式, 区分它们有何意义?
<!DOCTYPE > 声明位于文档中的最前面的位置, 处于 <HTML > 标签之前. 告知浏览器的解析器, 用什么文档类型 规范 ( HTML 或 XHTML) 来解析这个文档.
对于 HTML 4.01 文档,
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现.
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现.
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现.
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现.
对于 HTML5 文档,
HTML5 没有 DTD , 因此也就没有严格模式与混杂模式的区别, HTML5 有相对宽松的语法, 实现时, 已经尽可能大的实现了向后兼容.( HTML5 没有严格和混杂之分)
4.div+CSS 的布局较 table 布局有什么优点?
改版的时候更方便, 只要改 CSS 文件
页面加载速度更快, 结构化清晰, 页面显示简洁
表现与结构分离
易于优化 (SEO) 对搜索引擎更加友好, 排名更容易靠前
5.img 的 alt 与 title 有何异同? strong 与 em 的异同?
alt 属性: 在图片无法加载时, 才会显示的值
title 属性: 在图片正常加载时, 鼠标划上去显示的值
注意: alt 也有后者的功能, 但是只是在低版本的 IE 浏览器才支持, 高版本及标准浏览器不支持这个 功能了.
strong: 粗体强调标签, 强调, 表示内容的重要性
em: 斜体强调标签, 更强烈强调, 表示内容的强调点
6. 你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面, 保证最基本的功能, 然后再针对高级浏览器进行效果, 交互等改进和追加功能达到更好的用户体验.
优雅降级 graceful degradation: 一开始就构建完整的功能, 然后再针对低版本浏览器进行兼容.
区别: 优雅降级是从复杂的现状开始, 并试图减少用户体验的供给, 而渐进增强则是从一个非常基础的, 能够起作用的版本开始, 并不断扩充, 以适应未来环境的需要. 降级 (功能衰减) 意味着往回看; 而渐进增强则意味着朝前看, 同时保证其根基处于安全地带.
"优雅降级" 观点
认为应该针对那些最高级, 最完善的浏览器来设计网站. 而将那些被认为 "过时" 或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段, 并把测试对象限定为主流浏览器 (如 IE,Mozilla 等) 的前一个版本.
在这种设计范例下, 旧版的浏览器被认为仅能提供 "简陋却无妨 (poor, but passable)" 的浏览体验. 你可以做一些小的调整来适应某个特定的浏览器. 但由于它们并非我们所关注的焦点, 因此除了修复较大的错误之外, 其它的差异将被直接忽略.
"渐进增强" 观点
认为应关注于内容本身.
内容是我们建立网站的诱因. 有的网站展示它, 有的则收集它, 有的寻求, 有的操作, 还有的网站甚至会包含以上的种种, 但相同点是它们全都涉及到内容. 这使得 "渐进增强" 成为一种更为合理的设计范例. 这也是它立即被 Yahoo! 所采纳并用以构建其 "分级式浏览器支持 (Graded Browser Support)" 策略的原因所在.
7. 为什么利用多个域名来存储网站资源会更有效?
CDN 缓存更加方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数, 优化页面响应速度
防止不必要的安全问题
8. 请谈一下你对网页标准和标准制定机构重要性的理解.
网页标准和标准制定机构都是为了能让 Web 发展的更'健康', 开发者遵循统一的标准, 降低开发难度, 开发成本, SEO 也会更好做, 也不会因为滥用代码导致各种 BUG, 安全问题, 最终提高网站易用性.
9. 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
特性 | Cookie | LocalStorage | sessionStorage |
---|---|---|---|
数据的申明周期 | 一般由服务器生成,可设置失效时间。如果在浏览器生成,默认是关闭浏览器之后失效 | 除非被清除,否则永久保存 | 仅在当前会话有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4KB | 一般 5MB | 一般 5MB |
与服务端通信 | 每次都会携带在 HTTP 头中,如果使用 cookie 保存过多数据会带来性能问题 | 仅在客户端中保存,不参与和服务器的通信。 | 同 LocalStorage |
用途 | 一般由服务器端生成,用于标识用户身份 | 用于浏览器缓存数据 | 同 LocalStorage |
共享 | 在同源且符合 path 规则的文档之间共享 | 在同源文档之间共享 | 不能共享 |
相同点 | 三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对 | 同上 | 同上 |
更多详情, 请点击我的这篇博客查看:٩(๑ᴗ๑)۶
cookie localStorage sessionStorage (¦3」∠) 看完你居然就懂了!!!
10. 简述一下 src 与 href 的区别
src: 用于替换当前元素
href: 用于在当前文档和引用资源之间确立联系.
src(source)指向外部资源的位置, 指向的内容将会嵌入到文档中当前标签所在位置;
在请求 src 资源时会将其指向的资源下载并应用到文档内, 例如 JS 脚本, img 图片和 frame 等元素.
<script src ="js.js"></script>
当浏览器解析到该元素时, 会暂停其他资源的下载和处理, 直到将该资源加载, 编译, 执行完毕, 图片和框架等元素也如此, 类似于将所指向资源嵌入当前标签内. 这也是为什么将 JS 脚本放在底部而不是头部.
href(Hypertext Reference)指向网络资源所在位置, 建立和当前元素 (锚点) 或当前文档 (链接) 之间的链接, 如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为 CSS 文件, 就会并行下载资源并且不会停止对当前文档的处理. 这也是为什么建议使用 link 方式来加载 CSS, 而不是使用 @import 方式.
11. 知道的网页制作会用到的图片格式有哪些?
PNG-8,PNG-24,jpeg,gif,svg
但是上面的那些都不是面试官想要的最后答案. 面试官希望听到是 Webp.(是否有关注新技术, 新鲜事物)
科普一下 Webp: WebP 格式, 谷歌 (google) 开发的一种旨在加快图片加载速度的图片格式. 图片压缩体积大约只有 JPEG 的 2/3, 并能节省大量的服务器带宽资源和数据空间. Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式.
在质量相同的情况下, WebP 格式图像的体积要比 JPEG 格式图像小 40%
想了解各种格式之间的区别 请点击查看我的另一篇博客: 静态资源优化: 图片优化
12. 知道什么是微格式吗? 谈谈理解. 在前端构建中应该考虑微格式吗?
微格式 (Microformats) 是一种让机器可读的语义化 XHTML 词汇的集合, 是结构化数据的开放标准. 是为特殊应用而制定的特殊格式.
优点: 将智能数据添加到网页上, 让网站内容在搜索引擎结果界面可以显示额外的提示.(应用范例: 豆瓣, 有兴趣自行 google)
13. 在 CSS/JS 代码上线之后开发人员经常会优化性能, 从用户刷新网页开始, 一次 JS 请求一般情况下有哪些地方会有缓存处理?
dns 缓存, cdn 缓存, 浏览器缓存, 服务器缓存.
14. 一个页面上有大量的图片(大型电商网站), 加载很慢, 你有哪些方法优化这些图片的加载, 给用户更好的体验.
图片懒加载, 在页面上的未可视区域可以添加一个滚动条事件, 判断图片到浏览器顶端的距离与页面的距离, 如果前者小于后者, 优先加载.
如果为幻灯片, 相册等, 可以使用图片预加载技术, 将当前展示图片的前一张和后一张优先下载.
如果图片为 CSS 图片, 可以使用 CSSsprite,SVGsprite,Iconfont,Base64 等技术.
如果图片过大, 可以使用特殊编码的图片, 加载时会先加载一张压缩的特别厉害的缩略图, 以提高用户体验.
如果图片展示区域小于图片的真实大小, 则因在服务器端根据业务需要先行进行图片压缩, 图片压缩后大小与展示一致.
想了解更多图片优化方式 请点击查看我的另一篇博客: 静态资源优化: 图片优化
15. 你如何理解 HTML 结构的语义化?
什么是 HTML 语义化?
选择合适的 HTML 标签, 便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析.
为什么要语义化?
为了在没有 CSS 的情况下, 页面也能呈现出很好地内容结构, 代码结构: 为了裸奔时好看;
用户体验: 例如 title,alt 用于解释名词或解释图片信息, label 标签的活用;
有利于 SEO: 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息: 爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析 (如屏幕阅读器, 盲人阅读器, 移动设备) 以意义的方式来渲染网页;
便于团队开发和维护, 语义化更具可读性, 是下一步吧网页的重要动向, 遵循 W3C 标准的团队都遵循这个标准, 可以减少差异化.
16. 谈谈以前端角度出发做好 SEO 需要考虑什么?
了解搜索引擎如何抓取网页和如何索引网页
你需要知道一些搜索引擎的基本工作原理, 各个搜索引擎之间的区别, 搜索机器人 (SE robot 或叫 Web crawler) 如何进行工作, 搜索引擎如何对搜索结果进行排序等等.
Meta 标签优化
主要包括主题 (Title), 网站描述(Description), 和关键词(Keywords). 还有一些其它的隐藏文字比如 Author(作者),Category(目录),Language(编码语种) 等.
如何选取关键词并在网页中放置关键词
搜索就得用关键词. 关键词分析和选择是 SEO 最重要的工作之一. 首先要给网站确定主关键词 (一般在 5 个上下), 然后针对这些关键词进行优化, 包括关键词密度(Density), 相关度(Relavancy), 突出性(Prominency) 等等.
了解主要的搜索引擎
虽然搜索引擎有很多, 但是对网站流量起决定作用的就那么几个. 比如英文的主要有 Google,Yahoo,Bing 等; 中文的有百度, 搜狗, 有道等. 不同的搜索引擎对页面的抓取和索引, 排序的规则都不一样. 还要了解各搜索门户和搜索引擎之间的关系, 比如 AOL 网页搜索用的是 Google 的搜索技术, MSN 用的是 Bing 的技术.
主要的互联网目录
Open Directory 自身不是搜索引擎, 而是一个大型的网站目录, 他和搜索引擎的主要区别是网站内容的收集方式不同. 目录是人工编辑的, 主要收录网站主页; 搜索引擎是自动收集的, 除了主页外还抓取大量的内容页面.
按点击付费的搜索引擎
搜索引擎也需要生存, 随着互联网商务的越来越成熟, 收费的搜索引擎也开始大行其道. 最典型的有 Overture 和百度, 当然也包括 Google 的广告项目 Google Adwords. 越来越多的人通过搜索引擎的点击广告来定位商业网站, 这里面也大有优化和排名的学问, 你得学会用最少的广告投入获得最多的点击.
搜索引擎登录
网站做完了以后, 别躺在那里等着客人从天而降. 要让别人找到你, 最简单的办法就是将网站提交 (submit) 到搜索引擎. 如果你的是商业网站, 主要的搜索引擎和目录都会要求你付费来获得收录 (比如 Yahoo 要 299 美元), 但是好消息是(至少到目前为止) 最大的搜索引擎 Google 目前还是免费, 而且它主宰着 60%以上的搜索市场.
链接交换和链接广泛度(Link Popularity)
网页内容都是以超文本 (Hypertext) 的方式来互相链接的, 网站之间也是如此. 除了搜索引擎以外, 人们也每天通过不同网站之间的链接来 Surfing("冲浪"). 其它网站到你的网站的链接越多, 你也就会获得更多的访问量. 更重要的是, 你的网站的外部链接数越多, 会被搜索引擎认为它的重要性越大, 从而给你更高的排名.
合理的标签使用
17. 有哪项方式可以对一个 DOM 设置它的 CSS 样式?
外部样式表, 引入一个外部 CSS 文件
<link rel="stylesheet" href="style.css">
内部样式表, 将 CSS 代码放在 <head > 标签内部
- <head>
- //...
- <style>
- #div1 {
- background-color: red;
- }
- </style>
- </head>
内联样式, 将 CSS 样式直接定义在 HTML 元素内部
<div id="div1" style="background-color: red;"></div>
使用 JS 动态设置
直接设置 style 的属性 某些情况用这个设置 !important 值无效
element.style.height = '100px'
如果属性有'-'号, 就写成驼峰的形式(如 textAlign)
element.style.textAlign = 'center'
如果想保留 - 号, 就中括号的形式
element.style['text-align'] = 'center'
直接设置属性(只能用于某些属性, 相关样式会自动识别)
element.setAttribute("title", "提示")
设置 style 的属性
element.setAttribute('style', 'height: 100px !important');
使用 setProperty 如果要设置! important, 推荐用这种方法设置第三个参数
element.style.setProperty('height', '100px', 'important');
修改 class
设置 cssText
创建引入新的 CSS 样式
使用 addRule,insertRule
想了解更多 DOM 操作: 请点击查看我的另一篇博客: DOM 操作 ͝° 益 ° 就是这么吊!
18.CSS 都有哪些选择器?
在 CSS 中, 选择器是一种模式, 用于选择需要添加样式的元素. 选择器主要是用来确定 HTML 的树形结构中的 DOM 元素节点.
通配符选择器(所有浏览器支持)
通用选择器用 * 来表示, 用来选择所有元素,, 也可以选择某个元素下的所有元素;
- *{
- marigin: 0;
- padding: 0;
- font-size: 14px;
- }
- .demo * {
- width: 50px;
- height: 50px;
- }
类选择器 (用一个样式类名申明; 所有浏览器都支持类选择器)
- .demo{
- width: 50px;
- height: 50px;
- }
元素选择器(所有浏览器支持)
p{ color:red; }
ID 选择器(用 DOM 的 ID 申明; 所有浏览器都支持)
- #demo{
- color:red;
- }
群组选择器(利用逗号间隔, 比如 p,div,#a{ }; 所有浏览器都支持)
- p,li{
- color: blue;
- }
- .demo1,.demo2{
- color: #fff;
- }
派生选择器(通过依据元素在其位置的上下文关系来定义样式, 你可以使标记更加简洁.)
- <li>
- <strong>A</strong>
- <em>
- B
- <strong>C</strong>
- </em>
- </li>
- /* 后代选择器 */
- li strong {color:blue;}
- /* 子元素选择器 */
- h1> strong {color:red;}
- /* 相邻兄弟选择器 */
- strong + em {color:yellow}
派生选择器又包含: 后代选择器, 子元素选择器, 相邻兄弟选择器
属性选择器(属性选择器可以根据元素的属性及属性值来选择元素.)
- // 如果您希望把包含标题 (title) 的所有元素变为红色, 可以写作:
- *[title] {
- color:red;
- }
伪类选择器(a: hover, li:nth-child)
注意:
一般而言, 选择器越特殊, 它的优先级越高. 也就是选择器指向的越准确, 它的优先级就越高.
19.CSS 中可以通过哪些属性定义, 使得一个 DOM 元素不显示在浏览器可视范围内?
最基本的:
设置 display 属性为 none, 或者设置 visibility 属性为 hidden
技巧性:
设置宽高为 0, 设置透明度为 0, 设置 z-index 位置在 - 1000em
20. 超链接访问过后 hover 样式就不出现的问题是什么? 如何解决?
被点击访问过的超链接样式不再具有 hover 和 active 了
解决方法是改变 CSS 属性的排列顺序
关于 a 标签的四种状态排序问题, 有个简单好记的原则, 叫做 love hate 原则 L-V-H-A(link,visited,hover,active)
代码示例:
- <style>
- a:link{ background:red;}
- a:visited{background:green;}
- a:hover{background:blue;}
- a:action{background:white;}
- </style>
好好学习 才能吃香的喝辣的!_(¦3」∠)_
本文转载自: https://blog.csdn.net/weixin_40693643/article/details/104278435
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/interview/16554.html