标签: HTML

一纸荒年 | 2023-11-18 | HTML前端相关

浅谈 HTML5 Web Worker,性能优化利器?

多线程是现代软件开发中用于增强应用的性能和响应能力的重要技术。然而,JavaScript 是一门单线程语言,它天生是不支持多线程的。为了克服这一限制,引入了 Web Workers。本文就来探讨 Web Workers 对 Web 多线程的重要性,以及使用它们的限制和注意事项。 Web Workers 概述 概念 Web Workers 是现代 Web 开发的一项强大功能,于 2009 年作为 HTML5 规范的一部分引入。它们旨在提供一种在后台执行 JavaScript 代码的方法,与网页的主执行线程分离,以提高性能和响应能力。 由于 JavaScript 是单线程的,当执行比较耗时的任务时,就会阻塞主线程并导致页面无法响应,这就是 Web Workers 发挥作用的地方。它允许在一个单独的线程(称为 工作线程 )中执行耗时的任务。这使得 JavaScript 代码可以在后台执行,而不会阻塞主线程并导致页面无响应。 Web Worker 是一个作为后台线程运行的脚本,具有自己的引擎实例和事件循环。它与主执行线程并行运行,并且不会阻塞事件循环。 主线...

 139 |  1 |  3 HTML前端相关

心如止水 | 2023-10-17 | HTML前端相关

浅谈 HTML5 Web Worker,性能优化利器?

多线程是现代软件开发中用于增强应用的性能和响应能力的重要技术。然而,JavaScript 是一门单线程语言,它天生是不支持多线程的。为了克服这一限制,引入了 Web Workers。本文就来探讨 Web Workers 对 Web 多线程的重要性,以及使用它们的限制和注意事项。 Web Workers 概述 概念 Web Workers 是现代 Web 开发的一项强大功能,于 2009 年作为 HTML5 规范的一部分引入。它们旨在提供一种在后台执行 JavaScript 代码的方法,与网页的主执行线程分离,以提高性能和响应能力。 由于 JavaScript 是单线程的,当执行比较耗时的任务时,就会阻塞主线程并导致页面无法响应,这就是 Web Workers 发挥作用的地方。它允许在一个单独的线程(称为 工作线程 )中执行耗时的任务。这使得 JavaScript 代码可以在后台执行,而不会阻塞主线程并导致页面无响应。 Web Worker 是一个作为后台线程运行的脚本,具有自己的引擎实例和事件循环。它与主执行线程并行运行,并且不会阻塞事件循环。 主线...

 510 |  0 |  0 HTML前端相关

小二~ 看茶! | 2022-09-12 | HTML

HTML——自适应图片

如何创建 分辨率切换:不同尺寸 应用场景:根据设备大小来显示更大或更小的图片 使用img的两个新属性(sizes和srcset)——来提供更多额外的资源图像和提示,帮助浏览器选择正确的一个资源。 html <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" srcset: srcset定义了我们允许浏览器选择的图像集,以及每个图像的大小。 1. 一个文件名( elva-fairy-480w.jpg .) 2. 一个空格 3. 宽度描述符:图像固有宽

 740 |  2 |  0 HTML

小二~ 看茶! | 2022-09-07 | HTML

HTML——超链接

PS:此文记于学习HTML超链接时,一些HTML的新的知识,做一个文章的搬运工 文章来源:[创建超链接 学习 Web 开发 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) 连接文档片段 超链接除了可以链接到文档外,也可以链接到 HTML 文档的特定部分(被称为 文档片段 )。要做到这一点,你必须首先给要链接到的元素分配一个 [ id ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes attr-id) 属性。例如,如果你想链接到一个特定的标题,可以这样做: HTML <h2 id="Mailing_address" 邮寄地址</h2 然后链接到那个特定的 id ,你可以在 URL 的结尾使用一个井号指向它,例如: html <p 要提供意见和建议,请将信件邮寄至<a h

 753 |  1 |  0 HTML

小二~ 看茶! | 2022-09-07 | HTML

HTML——head里面有什么

head的概念 head是保存了一些元数据,其内容不会再浏览器中显示,而是一些简要的描述该页面的关键信息,在搜索页面展示该网页的描述信息。例如:网页标签、 <title 、 <meta 一些指向CSS连接的 <link 和 <script 等 title 为网页标签添加标题,便于收藏到书签时查看该网页的描述信息 元数据 <mata 指定文档的编码 html <meta charset="UTF-8" 添加作者和描述 通过 <meta name="" content="" 描述,例如添加作者 <meta name="author" content="YOHO" 在站点中添加图标 在head标签中添加 <link rel="icon" href="favicon.ico" type="image/x-icon" 在HTML中应用CSS和JavaScript 引入CSS: html <link rel="stylesheet" href="my-css-file.css

 587 |  1 |  0 HTML

黑夜尽头 | 2022-04-23 | HTML前端相关

DOM级别及事件流

一、DOM是什么? DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型,以节点树的形式来表现文档,每个节点代表文档的构成部分。 简单来讲,DOM就是一组API(接口)。它将一份结构化文档看做一棵树,这棵树由各种各样的节点构成,即节点树。DOM不是专为HTML设计的,它是通用型的标准,为所有标记语言而设计。 二、DOM级别 ------- DOM级别一共可以分为四个级别:DOM0级、DOM1级、DOM2级和DOM3级。 DOM级别其实就是标准的迭代,对于版本的称呼,类似ES5、ES6。 1、DOM0级 DOM没有被W3C定为标准之前。 2、DOM1级 1998年10月成为W3C的标准后,称为DOM1级。DOM1级由两个模块组成:DOM核心(DOM Core)和DOM HTML。其中,DOM核心规定的是如何映射基于XML的文档结构,以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展,添加了针对H...

 981 |  1 |  0 HTML前端相关

