大白话说前端JavaScript面试

￡神魔★判官ぃ 2023-01-14 11:57 121阅读 0赞

### 大白话说前端面试 ###

*  HTML和css部分。
 *   *  1、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？
     *  2、每个HTML文件里开头都有一个很重要的东西：Doctype，知道这是干什么的吗？
     *  3、Quirks模式是什么？他和Standards模式有什么区别？
     *  4、div+css的布局比较table有什么优点？
     *  5、img的alt与title有何异同？strong和em的异同？
     *  6、你能描述一下渐进增强和优雅降级之间的不同吗？
     *  7、为什么利用多个域名来存储网站资源会更有效？
     *  8、请谈一下你网页标准和标准制定机构重要性的理解。
     *  9、请描述一下cookie，sessionStorage和localStorage的区别？
     *  10、简述一下src与herf的区别
     *  11、说说网页制作会用到的图片格式有哪些？
     *  12、知道什么是微格式吗？谈谈理解，在前端构建中应该考虑微格式吗？
     *  13、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会缓存处理？
     *  14、一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
     *  15、你如何理解HTML结构的语义化？
     *  16、谈谈以前端角度触发做好SEO需要考虑什么？
     *  17、有哪些方式可以对一个DOM设置他的样式？
     *  18、CSS都有哪些选择器？
     *  19、CSS中可以通过哪些属性定义，是的一个DOM元素不显示？
     *  20、超链接访问后hover样式就不出现的问题是什么？如何解决？

# HTML和css部分。 #

## 1、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？ ##

*  IE：trident内核
 *  Firefox：gecko内核
 *  Safari：webkit 内核
 *  Opera：以前是presto内核 现在用Blink内核
 *  Chrome：BLink / webkit

## 2、每个HTML文件里开头都有一个很重要的东西：Doctype，知道这是干什么的吗？ ##

处于 < html> 标签之前，是为了告诉浏览器按照何种规范解析页面 HTML或XHTML

## 3、Quirks模式是什么？他和Standards模式有什么区别？ ##

Quirks 模式就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。

区别：总体有布局、样式解析和脚本执行三个方面的区别。

1.  如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。
2.  设置行内元素的高宽：在 Standards 模式下，给等行内元素设置 wdith 和 height 都 不会生效，而在 quirks 模式下，则会生效。
3.  设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如 果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
4.  margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平 居中，但在 quirks 模式下却会失效。

## 4、div+css的布局比较table有什么优点？ ##

1.  改版的时候更方便 只要该css文件。
2.  页面加载速度更快、结构化清晰、页面显示简洁。
3.  表现与结构相分离
4.  易于优化（SEO）搜索引擎更友好，排名更容易靠前。

## 5、img的alt与title有何异同？strong和em的异同？ ##

*  alt（alt text）：为不能显示图像时，用指定文字来替换。
 *  title（tool tip）：为设置该属性的元素提供建议性的信息。
 *  strong：粗体强调标签，加粗，表示内容的重要性
 *  em：斜体强调标签，倾斜，表示内容的强调性

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

**概念：**  
1、渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等功能的追加和改进。  
2、优雅降级：一开始就构建完整功能，然后再根据低版本浏览器进行兼容。

**区别：**  
  优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的功能一般的版本开始，再针对高级浏览器完善功能。

*  “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
 *  “渐进增强”观点则认为应关注于内容本身。

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

*  CDN缓存更方便。
 *  突破浏览器并发限制。
 *  节约cookie带宽。
 *  节约主域名的连接数，优化页面响应速度。
 *  防止不必要的安全问题。

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

网页标准和标准制定机构都是为了让web能够更长久的发展，开发者遵循统一的标准，降低开发难度，开发成本，SEO也更好做，也不会因为滥用代码导致各种BUG、安全问题。从而提高网站易用性。

## 9、请描述一下cookie，sessionStorage和localStorage的区别？ ##

1.  sessionStorage(session)中的数据只有在同一个会话中才能访问且当关闭会话后数据也随之销毁。
2.  sessionStorage是会话级别的存储，而localStorage是持久化的本地存储，除非主动删除数据。
3.  web Storage 的概念和cookie相似，区别是他是为了更大储存容量设计的。cookie大小为4k，Storage大小为5M
4.  cookie需要自己封装，Web Storage可以调用本身自带的方法。
5.  与服务器端的通信：cookie每次都会携带在http头中，web Storage仅在客户端保存。

## 10、简述一下src与herf的区别 ##

1.  src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
2.  src指向外部资源位置，直到将该资源加载、编译，执行完毕
3.  href指向网络资源所在位置，建立和当前元素或当前文档之间的链接。

## 11、说说网页制作会用到的图片格式有哪些？ ##

png-8, png-24, jpeg, gif, svg, webp

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新 技术，新鲜事物）

## 12、知道什么是微格式吗？谈谈理解，在前端构建中应该考虑微格式吗？ ##

*  微格式：是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用指定的特殊格式。
 *  优点： 将智能数据添加到网页上，让网页内容在搜索引擎结果界面可以显示额外的提示。

## 13、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会缓存处理？ ##

1.  DNS缓存。
2.  CDN缓存。
3.  浏览器缓存。
4.  服务器缓存。

## 14、一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 ##

1.  图片懒加载，
2.  如果为幻灯片、相册等，可以使用图片预加载技术，
3.  如果图片为css图片，可以使用CSSsprite，Iconfont，Base64等技术
4.  如果图片过大，可以使用特殊编码的图片，加载时先加载一张缩略图，提高用户提样

## 15、你如何理解HTML结构的语义化？ ##

HTML 结构语义化也就是标签语义化是让大家直观的通过标签(markup)和属性(ttribute)来知道其用途和作用。

**优点**

1.  结构的语义化可以使代码清晰易懂，一定程度上也做好了页面的SEO（搜索引擎优化）
2.  支持更多的设备。屏幕阅读器会完全根据你的标记来“读”你的网页。更好的支持浏览器的阅读模式等。
3.  便于团队开发和维护。

## 16、谈谈以前端角度触发做好SEO需要考虑什么？ ##

了解搜索引擎如何抓取网页和如何索引网页

主要考虑：

1.  维护网站，提高内容质量，保持更新
2.  网站结构布局优化：尽量简单、开门见山、提倡扁平化结构。
3.  控制首页链接数量
4.  导航优化
5.  控制页面大小
6.  适量的关键词和网页描述

## 17、有哪些方式可以对一个DOM设置他的样式？ ##

*  外部样式表，引入外部css文件
 *  内部样式表，将css代码放在< head>标签内部
 *  内联样式，将css样式直接定义在html元素内部

## 18、CSS都有哪些选择器？ ##

*  派生选择器（用 HTML 标签申明）
 *  id 选择器（用 DOM 的 ID 申明）
 *  类选择器（用一个样式类名申明）
 *  属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不- - 知道就算了） 除了前 3 种基本选择器，还有一些扩展选择器，
 *  包括 后代选择器（利用空格间隔，比如 div .a\{ \}）
 *  群组选择器（利用逗号间隔，比如 p,div,\#a\{ \}）

## 19、CSS中可以通过哪些属性定义，是的一个DOM元素不显示？ ##

1.  display ：none；
2.  visibility：hidden / 0
3.  宽高为零
4.  z-index:-10000

## 20、超链接访问后hover样式就不出现的问题是什么？如何解决？ ##

\*\*原因：\*\*被点击访问过的超链接样式不在具有hover和active了  
\*\*方案：\*\*改变 CSS 属性的 排列顺序: L-V-H-A（link,visited,hover,active）