前端常见问题

一、<!DOCTYPE html>作用

<!DOCTYPE>是html文档的第一行,用于声明文档的类型,它会告诉浏览器要用哪一种HTML规范来渲染文档,确保正确渲染页面。

二、src与 href 的区别

(一)、请求资源类型的不同

在请求src资源时,要先将其指向的资源下载并且应用到文档中

href表示超文本引用,用于建立当前元素和href引用资源的链接

(二)、作用结果不同

src会替换当前元素自身内容:如下

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="demo.js">
        console.log("hello");
    </script>
</body>

</html>
javascript 复制代码
console.log("hello world!");

结果:

href主要是用于当前元素和引用资源之间建立一种联系,不会替换当前内容(link a)

(三)、浏览器解析方式不同

当浏览器解析到src时,会暂停对其他资源的处理,直到src指向的资源加载、编译、执行完毕,才会继续对其他资源的处理;

当浏览器解析到href时,并不会停止对其他资源的处理。

三、主流浏览器得内核介绍

内核主要作用是什么:对页面进行渲染

  • Chromium/Blink‌:由谷歌开发的内核,是目前最为流行的浏览器内核之一,包括谷歌Chrome、Microsoft Edge、Opera等。Chromium/Blink内核的特点包括渲染速度快、安全性高、省电省流量和良好的Web标准兼容性。

  • Gecko ‌:由Mozilla基金会开发的内核,主要用于Firefox浏览器。Gecko内核的特点包括支持Web标准、高速渲染、安全性和可定制性。

  • WebKit‌:由苹果公司开发的内核,最初是为Safari浏览器设计的,也被用于其他浏览器,如UC浏览器、360浏览器等。WebKit的特点包括渲染速度较快、高效命中缓存、能力可扩展和高度兼容性。

  • Trident‌:由Microsoft开发的内核,曾被用于Internet Explorer浏览器,目前已被Edge采用Chromium/Blink内核代替。Trident内核的特点包括兼容性、安全性、引入ActiveX和渲染速度较慢。

  • Presto ‌:由Opera Software开发的内核,曾被用于Opera浏览器,目前已被Opera采用Chromium/Blink内核代替。Presto的特点包括渲染速度较快、兼容性好、高度可定制性和安全性好。

四、什么是BFC

‌BFC的全称是Block Formatting Context,即块格式化上下文。‌这是一个CSS中的概念,它决定了如何渲染块级盒子,并且规定了内部盒子如何与BFC外部的盒子及其他元素交互。BFC是一个隔离的独立容器,容器里的元素不会影响到容器外部的元素。通过设置某些属性,如overflow: hidden;,可以创建一个新的BFC,从而改变元素的布局规则,解决父元素高度塌陷等问题,避免高度塌陷问题的发生。BFC的应用包括自适应两栏、三栏的布局,清除内部浮动,以及利用BFC消除margin重叠等‌。

其实就是独立渲染区域

五、原型和原型链

  • 原型 ‌:在JavaScript中,每个构造函数都有一个prototype属性,这个属性是一个指向原型对象的指针。原型对象包含了可以由该构造函数创建的所有对象的共享属性和方法。当创建一个新对象时,这个新对象会从其构造函数的prototype属性继承属性和方法。这意味着,通过修改原型,可以为所有对象实例添加或修改共享的方法或属性。

  • 原型链 ‌:当试图访问一个对象的属性时,JavaScript会首先检查这个对象自身是否有这个属性。如果没有找到,那么JavaScript会转向这个对象的原型对象查找该属性。如果原型对象也没有这个属性,会继续查找原型的原型,这个过程会一直持续下去,直到找到属性或者达到原型链的末端(即Object.prototype.__proto__null)。这种查找机制形成了一个链式结构,被称为原型链。

六、深浅拷贝

  • 浅拷贝‌:只是复制了源对象的引用,而不是对象本身的内容。如果源对象包含嵌套的对象或数组,那么这些嵌套的对象或数组的引用也会被复制,但嵌套的对象或数组的内容仍然是共享的。这意味着,如果你修改了浅拷贝后的对象或数组中的嵌套元素,原始对象或数组中的相应元素也会被修改,因为它们实际上指向的是同一个内存地址。浅拷贝适用于基本数据类型(如数字、字符串等)和简单的数据结构,因为它复制的是引用而不是实际的内容。

  • 深拷贝‌:则是递归地复制源对象的所有内容,包括嵌套的对象或数组。深拷贝会创建一个全新的对象或数组,其中的元素与原始对象或数组完全独立,不共享任何内存地址。这意味着,无论你如何修改深拷贝后的对象或数组中的内容,原始对象或数组都不会受到影响。深拷贝适用于需要完全独立副本的场景,特别是当对象或数组包含复杂的数据结构时。

浅拷贝通常用于简单的数据结构复制,如基本数据类型或一层嵌套的对象或数组。而深拷贝则适用于需要完全独立副本的复杂数据结构,如多层嵌套的对象或数组。选择使用哪种拷贝方式取决于具体的需求和数据结构的复杂性‌

相关推荐
醉の虾8 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
一直学习永不止步12 分钟前
LeetCode题练习与总结:最长回文串--409
java·数据结构·算法·leetcode·字符串·贪心·哈希表
张小小大智慧17 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm26 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep70139 分钟前
第8章利用CSS制作导航菜单
前端·css
hummhumm43 分钟前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
Rstln1 小时前
【DP】个人练习-Leetcode-2019. The Score of Students Solving Math Expression
算法·leetcode·职场和发展
芜湖_1 小时前
【山大909算法题】2014-T1
算法·c·单链表
珹洺1 小时前
C语言数据结构——详细讲解 双链表
c语言·开发语言·网络·数据结构·c++·算法·leetcode
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue