【每日阅读】前端知识（四）

最新推荐文章于 2024-05-21 23:21:19 发布

可可鸭~

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量749

点赞数 1

分类专栏：前端每日阅读文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_43547255/article/details/131120068

版权

前端每日阅读专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、闭包

内部变量能够访问外部变量，但是外部变量无法访问内部变量叫做闭包.

2、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

Doctype是用来声明文档类型告诉浏览器如何解析当前页面的内容，
现代浏览器分为三种模式：标准模式（严格模式）、准标准模式（混杂模式）Almost
Standards模式，严格模式和混杂模式主要是根据浏览器是否能够正确解析页面的错误语法并识别
在严格模式中，浏览器啊会严格按照规范解析页面，对错容性差的语法报错，按照最新标准渲染，因此建议开发者按照严格模式开发
混合模式，浏览器会议一种类似于IE5的方式来解析页面，主要是为了保持旧网站的兼容性，但是意义不大，尽可能少用混杂模式开发.

3、HTML5为什么只需要写？

在 HTML 5 中，<!DOCTYPE> 的声明不再需要指定DTD（文档类型定义），而只需要写即可。这是因为HTML
5的语法比以往版本更简化，其中许多不再需要的语法元素被去除，标签名称也被统一为小写，这样就不需要指定DTD来严格确立文档类型了。

此外，HTML 5的设计目标之一是使得页面能够更易于书写和阅读、更加清晰，同时这也是为了方便开发者。因此，HTML 5 直接使用
作为文档类型声明，大大简化了前端开发的工作。
总之，HTML
5中的简化语法和标准化设计使得我们仅需要声明一个简单的文档类型即可，简化了开发过程并加快了网页的加载速度，同时还为未来Web技术的发展奠定了良好的基础。

4、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素
<a>:超链接
<span>文本容器
<i>斜体文本
<em>强调文本
<strong>加粗文本
<img>图像
<input>输入框

块级元素
<div>通用块级元素
<h1>~<h6>标题
<p>段落
<ul>无序
<ol>有序
<li>列表项
<table>表格
<from>表单

<br>：换行
<hr>：水平线
<img>：图像
<input>：文本输入框、单选框等
<link>：外部资源引入
<meta>：元数据信息
<area>：图像地图热点区域定义
<base>：基本链接地址

04、页面导入样式时，使用link和@import有什么区别？
页面中导入样式有两种导入方式一种是：link一种是@import
link是HTML的标签，通常用于在HTML中导入外部样式,

<link rel="stylesheet" type="text/css" href="style.css">

@import 是 CSS 提供的语法，通常用于在 CSS 中导入外部样式表，其语法如下：

<style>
  @import url(style.css);
</style>

需要注意的是，@import 必须写在 CSS 样式表的顶部，否则可能会影响页面的性能和渲染效果。并且，当使用 @import 导入 CSS
的时候，页面需要等到所有的 CSS 文件加载完毕后才会被渲染，因此会相应地影响页面的加载速度。

综上所述，link 和 @import 都是可以用于导入外部样式表的方式，但二者有不同的使用场景和特点。通常情况下，开发者应该优先选择
link 标签来导入 CSS 文件，因为它更符合 W3C 的标准，也能提高页面性能和渲染效果。

5、介绍一下你对浏览器内核的理解？

浏览器内核是指浏览器用来解析和渲染网页的核心部分，他负责HML、CSS和javaScript代码，将他们转化成页面元素，在不同浏览器中核心部分有所差异，因此呈现出不同效果。

6、常见的浏览器内核有哪些？

Trident

Trident 内核是 Microsoft 公司推出的浏览器内核，最初是为 IE 浏览器而开发的。这种内核被用于 IE6 到 IE11 版本的浏览器中，经过多年的演进，其对 CSS3 和 HTML5 的支持已经相当全面。

Gecko

Gecko 内核是 Mozilla 公司为 Firefox 浏览器开发的内核。与 Trident 相比，Gecko 更加注重标准化，因此对 HTML5 和 CSS3 的支持非常完善。此外，Gecko 还具备优秀的扩展性，可以通过插件和扩展来增强浏览器功能。

WebKit

WebKit 内核最初由苹果公司开发，被用于 Safari 浏览器。它是一种开源技术，并被 Chrome 和 Opera 等浏览器所采用。WebKit 内核可以称为浏览器内核中的佼佼者，因为它的渲染速度和性能非常出色。

