0基础学前端 day7

news2024/9/30 22:02:46

大家好,欢迎来到无限大的频道

今天继续带领大家来了解前端的知识,深入了解互联网和浏览器背后的技术。

历史背景

互联网的起源可以追溯到20世纪60年代的ARPANET项目,作为研究机构之间的通信网络。最初的网页浏览器由Tim Berners-Lee于1990年发明,这标志着万维网的诞生。自那时起,浏览器在速度、功能和安全性方面不断演进,以满足用户不断变化的需求和互联网的飞速发展。
在这里插入图片描述

技术趋势

现代互联网和浏览器技术正在快速发展,比如WebAssembly,这项技术通过允许使用诸如C++等语言编写高性能代码来提升网页性能。渐进式Web应用(PWA)提供接近原生应用的用户体验,支持离线功能和本地存储。而HTTP/3是一种基于QUIC协议的新型HTTP协议,具有更高效的数据传输和更快的连接建立速度,使得网页加载速度更快、更可靠。

一、互联网

在当今的数字时代,互联网已成为我们日常生活的支柱。但是,你是否深入思考过这个庞大的网络是如何运作的呢?在本部分,我们将探讨互联网的本质、运作机制,以及关键技术如HTTP/HTTPS、DNS和CDN。

1. 什么是互联网

互联网是一个全球性的信息基础设施,连接了世界各地的计算机网络,是一个庞大且复杂的计算机网络系统。它允许用户以多种方式进行通信和数据交换,包括电子邮件、社交媒体平台、网络购物、视频会议以及在线教育等应用。互联网通过提供开放访问的信息资源和服务,极大地影响了社会、经济和文化。
在这里插入图片描述

2. 互联网如何运作

互联网的运作依赖于TCP/IP协议栈,这是确保全球数十亿台设备能够在网络上进行可靠通信的基础。路由器和交换机是关键网络设备,负责在不同网络之间转发数据包。具体流程包括将数据分割成数据包,通过IP地址在网络中路由传输,最后重新组合成原始信息。此外,互联网服务供应商(ISP)在用户和互联网之间提供接入服务。

实例说明

例如,当你发送一封电子邮件时,其内容被分割成多个数据包,这些数据包可能沿不同路径传输,以确保在网络拥堵时信息仍能够传递。最终,在收件人的设备上,这些数据包被正确地重新组装成原始邮件。

3. 什么是HTTP/HTTPS

HTTP(超文本传输协议)和HTTPS(安全超文本传输协议)是互联网上使用最广泛的协议。它们专注于如何从Web服务器传输网页到用户浏览器。

  • HTTP:是一种无状态的协议,意味着每一对请求和响应是独立的。这使得HTTP简单和快速,但也容易受到攻击,因为数据在传输过程中未加密。

  • HTTPS:是在HTTP的基础上增加SSL/TLS加密层,以实现数据传输的安全性。通过HTTPS传输的数据是加密的,保证了数据的完整性和隐私性,这也是为什么大多数网站都采用HTTPS的原因。

总的来说,HTTP(超文本传输协议)是互联网的基本通信协议,主要用于传输网页数据,包括HTML文件、图像、音视频等。 HTTPS(安全超文本传输协议)则是在HTTP的基础上加入了SSL/TLS加密层,保护数据传输的安全性,防止数据被篡改或窃听。这个加密层保证了用户在与网站交互时的隐私和数据安全。

实例说明

假设你在网上银行进行交易,HTTPS确保你的个人和财务信息(如登录凭证和银行账户)以加密形式传输,防止数据被恶意网络爬虫截获。

4. DNS原理是什么

DNS(域名系统)是互联网的重要组成部分,它的作用是将用户输入的域名(如www.example.com)转换为机器可以理解的IP地址(如192.0.2.1)。

DNS的工作原理类似于电话簿。

当用户在浏览器中输入一个域名时,浏览器会查询DNS服务器以获得对应的IP地址。这个过程包括几个步骤:查询本地缓存、查询递归DNS服务器、迭代查询根域名服务器及后续的顶级域和权威域名服务器。最终,DNS将域名解析为IP地址,使得用户能够访问目标网站。

5. CDN原理是什么

CDN(内容分发网络)是提高互联网内容交付效率和可靠性的重要技术。CDN通过在全球各地部署分布式服务器节点来实现加速网页加载、减少延迟的问题。

当用户访问某个网站时,CDN会自动选择离用户最近的服务器节点提供服务,从而减少因地理距离造成的传输延迟,提高用户的访问速度。同时,CDN还通过缓存技术减少源服务器的负载,提高整个网络的可用性和稳定性。

实例说明

