前言：最近接到的需求是前端需要实现一个全局告警弹窗，如果使用ajax请求http接口只能用定时器定时去请求是否有告警，这样既消耗资源，又不能实时监测到告警信息。所以这个时候就可以采用websocket来实现通信，因为websocket不用请求一次才响应一次，它可以实现服务器主动发送。websocket：WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议websocket提供的api：//连接成功后的回调函数ws.onopen=fu

1.打包前端项目1.通过项目中的package.json文件，找到“build”运行进行打包2.打包成功后生成dist文件夹，就是打包好的项目3.在根目录中创建一个Docker文件夹中创建nginx.conf配置文件,同时在根目录中创建一个Dockerfile文件图例:nginx.confserver{listen80;#gzipconfiggzipon;gzip_min_length1k;gzip_comp_level9;gzip_typestext/plaintext/csstext/javascriptapplication/jsonapplication/javascriptappli

前言需求是预览本地的pdf/word/epub格式的文件，但是搜索后发现没有可以直接使用的，格式不同，显示的方式和效果也都略有不同。最后还是分别实现预览的功能。如果只需要预览pdf/word等格式的话，可以使用的方案：vue-office，支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3。也支持非Vue框架的预览。补充功能：pdf选中文字，epub高亮（我的需求是选中pdf/epub的文字后进行收藏）实现pdf预览和选中文字高亮方案：pdfjs+iframe因为这样可以使用浏览器自带的pdf阅读器，不需要再自己实现小图预览等功能。pdf.js实现pdf的预览与下

背景本文主要介绍AI绘图开源工具StableDiffusionWebUI的API开启和基本调用方法，通过本文的阅读，你将了解到stable-diffusion-webui的基本介绍、安装及API环境配置；文生图、图生图、局部重绘、后期处理等API接口调用；图像处理开发中常用到一些方法如Base64、PNG、Canvas及URL相互转换、Canvas颜色转换等。AI绘图工具目前市面上比较广泛使用的主要有两款，一个是Midjourney，它提供面向用户有好的操作界面，文生图、图生图等功能非常强大，但是它是一款收费软件；另一个就是开源工具StableDiffusion,同样具有强大的AI绘图和图片再

前端开发调试和测试工具帮助开发人员在开发过程中发现和修复问题，确保网站或应用的稳定性和性能。以下是一些常用的前端调试和测试工具：调试工具：浏览器开发者工具：现代浏览器（如Chrome、Firefox、Safari等）都内置了开发者工具，可以用于检查网页的HTML、CSS、JavaScript、网络请求等。其中，Chrome的开发者工具尤其强大，包括了元素检查、控制台、网络监控、性能分析等功能。VisualStudioCode：VSCode是一个流行的代码编辑器，内置了强大的调试功能，可以在编辑器中进行JavaScript和前端代码的调试。FirefoxDevTools：与Chrome类似，Fi

8月30日，Astro3.0正式发布！Astro3.0是第一个支持ViewTransitionsAPI的主要Web框架。通过这个API，可以轻松地在页面导航中实现淡入淡出、滑动、形变甚至保持有状态的元素。在过去，这些功能只在使用JavaScript编写的单页应用(SPA)中可用。但是，由于Web平台的进步，现在任何人都可以在Astro3.0中使用这些功能！Astro是一个现代化的静态站点生成器和前端框架，它具有独特的设计理念：岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站，将各种技术栈（如React、Vue、Svelte等）的组件无缝集成到同一个项目中。2022年，Astro在 J

目录一、性能指标1、首次内容绘制FCP（FirstContenfulPaint） 占比10%1.1、概念1.2、性能值1.3、优化方法2、SI（SpeedIndex） 占比10%2.1、概念2.2、性能值2.3、优化方法3、最大（最有意义）内容绘制 LCP（LargestContentfulPaint）  占比25%3.1、概念3.2、性能值3.3、考量元素3.4、影响因素3.5、优化方法4、总阻塞时间 TBT（TotalBlockingTime）  占比30%4.1、概念4.2、性能值4.3、优化方法5、累计布局偏移 CLS（CumulativeLayoutShift）  占比25%5.1、

还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏。文章目录🍉正文微信小程序1、微信小程序是单页应用吗2、小程序的开发，发送一个请求，怎么请求数据的3、小程序中数据怎么同步渲染4、微信小程序组件的生命周期5、定义生命周期的方法6、小程序rpx单位

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）目录指令补充指令修饰符v-bind对于样式控制的增强 操作class案例：京东秒杀tab导航高亮操作style v-model应用于其他表单元素 computed计算属性基础语法computed计算属性vsmethods方法计算属性完整写法综合案例-成绩案例watch侦听器基础语法完整写法 指令补充指令修饰符通过"."指明一些指令后缀，不同后缀封装了不同的处理操作→简化代码①按键修饰符@keyup.enter→键盘回车监听②v-model修饰符v-model.trim→去除首尾空格v-model.numb

1：WebSocket概述、WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。WebSocket通信协议于2011年被IETF定为标准RFC6455，WebSocketAPI被W3C定为标准。在WebSocketAPI中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。使用：创建Wevsocket实例化 consthanclick=(()=>{//点击是触发方法constws=newWebSocket('ws://localhost:8000');//创建Wevsocket实例化ws.on