Blink

Blink 内核是由 Google 公司基于 WebKit 开发的一种新型浏览器内核。自 Chrome 28 版本起，Google 将其作为 Chrome 浏览器的默认内核，取代了 WebKit。Blink 内核继承了 WebKit 的优良传统，同时也进行了许多改进和优化，使得它拥有更快的渲染速度和更优秀的性能。

总之，浏览器内核是浏览器的核心部分，直接影响着网页的渲染效果和性能。对于前端开发来说，需要熟悉不同浏览器内核的特点和差异，以便能够编写出兼容性更好的网页，并为用户提供更好的浏览体验。

7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？HTML5 是 HTML 标准的最新版本，引入了许多新特性和语法，同时也删除或替换了一些元素。以下是 HTML5 中一些主要的新特性和变化：

新标签

HTML5 引入了一些新的语义化标签，例如 header、footer、nav、section、article、aside 等，可以更好地描述文档结构和内容。

表单控件

HTML5 引入了一些新的表单控件，例如 date、time、email、url、search 等，使得开发者可以更方便地创建复杂的表单交互。

多媒体元素

HTML5 引入了 audio 和 video 元素，使得网页可以直接嵌入音频和视频资源，并支持多种格式的视频和音频文件。

Canvas 和 SVG

HTML5 引入了新的绘图标准 —— 画布（Canvas）和可缩放矢量图形（SVG），可以在网页中轻松绘制矢量图形和位图图像。

Web Storage 和 Web Workers

HTML5 引入了 Web Storage 和 Web Workers 技术，可以在浏览器端存储数据和进行多线程处理，提高了网页的性能和交互体验。

此外，HTML5 还增强了语义化标签的功能，允许自定义数据属性，支持新的媒体元素和事件等。

在删除或替换元素方面，HTML5 删除了一些不再使用的或过时的元素，例如 applet、basefont、dir、frame、frameset、noframes 和 isindex。

针对 HTML5 新标签的浏览器兼容问题，可以采用以下两种方式：

使用 Polyfill

Polyfill 是指一些可以模拟新特性的 JS 库，它们可以为那些不支持 HTML5 新标签的浏览器提供一些补丁。开发者可以根据需要选择合适的 Polyfill 库，并将其引入到网页中。

使用 HTML5 Shiv

HTML5 Shiv 是一款 JS 库，它可以让 IE 浏览器支持 HTML5 新标签。开发者可以将该库引入到 HTML 文档中，在老版本 IE 中就可以使用 HTML5 新标签了。

总之，HTML5 引入了许多新特性和变化，使得 Web 开发更加灵活、高效和语义化。在开发过程中，需要根据实际需求充分利用这些特性，并采用合适的兼容性解决方案，以确保网页能够在各种浏览器和设备上正常运行。

8、如何区分HTML和HTML5？

HTML5 是 HTML 标准的最新版本，相对于早期的 HTML 标准，HTML5 引入了很多新特性和标签，并提高了网页的语义化、交互性和性能。因此，有以下一些方面可以用来区分 HTML 和 HTML5：

语法标准

HTML5 相对于早期的 HTML 标准为文档类型定义（DTD）引入了一个新的声明方式 <!DOCTYPE html>，并允许省略标记的结束符（例如 <br>）。同时，HTML5 还引入了一些新的标签和属性，如 <header>、<nav>、<article>、<audio>、<video> 等。

语义化标签

HTML5 引入了更多的语义化标签，可以更好地描述网页内容和结构，如 <header>、<footer>、<nav>、<section>、<article> 等。这些标签使得网页更加易于阅读和理解，同时也有助于搜索引擎优化（SEO）。

API 支持

HTML5 引入了诸多新的 JavaScript API，如 Canvas、SVG、Web Storage、Web Workers 等，这些 API 可以帮助开发者更轻松地创建丰富的交互效果和 Web 应用程序。

浏览器支持

HTML5 标准发布后，各大主流浏览器（如 Chrome、Firefox、IE、Edge、Safari 等）均对 HTML5 进行了支持，使得开发者可以更广泛地应用新特性和标签。

总之，HTML5 是 HTML 标准的最新版本，相比于早期的 HTML 标准，HTML5 引入了更多的新特性和标签，提高了语义化、交互性和性能，并得到了广泛的浏览器支持。因此，通过对比这些方面，可以较为清晰地区分 HTML 和 HTML5。