黑夜尽头 | 2022-01-07 | JavaScriptHTML前端相关

HTML面试题整理

HTML面试题整理 01.说一下对语义化的理解?✅ 对开发者友好,让人更容易读懂,利于代码可读性 对机器友好,让搜索引擎更容易读懂,利于seo 02.说一下HTML5有哪些更新/新增?✅ 新增语义化标签,音频视频标签 新增localstorage,sessionstorage本地存储 新增DOM查询 document.querySelector() 、 document.querySelectorAll() … 03.说一下defer和async的区别?✅ 行内:button,span 块级:div,p,ul,h1 替换元素:img,iframe,video 空元素:link,meta 04.说一下iframe有哪些优点和缺点?✅ 优点:展现嵌入...

 1242 |  2 |  0 JavaScriptHTML

黑夜尽头 | 2021-11-03 | JavaScriptHTMLCSS前端相关

$HTML, HTTP,web 综合问题【初级】

FE-interview 个人收集的前端知识点、面试题和答案,参考答案仅代表个人观点,方便复习,目录如下,通过文档内搜索目录可快速定位章节 $HTML, HTTP,web 综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些 SEO 1. 合理的 title、description、keywords:搜索对着三项的权重逐个减小,title 值强调重点即可,重要关键词出现不要超过 2 次,而且要靠前,不同页面 title 要有所不同;description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同;keywords 列举出重要关键词即可 2. 语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页 3....

 1170 |  4 |  3 JavaScriptHTML

前端小二 | 2021-10-15 | HTML前端相关

HTML 面试知识点总结

本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1. DOCTYPE 的作用是什么? 相关知识点: IE5.5 引入了文档模式的概念,而这个概念是通过使用文档类型(DOCTYPE)切换实现的。 <!DOCTYPE 声明位于 HTML 文档中的第一行,处于 <html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。 DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。 回答(参考1-5): <!DOCTYPE 声明一般位于文档的第一行,它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来 进行文档解析,否则就以兼容模式进行解析。在标准模式下,浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下,浏 览器会以向后兼容的方式来模拟老式浏览器的行为,以保证一些老的网站的正确访问。 在 html5 之后不再需要指定 DTD 文档,因为 html5 以前

 932 |  2 |  0 HTML前端相关

前端小二 | 2021-10-11 | JavaScriptHTML浏览器

浏览器从输入网址到页面展示的过程

一、回答关键点 URL DNS TCP 渲染 浏览器从输入网址到渲染页面主要分为以下几个过程 URL 输入 DNS 解析 建立 TCP 连接 发送 HTTP / HTTPS 请求(建立 TLS 连接) 服务器响应请求 浏览器解析渲染页面 HTTP 请求结束,断开 TCP 连接 二、知识点深入 2.1 URL 输入 URL(统一资源定位符,Uniform Resource Locator)用于定位互联网上资源,俗称网址。 我们在地址栏输入 HZFE 官方网址 hzfe.org 后敲下回车,浏览器会对输入的信息进行以下判断: 1. 检查输入的内容是否是一个合法的 URL 链接。 2. 是,则判断输入的 URL 是否完整。如果不完整,浏览器可能会对域进行猜测,补全前缀或者后缀。 3. 否

 1333 |  4 |  0 JavaScriptHTML

社区作者 | 2020-11-21 | LinuxHTMLJavaTomcat

在浏览器输入域名看到完整页面背后都发生了什么

一 完整流程概览 1.1 概述 本文讲述浏览器域名解析获取IP、请求静态资源时cdn工作原理、获取IP后请求服务端页面时IP是怎么寻址的、请求到达服务器后应用从都有哪些方式获取请求数据、应用层和系统内核之间的数据copy方式、以及浏览器获取到响应页面后,是怎么将html+css+js内容渲染为一个缤纷多彩的页面的。 1.2 DNS/CDN 1.3 TCP/IP 二 DNS 工作过程 2.1 解析过程 1. 访问www.google.com时,先查询本地机器缓存,没查到后再向本地域...

 2117 |  6 |  4 LinuxHTML

社区作者 | 2020-01-09 | JavaScriptHTMLVueCSS

vue中css获取js值

一 背景 同一个项目中不同业务线模块的主题色不同,在切换业务模块的时候就需要改变主题色。 二 实现 2.1 定义变量 在业务线模块加载的入口处定义css变量。 html <style .body-box { --themeColor: 660066; --themeHeadColor: 1a1818; } </style <template <div class="body-box" ref="mytheme" <router-view/ </div </template <script export default { data () { return { // 业务线主题配置 theme: this.$const.bizLineTheme.blog } }, mounted () { // 动态更新css属性值 this.$refs.mytheme.style.setProperty('--themeHeadColor', this.the

 1686 |  2 |  0 JavaScriptHTML

社区作者 | 2019-11-12 | HTMLJava

thymeleaf模块取消HTML5强校验

一 pom.xml添加以下依赖 html <dependency <groupId net.sourceforge.nekohtml</groupId <artifactId nekohtml</artifactId <version 1.9.22</version </dependency 二 spring配置文件添加以下配置信息 js spring.thymeleaf.content-type=text/html spring.thymeleaf.cache=false spring.thymeleaf.mode=LEGACYHTML5 默认的mode是 spring.thymeleaf.mode=HTML5 的,所以是强校验的。 三 禁用模板缓存 thymeleaf使用模板缓存是默认的,这有助于改善应用程序的性能,因为模板只需编译一次,但是在开发过程中不能实时看到变更的效果,除非重启应用程序。 将 spring.thymeleaf.cac

 1140 |  1 |  0 HTMLJava