前端面试题第一季

最新推荐文章于 2024-07-14 03:07:07 发布

Web_front

最新推荐文章于 2024-07-14 03:07:07 发布

阅读量177

点赞数 2

分类专栏：前端面试题文章标签：面试

本文链接：https://blog.csdn.net/Web_front/article/details/103819806

版权

前端面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. JS面试题

1.1 javascript的原始类型由哪些

boolean
null
undefined
number
string
symbol

原始类型存储的都是值，是没有函数可以调用的

给一些原始数据类型调用方法的时候,js 给这些原始数据类型隐式转换了，所以有一些原始数据类型可以使用方法，但是它在使用这些方法的时候已经不是原始类型了

1.2 typeof和instanceof的区别

typeof 可以用来判断原始数据类型的基本类型

除了null，其他的原始类型都可以正确的判断出来，但是typeof 在判断对象的时候，除了函数可以正确的判断以外，其他的数据类型都是无法正确判断的，返回结果都是object

instanceof是通过原型链的方式判断数据类型的

所以instanceof可以正确的判断对象数据类型，缺点就是无法准确的判断原始数据类型

1.3 js中的哪些数据是false

undefined、null、false、NaN、’’、0、-0

1.4 ===和 == 的区别

在使用进行比较时，如果双方类型不一样，就会进行类型转换，也就是只判断值是否相等
===，就是判断二者的数据和类型是否相同

2. HTML+CSS 面试题

2.1 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident 内核
Firefox： gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit， Google 与 Opera Software 共同开发)

2.1 Doctype

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

声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏

览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

2.2 div+css 的布局较 table 布局有什么优点？

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

2.3 img 的 alt 与 title 有何异同？ strong 与 em 的异同

a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA）， alt 属性用来指定替换文字。
替换文字的语言由 lang 属性指定。 (在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

2.4 简述一下 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 方法

2.5 知道的网页制作会用到的图片格式有哪些？

png-8， png-24， jpeg， gif， svg

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

科普一下 Webp： WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。 Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下， WebP 格式图像的体积要比 JPEG 格式图像小 40%

2.6 你如何理解 HTML 结构的语义化？（大概能说出几点即可）

去掉或样式丢失的时候能让页面呈现清晰的结构：

html 本身是没有表现的，我们看到例如 h1 是粗体，字体大小 2em，加粗； strong是加粗的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达 html 的语义，可以说浏览器的默认样式和语义化的 HTML 结构是不可分割的。

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读” 你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出” 你的单词,而不是试着去对它完整发音.

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对 CSS 的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备） .例如,一部手机可以选择使一段标记了标题的文字以粗体显示. 而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客” ,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后. 除了提升易用性外,语义标记有利于正确使用 CSS 和 JavaScript,因为其本身提供了许多“钩钩” 来应用页面的样式与行为.

SEO 主要还是靠你网站的内容和外部链接的。

便于团队开发和维护

W3C 给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发

2.7 设置 CSS 样式的几种方式

外部样式表，引入一个外部 css 文件
内部样式表，将 css 代码放在标签内部
内联样式，将 css 样式直接定义在 HTML 元素内部

2.8 CSS 都有哪些选择器？

派生选择器（用 HTML 标签申明）

id 选择器（用 DOM 的 ID 申明）

类选择器（用一个样式类名申明）

属性选择器（用 DOM 的属性申明，属于 CSS2， IE6 不支持，不常用，不知道就算了）

除了前 3 种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如 div .a{ }）
群组选择器（利用逗号间隔，比如 p,div,#a{ }）
那么问题来了， CSS 选择器的优先级是怎么样定义的？

2.9 CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内最基本的：

设置 display 属性为 none，或者设置 visibility 属性为 hidden

技巧性：

设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

2.10 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？答案：

<input> 、 <img> 、 <button> 、 <texterea> 、 <label>。

2.11 display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后， HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失” ;而使用 visibility:hidden 属性后， HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

3. 浏览器渲染机制(了解即可)

浏览器请求到html和css之后是如何对他们进行处理的

当浏览器拿到html之后，首先它是不认识这些东西的，所以它首先对这些html字符串进行词法分析，将其转换成标记（Token）
下一步就是将生成的标记转换成节点(Node)，最后将这些几点根据不同的关系构建成一颗Dom 树
当遇到css的时候，就开始绘制样式树，绘制样式树的时候跟结构树差不多，都是现将字符串转换成标记再转换为节点，然后构建CSSOM 树（DOM
树也叫结构树，CSSOM树也叫样式树）
当两棵树都绘制好之后，就开始生成渲染树，生成渲染树的过程非常消耗性能，具体来说
1、每次添加新的样式，都会造成部分结构树的重新渲染
2、每一个节点的display:none，都不会渲染该节点
3、m每一次重新渲染都会递归所有的DOM 树和 CSSOM 树

页面渲染完成之后，如果再对页面的样式或者结构修改的时候页面一般会发生两种情况