9、简述一下你对HTML语义化的理解？

HTML 语义化是指使用恰当的标签、属性和结构来描述 HTML 文档中的内容和结构，使得文档更具有可读性、可访问性和可维护性。简单来说，就是让 HTML 文档的结构和内容具有良好的语义性，能够使得人和机器（如搜索引擎）更容易理解和解析网页的信息。

在实际开发中，HTML 语义化有以下的优点：

更好的 SEO

搜索引擎需要通过分析网页的结构和内容来判断它是否与用户的搜索意图相关，因此采用更具有语义化的 HTML 标签可以使得搜索引擎更好地理解页面的内容，从而提高网页的搜索排名。

更好的可访问性

通过使用更具有语义化的 HTML 标签，可以为用户提供更好的访问体验，特别是残障用户和阅读器用户。例如，合理使用<h1>~<h6> 标签可以使得屏幕阅读器更好地读出页面的内容，而无需依赖于 CSS 样式。

更易于维护和扩展

通过采用更具有语义化的 HTML 结构和标签，可以使得代码更易于阅读、修改和扩展。采用语义化的 HTML 结构不仅使得代码可读性更高，而且也有助于减少冗余代码和提高代码的可复用性。

更好的可读性

使用语义化的 HTML 标签可以让页面内容和结构更清晰易懂，也让其他开发者能够更轻松地理解和维护你的代码。

总之，HTML 语义化是一项非常重要的开发技巧，能够提高网页的可读性、可访问性、搜索引擎优化和代码维护性。在开发过程中，建议合理使用具有语义化的标签，同时注重代码的可读性和可维护性，以达到更好的开发效果。

10、HTML5的离线储存怎么使用，工作原理能不能解释一下？

HTML5 的离线存储是指通过使用 Cache Manifest 文件，让网页能够在用户离线状态下继续访问和使用。当用户在线时，浏览器会自动更新离线缓存，使其保持最新状态。

具体使用方法如下：

在 HTML 文档中，需要在头部声明 manifest 文件，并指定其路径

<!DOCTYPE html>
<html manifest="cache.manifest">
...
</html>

创建 cache.manifest 文件，指定需要离线缓存的文件清单，包括 HTML、CSS、JavaScript、图片等，每个文件需要占一行，以“/”开头，如下所示：

CACHE MANIFEST
# v1.0.0

CACHE:
/index.html
/style.css
/main.js
/logo.png

NETWORK:
*

FALLBACK:

将 cache.manifest 文件上传到服务器上，确保其能在网络上访问。

以上步骤完成后，用户在首次访问网站时，浏览器会下载 cache.manifest 文件，并根据文件清单将文件保存到本地缓存。如果用户在之后离线访问该网站，浏览器会自动加载本地缓存中的文件，而无需从服务器上下载文件，从而实现了离线访问。

至于 HTML5 离线存储的原理，主要是通过使用 Cache Manifest 文件来定义需要缓存的资源清单，浏览器将该清单解析后，将其保存到本地。在用户访问网页时，浏览器会检查清单文件是否有更新，如果有更新则会重新下载最新的资源，否则就会从本地缓存中读取已经保存好的资源，从而实现了离线访问。

在使用 HTML5 离线存储时，需要注意缓存清单的更新、控制缓存的大小和清空缓存等问题，以确保缓存的有效性和可靠性。

01、JavaScript 中 this 是如何工作的

在 JavaScript 中，this 是一个指向当前执行上下文的关键字。具体来说，它取决于函数是如何被调用的。

当函数作为对象的方法进行调用时，this 指向该对象：

const obj = {
  name: "John",
  sayName() {
    console.log(this.name);
  }
};

obj.sayName(); // "John"

当函数独立调用时，this 指向全局对象，在浏览器环境中是 window 对象，在 Node.js 环境中是 global 对象：

function sayName() {
  console.log(this.name);
}

const obj1 = { name: "John", sayName };
const obj2 = { name: "Alice", sayName };

// 独立调用
sayName(); // undefined

// 作为对象方法调用
obj1.sayName(); // "John"
obj2.sayName(); // "Alice"

02、请解释原型继承的原理。

