前端面试与学习

Posted 2021-11-03 coder_lbw

前端面试

• 前言
• 一、HTML和CSS
• • • 1、HTML5有那些新特性？
    • 2、如何理解HTML结构的语义化？
    • 3、谈谈从前端的角度出发做好SEO需要考虑什么？
    • 4、CSS中link和@import的区别是？
    • 5、为什么要初始化样式？
    • 6、实现元素居中
    • 7、通过css实现一个三角形，并且鼠标移入时能旋转
    • 8、如何实现浏览器内多个标签之间的通信？
    • 9、简述一下src与href的区别？
    • 10、浏览器是怎么渲染页面的？
    • 11、Canvas和SVG图形的区别是什么？
    • 12、CSS的权重和优先级
    • 13、圣杯布局和双飞翼布局
    • 14、BFC
    • 15、清除浮动的方法
    • 16、CSS min-width/height和max-width/height
    • 17、幽灵空白节点
    • 18、
• 二、JavaScript基础
• • • 1、
• 三、web开发
• • • 1、谈谈降低页面加载时间的方法

---

前言

作为前端小小的一员，在学习的过程中记录下一些重要、关键的知识点，有自己总结一些难点，也有一些前端面试高频知识考点，有助于我复习的同时也希望能帮到大家，让我们一起学习一起成长，一起拿offer！

---

一、html和CSS

1、HTML5有那些新特性？

（1）HTML4 规定了三种声明方式，分别是：严格模式、过渡模式 和 框架集模式；而HTML5因为不是SGML的子集，只需要<!DOCTYPE>就可以了

（2）语义化更好的内容标签。header、footer、article、aside、nav等

（3）音频、视频 API(audio,video)

（4）表单控件：HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• ime
• url
• week

（5）5个API-本地存储，长期存储数据的localStorage，比较常用，临时存储的 sessionStorage，浏览器关闭后自动删除，实际工作中使用的场景不多。

（6）其他还有Canvas画布、Geolocation地理：地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可、拖拽释放、Web Wordker等·。

2、如何理解HTML结构的语义化？

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

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

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对 它完整发音.

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

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

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

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其 宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

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

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

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

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

3、谈谈从前端的角度出发做好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（“冲浪”）。其它网站到你的 网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多， 会被搜索引擎认为它的重要性越大，从而给你更高的排名。

4、CSS中link和@import的区别是？

Link属于 html 标签，而@import是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加 载引用的 CSS
@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
故一般来说使用link更快更安全

5、为什么要初始化样式？

由于浏览器的兼容问题，不同浏览器对标签的默认样式值不同，若不初始化会照成不同浏览器之间的显示差异
但是初始化css会对搜索引擎优化造成小影响

6、实现元素居中

两种实现方法，第一种简单快捷通过设置外层盒子flex布局，然后设置justify-content：center; 实现横向居中（默认水平居中），align-iten: center;实现纵向居中（默认即垂直居中）。