例如,当你访问一个国际新闻网站,CDN会从最近的本地服务器传输内容,而非以更高延迟从原始服务器加载。
在这里插入图片描述

二、浏览器

浏览器是我们访问互联网的门户。它不仅是信息载体,更是网络技术和用户体验的结合,通过它,我们可以浏览、搜索和交互各种网页。在本节中,我们将探究浏览器的运作机制,以及它们之间的差异与兼容性问题。

1. 浏览器如何运行

浏览器的主要功能是请求并显示Web页面。

浏览器将用户输入的URL解析为HTTP/HTTPS请求,通过互联网与Web服务器通信。服务器接收到请求后,会返回包含HTML、CSS、JavaScript等资源的网页数据。

浏览器在接收到这些数据后,会进行一系列步骤来呈现出我们在屏幕上看到的网页:

  • 解析:浏览器解析HTML文档,构建DOM树,同时解析CSS构建渲染树。

  • 渲染:渲染树通过布局和绘制,展示在屏幕上。浏览器引擎将这些不同的组件(如JavaScript引擎、排版引擎)结合,确保页面可以正常交互和显示。

  • 执行JavaScript:JavaScript引擎负责解释和执行JavaScript代码,使页面具有动态和交互功能。

实例说明

例如,访问一个动态新闻网站时,浏览器会解析HTML生成DOM树,应用CSS进行样式处理,然后执行JavaScript代码加载动态内容,如新闻滚动和视频播放。

2. 浏览器的差异/兼容性

不同的浏览器有不同的表现,这是因为它们使用不同的渲染引擎和JavaScript引擎。

常见的浏览器有Google Chrome(Blink引擎)、Mozilla Firefox(Gecko引擎)、Apple Safari(WebKit引擎)和Microsoft Edge(Chromium引擎),每个都有自己的特色和优点。

浏览器的差异和兼容性通常体现在对CSS、HTML5以及JavaScript新特性的支持上。开发者在构建网站时,常常面临“跨浏览器兼容性”问题。为了解决这些问题,通常会使用“渐进增强”和“优雅降级”策略,或依赖Polyfill等工具来提升网站的兼容性。

在实际应用中,检测不同浏览器的版本和特性、优化加载和渲染速度、确保不同平台的一致性呈现,都是网站开发过程中需要面对的重要任务。

实例说明

例如,某些CSS属性在旧版IE浏览器中可能不被识别,而在Chrome和Firefox中则完全支持。因此,开发者常常使用CSS前缀或Polyfill来提高兼容性。

在这里插入图片描述

常见问题解答

  • 为什么有些网站在浏览器中显示异常?
    不同浏览器对特定网页元素的支持可能存在差异,可能需要更新浏览器或切换到更兼容的浏览器来解决这些问题。

  • 如何提高网页加载速度?
    使用CDN来加速内容传输、优化图像和资源大小、最小化JavaScript和CSS文件,以及利用浏览器缓存策略来提高加载效率。

大家有什么问题可以评论区留言,我们一起探讨

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2180819.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【工程测试技术】第3章 测试装置的基本特性,静态特性和动态特性,一阶二阶系统的特性,负载效应,抗干扰性

目录 3.1 概述 1测量装置的静态特性 2.标准和标准传递 3.测量装置的动态特性 4.测量装置的负载特性 5.测量装置的抗干扰性 1.线性度 2.灵敏度 3.回程误差 4.分辨力 5.零点漂移和灵敏度漂移 3.3.1 动态特性的数学描述 1.传递函数 2.频率响应函数 3.脉冲响应函数 …

jmeter进行性能测试实践

设置场景接口 一、通过抓取一个场景的接口(抓包) 自己抓取需要的接口,进行依赖 流程:1.在网页上F12抓取登录页面和登出页面的URL。2.在jemeter设置线程组,添加http请求输入URL等。3.查看结果数 二、通过boday录制 …

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-29

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-29 在这一期中,我们对大语言模型在软件开发中的跨学科应用的几个工作做简要的介绍。相关内容涵盖软件测试时的问题报告,问题分类,测试生成,和软件测试中的AI应用: …

【宝藏篇】加密软件有哪些?10款好用的加密软件推荐!

小明:嘿,小华,你知道有哪些好用的加密软件吗?我最近需要保护一些敏感数据。 小华:当然,小明!现在市场上有很多优秀的加密软件,可以帮助你保护数据安全。我正好有10款宝藏级的加密软件…

【RocketMQ】RocketMQ应用难点

🎯 导读:本文探讨了RocketMQ中消息重复消费的问题及其解决方案,尤其是在CLUSTERING模式下的扩容影响。文章分析了重复消费的原因,如广播模式、负载均衡模式下的多consumerGroup消费、消费者组内的动态变化及网络延迟等&#xff0c…