在 JavaScript 中，对象之间的继承是通过原型实现的。每个对象都有一个内部属性
[[Prototype]]，它指向该对象的原型。当我们访问一个对象的属性时，如果该属性不存在于该对象本身，JavaScript
引擎会沿着该对象的原型链向上查找，直到找到该属性或到达原型链的末端（即
Object.prototype）为止。如果最终还没有找到该属性，则返回 undefined。

const person = {
  name: "John",
  sayName() {
    console.log(this.name);
  }
};

const student = Object.create(person);
student.major = "Computer Science";
student.sayMajor = function() {
  console.log(this.major);
};

student.sayName();   // "John"
student.sayMajor();  // "Computer Science"

04、.call 和 .apply 的区别是什么？
在 JavaScript 中，call 和 apply 方法都可以用来调用一个函数，并且可以指定函数中的 this 指向和传递给函数的参数列表。

它们的主要区别在于如何传递参数：

05、请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？

06、请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？

07、请解释变量声明提升 (hoisting)。

08、什么是 “use strict”; ? 使用它的好处和坏处分别是什么？

09、什么是事件循环 (event loop)？

10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别

11、回流和重绘都是指浏览器在渲染网页时的过程。

回流（reflow）是指浏览器重新计算并绘制部分或全部文档内容的过程。当 DOM
树发生变化，例如改变元素的位置、大小等属性时，浏览器需要重新计算元素的位置及大小，并重新绘制到页面上，这个过程就是回流。由于回流会导致页面的重新布局和绘制，因此会比较耗费资源，尤其是针对大量的
DOM 元素操作。

重绘（repaint）是指浏览器根据新的样式属性值重新绘制已经存在的元素。当元素的外观样式（如背景色，字体颜色，边框样式等）发生变化时，将会触发元素的重绘。重绘的代价相对比较小，因为它不会涉及到DOM结构变化，只需要重新绘制已经存在的元素即可。

为了优化页面性能，减少回流和重绘次数可以提高页面的渲染速度。一些实现优化的方法包括：合并和批量处理 DOM 操作，使用 CSS3 的 transform 和 opacity 变换代替 position、width、height 和 display 等属性的修改，以及使用虚拟滚动等技术。

原生js痛点

用dom的API去操作dom，繁琐且效率低用js直接操作dom，浏览器会进行大量的回流和重绘
原生js没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能

1.css实现自适应宽高

img{
	max-height:100%;
	max-width:100%;
}

12.前端页面有哪三层构成，分别是什么？作用是什么

前端页面一般包含以下三层构成：

结构层（HTML）：用于定义页面的结构和内容，包括文本、图像、表格等元素。

样式层（CSS）：用于控制页面的呈现效果，包括字体、颜色、大小、布局等样式属性。

行为层（JavaScript）：用于实现页面的交互功能，包括用户输入、数据验证、操作DOM等。

它们各自的作用如下:

结构层：在网页中承载内容信息，负责制定网页的整体结构，使网页内容按照特定的层次结构排列。HTML 中使用标签定义各种元素，比如段落、标题、链接等。

样式层：在网页中承载样式和视觉效果，为网页提供美感和易用性，使网页内容更加醒目、易读，并提高用户的使用体验。CSS 中使用选择器和属性构建特定元素的样式，例如文本颜色、背景颜色、边框样式等。

行为层：在网页中承载用户交互和动态效果，能够根据不同的用户行为和事件对网页进行响应，从而实现更加丰富的体验。JavaScript 可以通过事件监听、操作 DOM 等方式实现互动效果，例如表单验证、弹出提示框、网页特效等。

三者的相互作用则构成了前端页面的结构、样式和交互。通过它们的协同作用，前端开发人员可以创建出富有表现力且功能丰富的网站和应用程序。

13.请用CSS来定义`<p>`标签，要求实现以下效果：字体颜色再IE6下为黑色，IE7下为红色，IE8下为绿色，其他浏览器下为黄色。

<style type="text/css">
		/* IE6 */
		<!--[if IE 6]>
			p {
				color: black;
			}
		<![endif]-->
		
		/* IE7 */
		<!--[if IE 7]>
			p {
				color: red;
			}
		<![endif]-->
		
		/* IE8 */
		<!--[if IE 8]>
			p {
				color: green;
			}
		<![endif]-->
		
		/* 其他浏览器 */
		:not(*:root) p {
			color: yellow;
		}
	</style>

14、谈谈你对SEO的理解

SEO（Search Engine Optimization，搜索引擎优化）指的是通过对网站的内部调整和外部推广等手段，提高网站在搜索引擎中的自然排名，提升网站的流量和曝光度的过程。