第二种即通过定位来实现，注意外层position设置为relative内层的absolute才管用，设置完相应的偏移值后别忘了平移一下，将内盒子自身的宽高算进去。

		.outer { 
			width: 300px;
			height: 300px;
			border: 1px solid red;
			background-color: red;
/* 			display: flex;
			justify-content: center;
			align-items: center; */
			position: relative;
		}
				
		.inner { 
			width: 150px;
			height: 150px;
			background: blue; 
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

7、通过css实现一个三角形，并且鼠标移入时能旋转

注意实现旋转的时候通过transform-origin设置旋转中心。

		.box {
			margin: 0 auto;
			width: 0;
			height: 0;
			border-top: 100px solid transparent;
			border-bottom: 100px solid transparent;
			border-left: 100px solid greenyellow;
			transform-origin: 0% 50%; /* 这个不能放在下面不然会乱 ->*/
			transition: transform 0.5s;
		}
		.box:hover {
			transform: rotate(90deg);	
		}

8、如何实现浏览器内多个标签之间的通信？

调用 localstorge、cookies 等本地存储方式:

• 在 B 页面中可以使用 window.opener 获得 A 页面的 window 句柄，使用该句柄即可调用 A 页面中的对象，函数等。
  例如 A 页面定义 js 函数 onClosePageB，在 B 页面可以用 window.opener.onClosePageB 来进行回调。
• 使用 window.showModalDialog(sURL [, vArguments] [,sFeatures])打开新窗口。 其中vArguments 参数可以用来向对话框传递参数。传递的参数类型不限，包括数组、函数等。对话框通过window.dialogArguments来取得传递进来的参数。
• 如果是支持 HTML5 的话，建议用本地存储 (local storage)，它支持一个事件方法window.onstorage，只要其中一个窗口修改了本地存储，其他同源窗口会触发这个事件。
  
  

9、简述一下src与href的区别？

• src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。
• src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素
• 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底部⽽不是头部
• href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不是使⽤ @import ⽅式
  
  

10、浏览器是怎么渲染页面的？

11、Canvas和SVG图形的区别是什么？

• Canvas 和 SVG 都可以在浏览器上绘制图形。

• SVG Canvas 绘制后记忆，换句话说任何使用 SVG 绘制的形状都能被记忆和操作，浏览器可以再次显示 Canvas 则是绘制后忘记，一旦绘制完成你就不能访问像素和操作它 SVG 对于创建图形例如 CAD 软件是良好的，一旦东西绘制，用户就想去操作它 Canvas 则用于绘制和遗忘类似动漫和游戏的场画。

• 为了之后的操作，SVG 需要记录坐标，所以比较缓慢。

• 因为没有记住以后事情的任务，所以 Canvas 更快。

• SVG 并不属于 html5 专有内容，在 html5 之前就有 SVG。
  SVG 文件的扩展名是”.svg”。
  SVG 绘制的图像在图片质量不下降的情况下被放大。
  SVG 图像经常在网页中制作小图标和一些动态效果图

12、CSS的权重和优先级

权重

• 从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0

CSS的伪类选择器有 :hover、:active、:focus等，伪元素选择器有::first-letter、::before、::after等，具体可以看这篇文章

优先级

• 权重相同，写在后面的覆盖前面的
• 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

13、圣杯布局和双飞翼布局

这两个三列布局的方式是大厂的高频考点，不只是要能实现，还要知道这两者实现的差异。这篇博客清楚的介绍了这两者的概念、实现过程和他们的区别。

14、BFC

BFC（Block Formatting Context）块级格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件：

1. 浮动元素，float 除 none 以外的值
2. 定位元素，position（absolute，fixed）
3. display 为以下其中之一的值 inline-block，table-cell，table-caption
4. overflow 除了 visible 以外的值（hidden，auto，scroll）
5. HTML 就是一个 BFC

BFC 的特性：

1. 内部的 Box 会在垂直方向上一个接一个的放置。
2. 垂直方向上的距离由 margin 决定
3. BFC 的区域不会与 float 的元素区域重叠，利用此特性可以实现两列布局，左边固定宽度，右边自适应
4. 计算BFC 的高度时，浮动元素也参与计算
5. BFC 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

使用BFC可以解决margin塌陷问题、清除float浮动影响

15、清除浮动的方法

为什么需要清除浮动？
不清楚浮动会发送高度塌陷，当父元素没有设置高度而子元素设置了浮动时，子元素脱离正常的文档流，父元素高度自适应而塌陷。

解决方法：

1. 添加空div法：在浮动的元素后面添加一个空的idv并设置css样式为

.clear{
        clear: both;
        overflow: hidden;
    }

该方法通俗易懂、操作方便，但是添加了无意义的标签，不利于结构化。

2. 给浮动父元素设置高度
3. 父级元素添加overflow: hidden;，可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

该方法 简单、代码少、但是内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

4. after伪类 清除浮动法（现在主流方法，推荐使用）

 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

16、CSS min-width/height和max-width/height

虽然在MDN和W3C的文档上显示的min-width/min-height初始值为0，但是在所有浏览器中的min-width/min-height初始值都是auto。

document.body.style.minWidth;
// auto

注意： 这四个属性权重是超越!important,超越最大的

超越!important指的是max-width会覆盖width的设置，不管width是行内样式还是!important

<img src="1.ipg" style="width:480px !important;">

img {
	max-width: 256px;
}
/* 最终图片的大小是256px */

超越最大指的是min-width覆盖max-width，当像下面这样设计时：

.container {
	min-width: 1400px;
	max-width: 1200px;
}

最终的宽度最少是1400px，即min-width覆盖了max-heigth。

17、幽灵空白节点

幽灵空白节点是CSS世界的作者对内联元素的所有解析和渲染表现就如同每个行框盒子的前面都有一个空白节点一样现象的称呼。

div {
	background-color: aqua;
}
span {
	display: inline-block;
}

<div><span></span></div>

上面的CSS和HTML代码的结果如下：

为什么内部span元素的宽高明明是0，标签之间也没有换行符，此div标签的高度并不为0？原因就是存在幽灵空白节点 ——即在span元素的前面还有一个宽度为0的空白字符。

规范中有提到这个现象，幽灵空白节点实际上也是一个盒子，不过是假象盒，名叫strut，中文翻译为支柱，是一个存在于行框盒子前面，同时具有该元素的字体和行高属性的0宽度的内联盒。

规范中原文如下：

     Each line box starts with a zero-width inline box 
 with the element's font and line height properties. We
 call that imaginary box a "strut".

18、

二、JavaScript基础

1、

三、web开发

1、谈谈降低页面加载时间的方法

1、压缩 css、js 文件
2、合并 js、css 文件，减少 http 请求
3、外部 js、css 文件放在最底下
4、减少 dom 操作，尽可能用变量替代不必要的 dom 操作

更多精彩使用内容后续持续更新

我的世界
我的世界
我的世界
我的世界