WEB前端开发三行CSS代码轻松实现全网站暗黑模式 深色模式是一种设计趋势,网站的配色方案被更改为深色背景,配以浅色文字和元素。它也被称为夜间模式或黑暗主题。深色模式的目的是减少低光环境下的眼睛疲劳,节省移动设备的电池寿命,并创造一个时尚现代的美感。 ... 2023-05-191,288 viewsCommentsCSS 阅读全文
WEB前端开发Vue3.3 “浪客剑心”发布!重要特性有哪些? Vue 3.3 "浪客剑心"! 此版本专注于改进开发人员体验 ,特别是 SFC <script setup> 与 TypeScript 的使用。一同发布的还有 1.6 版本的 Vue La... 2023-05-17817 viewsCommentsVUE 阅读全文
WEB前端开发前端开发18个最佳JAVASCRIPT框架和库 JavaScript 可以说是最流行的编程语言之一,也是Web 开发人员必须学习的 3 种语言之一,JavaScript 几乎可以做任何事情,更可以在包括物联网在内的多个平台和设备上运行。 在WebG... 2023-05-161,073 viewsCommentsjavaScript 阅读全文
WEB前端开发快速掌握 Tailwind:最流行的原子化 CSS 框架 Tailwind 是流行的原子化 css 框架。 有多流行呢? 它现在有 68k star 了,要知道 express 才 60k: 那什么是原子化 css? 我们平时写 css 是这样的: <... 2023-05-121,398 viewsCommentsCSS 阅读全文
WEB前端开发前端学习之路:五大浏览器内核是什么?能做什么? 客户端主流浏览器 现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览... 2023-05-101,773 viewsComments 阅读全文
WEB前端开发前端性能精进之浏览器呈现:资源和渲染 呈现一个页面时,在浏览器中会打开众多进程,包括浏览器、渲染、插件、GPU、网络等进程。 浏览器进程负责存储、界面、下载等管理。在渲染进程中,运行着熟知的主线程、合成线程、JavaScript 解释器、... 2023-05-10915 viewsComments 阅读全文
WEB前端开发Web前端培训:为什么要进行跨浏览器测试? 一个特定的网页或完整的网站在不同的浏览器上呈现的不同?当在不同平台和设备(操作系统——Linux、Windows、Android、iOS等;设备类型——台式机、手机、平板电脑等)的浏览器上执行测试时,... 2023-05-10966 viewsComments 阅读全文
WEB前端开发浏览器内核——渲染引擎:从html到图像展示 浏览器最核心的部分是渲染引擎,即render engine,又称浏览器内核。 渲染引擎包括多个线程,每个线程负责相关工作,如下: GUI 渲染线程负责调用GPU进行界面渲染,包括解析html、CSS、... 2023-05-101,420 viewsCommentsHTML 阅读全文
WEB前端开发浏览器是如何渲染HTML页面的? 当浏览器的网络线程收到HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。 在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。 这个渲染流程分为多个阶段,分... 2023-05-101,003 viewsCommentsHTML 阅读全文
WEB前端开发2023 Web Components 现状VS应用实例 Web Components 应用实例 随着所有浏览器都支持 v1 Web Components,许多公司已经采用并基于这些新标准构建了重要的业务。以下是我认为值得关注的一些例子。 YouTube Y... 2023-05-091,142 viewsComments 阅读全文
WEB前端开发Tailwind CSS 菜鸟入门指南教程: 前端领域最热门且备受争议的 CSS 框架之一是 Tailwind CSS,这个面向初学者的 Tailwind CSS 教程将尝试让您快速了解它的全部内容。 我将介绍基础知识,以及为什么您可能希望使用 ... 2023-05-083,169 viewsCommentsCSS 阅读全文
WEB前端开发Tailwind CSS 框架是什么?可以在哪里使用? 我们将了解 Tailwind CSS——一个有助于构建和设计网页的 CSS 框架。我们将首先解释如何在您的项目中安装和集成 Tailwind CSS,查看一些实际应用程序,以及如何创建自定义样式和插件... 2023-05-081,575 viewsCommentsCSS 阅读全文
WEB前端开发滚动页面position的sticky属性,JS实现导航栏固定在顶部(吸顶效果) 利用position的sticky属性 position: sticky; position: -webkit-sticky; // 兼容 -webkit 内核的浏览器 top: 10px; // 必... 2023-05-081,971 viewsCommentsjavaScript 阅读全文
WEB前端开发HTML+CSS+js代码搞定导航吸顶效果 一、HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二、CSS样式 给点简单的样式 <... 2023-05-081,123 viewsCommentsCSS HTML javaScript 阅读全文
WEB前端开发滚动到页面顶部的多种代码实现 锚点和平滑滚动 在 <html> 元素上提供以 ID 为目标的链接 <div id="top"></div> <a href="#top">跳转到页面顶... 2023-05-08793 viewsComments 阅读全文
WEB前端开发css实现黏性吸附定位功能 传统的黏性定位是使用js通过计算高度来实现的,当元素滚动到一定位置时吸附在当前位置。下面我们通过css来实现黏性定位功能。 黏性定位 黏性定位目前主流的浏览器已经全部支持,... 2023-05-081,188 viewsCommentsCSS 阅读全文
WEB前端开发CSS遮罩合成实现带圆角的环形loading动画 先不考虑动画,其实就是这样一个图形 那么,如何来绘制呢?下面花两分钟一起看看吧 一、CSS实现思路 首先,看到这环形逐渐消失的效果,也就是透明度渐变的效果,肯定要联想到锥形渐变 通过锥形渐变,可以很轻... 2023-05-08496 viewsCommentsCSS 阅读全文
WEB前端开发Chrome 开发者工具 Lighthouse 面板 Lighthouse 是一个由 Google 开发的开源工具,可以帮助开发者检查网站的性能、可访问性、最佳实践和搜索引擎优化等方面的问题。在 Chrome 开发者工具中,Lighthouse 面板提供... 2023-05-08966 viewsComments 阅读全文
WEB前端开发Chrome 开发者工具 performance 面板 Experience 里的 Layout shift布局位移 Chrome 开发者工具 performance 面板 Experience 中的 Layout shift(布局位移)是指在页面加载过程中元素的位置发生了意外的变化,这种变化可能会导致用户的不良体验... 2023-05-08605 viewsComments 阅读全文
WEB前端开发Chrome 开发者工具 Performances 面板里的参数解读 frame per second - FPS 每当我们在 FPS 上方看到红色条时,就意味着帧速率下降得太低,当 FPS 降到 60 以下时,会严重影响用户体验。 一般来说,绿色条越高,FPS 越高。... 2023-05-08611 viewsComments 阅读全文
WEB前端开发React性能优化思路VS技巧总结 目前在工作中,大量的项目都是使用react来进行开展的,了解掌握下react的性能优化对项目的体验和可维护性都有很大的好处,下面介绍下在react中可以运用的一些性能优化方式和性能优化思路。 对于类式... 2023-05-01743 viewsCommentsReact.js 阅读全文
WEB前端开发chrome Dev Tools 性能分析 performance 页面举例 chrome 的performance用来分析性能优化性能非常好用,下面以一个页面来举例 性能分析 性能分析最好使用隐私无痕模式,以保证干净的环境下,避免chrome插件对性能分析结果的影响 Perf... 2023-04-30932 viewsComments 阅读全文
WEB前端开发如何使用HTML5和CSS3创建一个WordPress响应式主题 了解响应式设计 响应式设计意味着您的网站将根据其屏幕大小自动以最佳格式显示给访问者。页面布局实际上是对可用空间的“响应”,内容的正确显示,不会被截断,不会溢出,并且您的网站看起来尽可能整洁。 要衡量设... 2023-04-28971 viewsCommentsCSS HTML WordPress 阅读全文
WEB前端开发WordPress 实现JavaScript异步加载社交网络代码的方法 JavaScript 执行的时候可能会修改 DOM,影响页面的展现,默认情况下,先加载执行 JavaScript,再加载执行后面的代码才是安全的,加载执行 JavaScript 代码的时候,会停止后面... 2023-04-28836 viewsCommentsjavaScript WordPress 阅读全文