基于单片机的催眠电路控制系统

** 文章目录 前言一 概要功能设计设计思路 软件设计效果图 程序文章目录 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主…

动手学深度学习(李沐)PyTorch 第 3 章 线性神经网络

3.1 线性回归 线性回归是对n维输入的加权,外加偏差 线性回归可以看作是单层神经网络 回归问题中最常用的损失函数是平方误差函数。 平方误差可以定义为以下公式: 常数1/2不会带来本质的差别,但这样在形式上稍微简单一些 (因为当…

【C++篇】领略模板编程的进阶之美:参数巧思与编译的智慧

文章目录 C模板进阶编程前言第一章: 非类型模板参数1.1 什么是非类型模板参数?1.1.1 非类型模板参数的定义 1.2 非类型模板参数的注意事项1.3 非类型模板参数的使用场景示例:静态数组的实现 第二章: 模板的特化2.1 什么是模板特化?2.1.1 模板…

YOLO11关键改进与网络结构图

目录 前言:一、YOLO11的优势二、YOLO11网络结构图三、C3k2作用分析四、总结 前言: 对于一个科研人来说,发表论文水平的高低和你所掌握的信息差有着极大的关系,所以趁着YOLO11刚刚发布,趁热了解,先人一步对…

与我免费ai书童拆解《坚持》创作历程

插科打诨的海侃胡闹,调侃舒展《坚持》诗创的灵魂盛宴之旅。 (笔记模板由python脚本于2024年09月30日 19:11:42创建,本篇笔记适合喜欢python和诗歌的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网:https://www.python.org/ Free&#x…

如何让ollama本地模型使用code-interpreter(代码解释器)?

代码解释器通常都需要在GPU的环境下使用原生的模型通过transformer来实现,且本身还需要模型本身支持,ollama本地蒸馏过的模型占用的资源比较小,也方便本地使用,但是如果想用这些模型的代码解释器,即让大模型写程序并执…

小巧机身,但强劲动力实现千元级净须,未野迷你剃须刀测评

剃须刀是很多朋友每天都要用的工具,在选择上非常丰富,就便捷性和可靠性来说,电动剃须刀还是更方便一些。以前多数人用的都是飞利浦等传统品牌。近几年国产剃须刀也开始崛起,但是也存在很多令人不够满意的产品,比如说&a…

Redis入门第三步:Redis事务处理

欢迎继续跟随《Redis新手指南:从入门到精通》专栏的步伐!在本文中,我们将探讨Redis的事务处理机制。了解如何使用事务来保证一系列操作的原子性和一致性,这对于构建可靠的应用程序至关重要 1 什么是Redis事务🍀 ​ R…

高效学习工作SMART原则

S代表Specific(明确具体的),意味着你需要清晰地定义你的目标,并确保它是具体而明确的。例如,如果你的目标是“提高销售”,那么这个目标就不是足够具体。更好的表述可能是:“在接下来的三个月内&…

【Python报错已解决】 ModuleNotFoundError: No module named ‘lime‘

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 专栏介绍 在软件开发和日常使用中,BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…

828华为云征文 | 利用FIO工具测试Flexus云服务器X实例存储性能

目录 一、Flexus云服务器X实例概要 1.1 Flexus云服务器X实例摘要 1.2 产品特点 1.3 存储方面性能 1.4 测评服务器规格 二、FIO工具 2.1 安装部署FIO 2.2 主要性能指标概要 三、进行压测 3.1 测试全盘随机读IO延迟 3.2 测试全盘随机写IO延迟 3.3 测试随机读IOPS 3.4…

《后端程序猿 · Spring事务失效场景》

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…

如何使用ssm实现钢铁集团公司安全管理系统的构建与实现

TOC ssm748钢铁集团公司安全管理系统的构建与实现jsp 研究背景与现状 时代的进步使人们的生活实现了部分自动化,由最初的全手动办公已转向手动自动相结合的方式。比如各种办公系统、智能电子电器的出现,都为人们生活的享受提供帮助。采用新型的自动化…

SpringBoot教程(三十一) | SpringBoot生成Docker镜像包

SpringBoot教程(三十) | SpringBoot生成Docker镜像包 前提方式一:spring-boot-maven-plugin 方式方式二:Dockfile 方式(推荐) 前提 如果你在 Windows 上,确保 Docker Desktop 已经启动并正在运…

Java常用三类定时器快速入手指南

文章目录 Java常用三类定时器快速入手指南一、序言二,Timer相关1、概念2、Timer类3、TimerTask类4、ScheduleExecutorService接口 三,Scheduled相关1、配置1.1 SpringMVC配置1.2 SpringBoot配置(1)单线程(2&#xff09…