对于一个网站而言，SEO 是非常重要的，它能够帮助网站获得更多的自然流量，提高品牌知名度、转化率和盈利能力。具体来说，SEO 的主要目标包括以下几个方面：

提高排名：通过优化关键词、网站结构、内容质量等因素，提升网站在搜索引擎中的自然排名。

提高流量：通过提高排名和吸引目标用户的访问，增加网站的流量和曝光度。

提高转化率：通过优化网站内容和交互体验，提高用户对网站的满意度和忠诚度，从而实现更高的转化率。

增强品牌知名度：通过优化搜索结果和各种线上线下推广手段，提升品牌知名度和美誉度。

为了实现以上目标，SEO 可以采取一系列的策略和技术，包括但不限于：

关键词优化：通过对关键词的研究和策略优化，提升网站在搜索引擎中的关键词排名。

内部链接优化：优化网站内部链接结构，提升网站的权重和流量分配。

外部链接建设：通过各种手段获取高质量的外部链接，提升网站的权重和信任度。

内容优化：提高网站内容的质量和用户体验，包括文字、图片、视频等。

网站结构优化：优化网站代码和结构，提升网站的速度和可访问性。

综上所述，SEO 是一个长期而复杂的过程，需要综合运用各种技术和策略，才能够实现最好的效果。同时，由于搜索引擎算法的不断调整和改变，SEO 也是一个不断变化和更新的领域。

15.说说你对盒子模型的理解

盒子模型（Box Model）是指在网页排版中，每个元素都被看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距这四个部分。

内容区域：元素的实际内容，比如文本、图片等。
内边距（padding）：元素周围的空白区域，指定内边距可以使内容与边框之间有一定的距离。
边框（border）：包围元素的线条，用于分隔元素和其他元素的边界。
外边距（margin）：元素与其他元素之间的空白区域。

通过设置元素的宽度、高度、内边距、边框和外边距等属性来控制盒子的大小和位置，从而决定元素在页面上的显示效果。盒子模型在网页排版中具有非常重要的作用，可以帮助我们实现更准确、精细的页面布局。

15.设计一个方案，在浏览器中点击一个button，然后能在你的前端项目源码文件中增加一个index.js文件，如何实现？提供思路这题就是典型的大厂二面题，题目简单一看就明白，但是真要实现能写一条龙出来。

大家都知道，因为安全限制，浏览器是不能直接操作你电脑里的文件系统的，但是这题却让你点击一个button，能在你的前端项目代码文件里生成一个文件，那怎么实现呢？
其实你如果看了很多的跨平台包的核心core文件，你就会发现他们实现原理都类似，都是约定好一个规范，然后实现一个bridge桥接去进行权限穿透。要写出来就太多了，大家可以自行去研究一下。

还有一个思路，涉及到npm + cli + node
server去实现。首先实现一个npm插件，在bin里注册一个命令，当你在前端项目中npm run
start后，调用这个命令，通过这个命令起一个node-dev-server，然后通过http请求去让这个node-dev-server去创建index.js文件。

16、如果本地git的A分支被误删了， A分支代码没有被push到远程，如何找到之前A的提交记录和代码如果本地A分支的代码还未被push到远程仓库，并且本地A分支已经被误删，可以通过以下步骤找到之前A的提交记录和代码：

查看本地仓库的所有分支，确认A分支是否真的被删除

git branch

如果A分支被删除，可以使用以下命令恢复A分支

git reflog
git branch A

其中是A分支最后一次提交的哈希值，可以在reflog中进行查找。

在A分支被删除之前，如果已经进行了其他的提交操作，可以使用以下命令查看所有提交历史记录

git log --all

如果需要找回A分支最后一次提交的代码，可以使用以下命令查看A分支最后一次提交的修改内容

git diff ~

其中是A分支最后一次提交的哈希值，~表示该提交的父级提交。

如果需要将查找到的A分支最后一次提交的代码恢复并保存到本地仓库中，可以使用以下命令

git checkout -b A

其中是A分支最后一次提交的哈希值。

以上就是恢复本地被误删分支代码的详细步骤，需要注意的是，如果本地A分支的代码已经被push到远程仓库，需要结合Git的协作流程和常用命令进行操作。实际操作中也可以使用一些Git脚本或者可视化工具，提高操作效率和方便性。