前端 页面
前端性能精进之浏览器(四)——呈现
现如今,在呈现一个页面时,在浏览器中会打开众多进程,包括浏览器、渲染、插件、GPU、网络等进程。 浏览器进程负责存储、界面、下载等管理。在渲染进程中,运行着熟知的主线程、合成线程、JavaScript 解释器、排版引擎等。 而呈现一个页面大致可分为 4 个步骤: 浏览器进程处理用户在地址栏的输入,然 ......
基于NUXT.JS搭建一款VUE版SSR前端框架(解决SPA应用的SEO优化优化问题)
本文档是从官网文档中摘录的一些重点内容,以及加入了自己的一些调整和对官网内容的理解和解释。适合新手学习,有一定技术水平的宝子,建议直接查看 [NUXT英文官网] ......
设计模式与前端工程师
前端要不要学习设计模式 始终认为每个行业都有自己的特点,各自的专业性。一个开发工程师如果不知道电脑是哪些基本硬件组成,那么我们大概率都会认为这个人非常不专业。那么前端要不要学设计模式呢?设计模式跟前端有多大关系呢? 前端工程师首先是一个工程师,既然是一个软件工程师,那么类似设计模式、数据结构、网络相 ......
前端老赵一次给你讲透“微前端”架构
一、引言: 随着Web应用程序的规模和复杂度的不断增加,前端技术也在不断发展和演进。微前端是近年来兴起的一种前端架构模式,通过将大型Web应用程序拆分为小型、可独立开发和部署的模块,从而降低开发和维护的难度,同时提高Web应用程序的可扩展性和可维护性。微前端的发展也得到了业界的广泛关注和支持,成为了 ......
实践,制作一个高扩展、可视化低代码前端,详实、完整
RxEditor是一款开源企业级可视化低代码前端,目标是可以编辑所有 HTML 基础的组件。比如支持 React、VUE、小程序等,目前仅实现了 React 版。 RxEditor运行快照: 项目地址:https://github.com/rxdrag/rxeditor 演示地址( Vercel 部 ......
前端必须知道的调试工具
1949年9月9日,天气非常炎热,有一只娥死在了70号继电器里面,造成电路不通,机器死机,经过近一天的检查,Grace Hopper(格蕾斯哈珀)终于找到了真凶,原来正是被光吸引过来的娥造成了机器宕机,在这儿之后,在计算机科学中,Bug就从虫子变成了程序的缺陷,一只虫子就这样被载入了计算机史册。 ......
前端程序员需要了解的MySQL
数据库的基本概念 数据库(database)是用来组织、存储和管理数据的仓库。对数据库中的数据可以进行增删改查操作。市面上常见的数据库有: MySQL(使用最广泛。流行度最高的开源免费数据库 Community+Enterprise) Oracle(收费) SQL Server(收费) Mongod ......
ABP微服务系列学习-对接前端界面
前面我们把后端的微服务架子基本搭建完成并成功启动了,现在我们可以对接前端界面了。这里我们直接用ABP模板里面的Angular的前端界面。 创建应用程序模板 使用ABPCli创建一个应用程序模板,前端选择Angular,选择参数--separate-identity-server,分离身份认证和API ......
拥抱下一代前端工具链-Vue老项目迁移Vite探索
随着项目的不断维护,代码越来越多,项目越来越大,决定将老项目迁移至vite。本文介绍了Vue老项目像Vite迁移的过程、遇到的问题以及经验总结。 ......
立即执行函数在前端国际化方案中的应用
说起国际化,开发过跨区域网页的小伙伴应该都遇到过。我们的网页需要配置多套语言,方便用户进行切换。 本文就以 React 为例,介绍其中一种实现方案,并学习一下其中的知识点。 一种国际化方案 方案是这样的: 为多套语言创建对应的 object,并 export 出去 通过 js 立即执行函数,加载选定 ......
从 B 站出发,用 Chrome devTools performance 分析页面如何渲染
页面是如何渲染的?通常会得到“解析 HTML、css 合成 Render Tree,就可以渲染了”的回答。但是具体都做了些什么,却很少有人细说,我们今天就从 Chrome 的性能工具开始,具体看看一个页面是如何进行渲染的,以及进行页面优化时需要关注哪些指标。 以“老二次元”网站 bilibili 为 ......
前端性能精进之优化方法论(二)——分析
在上一节中曾提到过两种性能监控:SYN 和 RUM,那么对应的也有两种分析:数据分析和实验室分析。 数据分析会通过采集上来的性能信息来剖析和定位可能存在的各种问题。 实验室分析会通过某个线上或本地的测试工具对页面进行单点测试,得出性能分析报告。 本文会对前者介绍一些分析实践,后者会介绍一些比较有名的 ......
Jetpack Compose学习(11)——Navigation页面导航的使用
原文:Jetpack Compose学习(11)——Navigation页面导航的使用 - Stars-One的杂货小窝 在Android原生的View开发中的,也是有Navigation,原生我之后可能再出篇教程,今天讲解的则是compose版本的Navigation组件的使用 本系列以往文章请查 ......
前端报表如何实现无预览打印解决方案或静默打印
在前端开发中,除了将数据呈现后,我们往往需要为用户提供,打印,导出等能力,导出是为了存档或是二次分析,而打印则因为很多单据需要打印出来作为主要的单据来进行下一环节的票据支撑, 而前端打印可以说是非常令人头疼的一件事。为什么令大家头疼呢?因为前端打印,要强依赖与浏览器的打印预览页面,会天然存在以下弊端 ......
react 高效高质量搭建后台系统 系列 —— 前端权限
其他章节请看: react 高效高质量搭建后台系统 系列 权限 本系列已近尾声,权限是后台系统必不可少的一部分,本篇首先分析spug项目中权限的实现,最后在将权限加入到我们的项目中来。 spug 中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户(例如 pjl),可以这样操作: 在角 ......
微软出品自动化神器【Playwright+Java】系列(九)多线程、重定向、弹出新窗口、截图、新页面、录制、页面对象模式操作
写在前面 关于Playwright系列的文章,真的很久没有写了,今天一个不小心官方API部分过完了,下面将为大家逐一演示,感兴趣的同学可以自行动手练习。 API部分 多线程 直白点说就是多线程下Playwright的使用,示例代码如下: package org.example; import com ......
前端和后端分别做什么?
前言 在学习程序开发的时候经常不理解一个工具是前端用的,还是后端用的,想把资料进行分类都分得有点混乱,所以我将我知道的知识点整理成博客前端和后端的区分当我们使用互联网的程序时,比如浏览器中的网页或移动应用,我们实际上时使用的是客户端和服务器之间的通信,其中客户端就是指前端,服务器就是后端。前端开发前 ......
前端性能优化百问大杂烩
主要内容为下面几大类:移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。 移动端性能优化: 保持单个文件小于25KB 移动网站页面要求下载资源,如果文件过大,会大大减慢页面加载速度。 打包内容为分段multipart文档 由于HTTP请求每一次都会执行三次握手,每 ......
这样在管理后台里实现 403 页面实在是太优雅了
前言 403 页面通常表示无权限访问,与 404 页面代表着不同含义。而大部分管理后台框架仅提供了 404 页面的支持,但却忽略了对 403 页面的处理,有的框架虽然也有对 403 页面的处理,但处理效果却不尽人意。 那怎么样的 403 页面才是即好用,又优雅呢? 其他框架是怎么做的 1、完全不处理 ......
Vue学习:实现用户没有登陆时,访问后自动跳转登录页面
设计思路 定义路由的时候配置属性,这里使用needLogin标记访问页面是否需要登录 设置路由守卫,每个页面在跳转之前都要经过验证,校验用户信息是否存在,不存在跳转到登录页 用户登录后将用户信息存储在localStorage 退出登录后,将用户信息清空 代码实现 1、router文件夹的index. ......
基于Vue3+TS的Monorepo前端项目架构设计与实现
写在前面 你好,我是前端程序员鼓励师岩家兴!去年在另一个项目https://juejin.cn/post/7121736546000044046中,我向读者朋友们介绍了结合npm包管理工具yarn作vue3项目的monorepo架构设计。今天,在这个风和日丽阳光明媚的钱塘江畔,我心情很好,我打算再写 ......
前端分支规范
开发规模不大,结合比较正式的规范做了一些简化 基本概念 常设分支 master - 主分支,用于正式发布 develop - 开发分支,用于创建新开发feature分支 临时分支 feature/*** - 任务开发分支 release - 预发布分支 hotfix/*** - 线上热修分支 这三种 ......
前端程序员是怎么做物联网开发的
前端程序员是怎么做物联网开发的 上图是我历时一周做的在线的温湿度可视化项目,可以查看截至目前往前一天的温度、湿度变化趋势,并且实时更新当前温湿度 本文可能含有知识诅咒 概述和基础讲解 该项目用到的技术有: 前端:jq、less、echarts、mqtt.js 后端:eggjs、egg-emqtt 数 ......
Web 页面如何实现动画效果
Web 页面可以使用多种方式实现动画效果,其中最常用的有两种: CSS 动画:通过 CSS 中的 transition 和 animation 属性来实现动画效果。CSS 动画实现起来简单,性能消耗小,支持广泛。 JavaScript 动画:通过 JavaScript 代码来实现动画效果。JavaS ......
Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置
Web 服务器是一种用于存储,处理和传输 Web 内容的软件。它是一种特殊类型的服务器,具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言,如 PHP,JavaScript,Ruby,Python 等,并且支持动态生成 Web 页面。常见的 Web 服 ......
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
我曾经多次向人推荐Vim,其热情程度有些类似现在卖保险的,有的时候,人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面,比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车,比如因为所谓完美的音质而舍不得一个老旧的有线耳机,比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。 ......
前端报表如何实现无预览打印解决方案或静默打印
在前端开发中,除了将数据呈现后,我们往往需要为用户提供,打印,导出等能力,导出是为了存档或是二次分析,而打印则因为很多单据需要打印出来作为主要的单据来进行下一环节的票据支撑, 而前端打印可以说是非常令人头疼的一件事。 为什么令大家头疼呢? 因为前端打印,要强依赖与浏览器的打印预览页面,会天然存在以下 ......
Backbone前端框架解读
作者: 京东零售 陈震 一、 什么是Backbone 在前端的发展道路中,前端框架元老之一jQuery对繁琐的DOM操作进行了封装,提供了链式调用、各类选择器,屏蔽了不同浏览器写法的差异性,但是前端开发过程中依然存在作用域污染、代码复用度低、冗余度高、数据和事件绑定烦琐等痛点。 5年后,Backbo ......
半个前端新手入门Electron的过程
前言 先说几句废话,本人是一名 web 后端开发,主语言是 java,在学 Electron 之前,只会一点点 HTML和 JavaScript。本文讲的也是我学习 Electron 的过程,而非教程,请酌情参考。 Electron是什么 Electron是一个使用 JavaScript、HTML ......