你不知道的 Web 性能优化 | 原力计划-重拳出击
你不知道的 Web 性能优化 | 原力计划-重拳出击
你遇到过打开一个网站需要10秒以上的吗?这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅。你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站。作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢?
有兴趣的同学可以去我的GitHub,里面有我的分享的学习过程和blog:github.com/193Eric。
使用Web Worker
Web Worker 是HTML5 提供的一个Javascript多线程解决方案,运行在浏览器后台。如我们所知js是个单线程的,js引擎在运行js的时候,不能干其他事。不过在使用中需要注意以下几点:
它是一种JavaScript 工作线程,不能直接访问DOM
能发送网络请求。
它在不用时会被中止,并在下次有需要时重启
在开发过程中,可以通过 localhost 使用服务工作线程,但如果要在网站上部署服务工作线程,需要在服务器上设置 HTTPS。
Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络,这样做主要是为了安全,因为是可以通讯的,如果被别人修改了文件,引入了本地的js,进行通讯就会出现问题,所以只能访问同源的网络文件。(重点,所以本地调试的时候需要开启服务,用node或者后台语言启动 )
web Worker 与主线程的交互速度
我们用代码来看下从主线程 --> web worker --> 主线程 最简单的需要多长时间。
webWorker
var worker = new Worker("worker.js");
console.log(new Date().getTime()) // 开始时间
worker.postMessage("123456")
worker.onmessage = function (e) {
console.log(new Date().getTime()) // 接收时间
}
//webWorker.js
onmessage=function(evt){
vard=evt.data//通过evt.data获得发送来的数据
postMessage(d)//将获取到的数据发送会主线程
}
经过几次测试,大概的事件在30-50ms之间(当然这个值会随着机器性能问题有大有小),正常的传输速度是很快的。
web Worker 优化策略与实践
案例:大量的js计算(fibonacci数列计算)
varworker=newWorker("worker.js");
letbeginTime=newDate().getTime()
console.log(beginTime)
letfibonacci=(n)=>{
returnn<2?n:fibonacci(n-1)+fibonacci(n-2);
};
fibonacci(45)
letendTime=newDate().getTime()
console.log(`${endTime}---------历时${(endTime-beginTime)/1000}s`)
我们在主线程计算fibonacci(45)看看需要多少时间,在计算的时候页面是卡主的,会非常影响用户体验。
然后我们看看放在web worker里面是什么情况。
//index.htmlvarworker=newWorker("worker.js");letbeginTime=newDate().getTime()console.log(beginTime)worker.postMessage("fibonacci");worker.onmessage=function(e){letendTime=newDate().getTime()console.log(e,`${endTime}---------历时${(endTime-beginTime)/1000}s`)};console.log("working")console.log("working")console.log("working")
//worker.jsonmessage=function(evt){vard=evt.data;//通过evt.data获得发送来的数据letfibonacci=(n)=>{returnn<2?n:fibonacci(n-1)+fibonacci(n-2);};letdata=fibonacci(45)postMessage(data);//将获取到的数据发送会主线程}
可以看到,计算的时间是差不多的,但是并没有阻碍页面的运行。所以,一些高计算耗费时间的功能,可以放到web worker中计算完成后再返回回来。
SPA项目首页白屏问题
现在三大框架(vue,react,angular)的兴起,越来越多的项目采用SPA这种接近原生app体验的架构方式。采用SPA模式,就意味着,首页或者main.js过大,首屏加载的速度会受到很大的限制。会存在一定时间的白屏。
SPA项目因为html都是js去生成的(虚拟Dom原理),所以在js没有执行加载完之前,dom是不会有的。一开始客户端从服务端获取到html只是一个空壳,所以会显示白屏。
下面列出一些解决方案:
1.服务端渲染SSR(加快首屏加载和SEO)
SSR是一个可以有效的提高首屏渲染速度的方法,之后我会开单张去单独实践服务端渲染。
2.预渲染
预渲染是一个方案,使用爬虫技术。由于我们打包过后的都是一些js文件,使用一些技术(puppeteer)可以爬取到项目在chrome浏览器展示的页面,然后把它写入js,和打包文件一起。类似prerender-spa-plugin
不过这种技术的缺点也很明显,我们在打包过程中,所展示的页面是当时环境下的数据,也就是说如果首页有很多的动态获取的数据(比如说实时的股票价格),那如果采用这种方案,用户第一眼看到并不是当时数据,会认为是个错误信息。
3.骨架屏(占位块和图片)
骨架屏可以说现在比较实用的首屏优化技术了,方便也不是很复杂。骨架屏类似于app的启动页,一般我们进入app都会有宣传的启动页,然后才看到首页。骨架屏就是这样,用户进来首先看到的是骨架屏,然后首页渲染完之后,再把骨架屏干掉。
骨架屏主要有两种方式可以完成:
通过编译的时候自动生成还是puppeteer(上面说了预渲染也用,它主要是能在代码里面唤起chrome浏览器,或者后台唤起,也就是没有弹出浏览器,但是可以获取到真实浏览器中渲染的内容),有了它我们就能获取到浏览器里面的dom元素,然后通过对页面中元素进行删减或增添,对已有元素进行修改生成我们想要的骨架,然后将修改后的 HTML 和 CSS 样式提取出来,这样就是骨架屏了。当然遇到了图片的话,还是需要转成svg的形式,或者base64这样就不需要网络请求了。
通过设计图+布局这是一种直接重新写一个页面的方式,图片的话采用svg和base64的形式,生成一个dom,解析注入到服务器返回的index.html里面(ssr render注入)。
现在网络上的项目,最能提现的就是饿了么的h5了,我们可以通过手机浏览器打开饿了么。
我们首先看到是骨架屏,然后过一会才会看到首屏,这就是饿了么用了这种技术,很大的提高了用户的体验。page-skeleton-webpack-plugin项目地址:https://github.com/ElemeFE/page-skeleton-webpack-plugin
SSL延迟有多大?
我们知道http是经过TCP三次握手就可以成功通讯 。再来看Https链接,它也采用TCP协议发送数据,所以它也需要上面的这三步握手过程。而且,在这三步结束以后,它还有一个SSL握手。
HTTP耗时 = TCP握手 ; HTTPS耗时 = TCP握手 + SSL握手
在研究ssl延迟之前,我们先来学一个命令行工具curl,-w,–write-out参数。顾名思义,write-out的作用就是输出点什么。curl的-w参数用于在一次完整且成功的操作后输出指定格式的内容到标准输出。
主要了解下几个参数:
http_code http状态码
time_total 总时间,按秒计。
time_namelookup DNS解析时间,从请求开始到DNS解析完毕所用时间
time_connect 连接时间,从开始到建立TCP连接完成所用时间,
time_appconnect 连接建立完成时间,如SSL/SSH等建立连接或者完成三次握手时间。
我们主要用time_connect(TCP握手的耗时),time_appconnect(SSL握手的耗时)
终端输入curl -w "TCP握手的耗时: %{time_connect}, SSL握手的耗时: %{time_appconnect}\n" -so /dev/null https://www.taobao.com
我们可以看到ssl耗时是tcp的三倍左右,具体数字取决于CPU的快慢和网络状况。
所以,如果是对安全性要求不高的场合,为了提高网页性能,建议不要采用保密强度很高的数字证书。
防抖节流那些事
在开发过程中我们很多时候会碰到需要防抖和节流去解决问题。不要小看它们,没有它们的话,特定情况下的会造成很大的性能阻塞。
防抖(当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次)防抖我们可以理解为,存在一个scroll事件,只要滚动就会触发handler回调函数,防抖的处理是,等scroll事件完全停下来1000ms(这个值自行设定)之后,再出触发handler函数。
节流(当持续触发事件时,保证一定时间段内只调用一次事件处理函数)节流顾名思义,触发scroll事件的时候,并不立即执行handle函数,每隔1000ms(这个值自行设定)才会执行一次handle函数
区别:节流是每一个时间段之后就会触发一次,存在间隙的连续触发,而防抖不一样,只会在最后才触发一次。
重排与重绘的相爱相杀
从前面的文章(浏览器渲染过程剖析)已经学到了网页的生成过程。
HTML代码转化成DOM
CSS代码转化成CSSOM(CSS Object Model)
结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
生成布局(layout),即将所有渲染树的所有节点进行平面合成
将布局绘制(paint)在屏幕上
1-3步都很快,耗时的是第四步和第五步。这两步合称”渲染“,在网上生成的过程中,网页至少会渲染一次。
有三种情况会导致浏览器重新渲染:
1.修改DOM
2.修改样式表
3.用户事件(比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等)
重新渲染,就需要重新生成布局和重新绘制。前者叫做"重排"(reflow),后者叫做"重绘"(repaint)。
重排和重绘不断的触发,是影响网页性能低下的根本原因。提高网页性能,就是要降低"重排"和"重绘"的频率和成本,尽量少触发重新渲染。重排必定会重绘,而重绘不一定重排。
最后
喜欢小编的可以点个赞关注小编哦,小编每天都会给大家分享文章。
我自己是一名从事了多年的前端老程序员,小编为大家准备了新出的前端编程学习资料,免费分享给大家!
如果你也想学习前端,加入此Q群:950919261
你可能感兴趣的:(你不知道的 Web 性能优化 | 原力计划-重拳出击)
从图形处理到通用计算的进化之路
绿算技术
GPU架构介绍 科技 gpu算力
图形处理单元,作为现代计算机中不可或缺的一部分,已经从最初的图形渲染专用处理器,发展成为强大的并行计算引擎,广泛应用于人工智能、科学计算、游戏娱乐等领域。本文将深入探讨GPU架构的演变历程、核心组件以及其在不同应用场景中的优势。GPU架构的演变:从固定功能到可编程流水线早期的GPU采用固定功能流水线架构,专为图形渲染任务而设计。这种架构将图形渲染流程划分为一系列固定的阶段,例如顶点处理、光栅化、纹
关于STM32常用的8种GPIO输入输出模式的理解
MPU技术极客笔记
项目开发经验:STM32 stm32 单片机 嵌入式硬件
目录GPIO共有8中输入输出模式,分别是:上拉输入、下拉输入、浮空输入、模拟输入、开漏输出、推挽输出、开漏复用输出、推挽复用输出,下面我们详细介绍以下上面的八种输入输出模式。一、输入模式(1)上拉输入:GPIO_Mode_IPU(2)下拉输入:GPIO_Mode_IPD(3)浮空输入:GPIO_Mode_IN_FLOATING(4)模拟输入:GPIO_Mode_AIN二、输出模式(1)开漏输出:G
数据处理和分析之数据降维:t-SNE:使用t-SNE进行数据可视化实践
kkchenkx
数据挖掘 信息可视化 算法 聚类 均值算法 数据挖掘 机器学习
数据处理和分析之数据降维:t-SNE:使用t-SNE进行数据可视化实践数据降维简介降维技术的重要性在数据科学和机器学习领域,数据降维是一种关键的技术,用于减少数据集的维度,同时保留数据的结构和重要信息。降维不仅可以帮助我们更有效地存储和处理数据,还能在高维数据中发现潜在的模式和结构,这对于数据可视化和模型训练尤为重要。高维数据往往难以直观理解,通过降维,我们可以将其转换为二维或三维空间,便于可视化
MySQL 深度分页如何优化?
司徒阿宝
mysql 数据库
例如select*fromt1orderby10000,10查询10000-10010页数据,mysql会先查询出100010页,再抛弃100000。这个操作会产生大量的无用IO/CPU消耗范围查询1.当ID能保证连续无空缺时,可以使用范围查询。select*fromt1whereid>{seed_id}andid{seed_id}limit10子查询我们先查询出limit第一个参数对应的主键值,
C++泛型编程
鱼不如渔
C++ Primer第五版——读书笔记 c++ 开发语言
感谢哔哩哔哩UP”开发者LaoJ“,以下是听课记录~模板是C++实现泛型编程的手段,同一段代码逻辑可以接受多个类型的参数无论是函数模板还是类模板,在编码后,需要分文件时,将其声明和定义放进.hpp文件中。不要将声明放.h,定义放.cpp,会报错一、函数模板对于函数模板,使用不同的类型对其进行实例化时,会生成多个不同的函数当没有调用函数模板时,不会被实例化(延迟实例化)1.1、接受类型参数#incl
STM32 单片机常见的 8 种输入输出模式
嵌入式修炼师
STM32 单片机 stm32
STM32单片机常见的8种输入输出模式文章目录STM32单片机常见的8种输入输出模式1.浮空输入模式(GPIO_Mode_IN_FLOATING)介绍使用场景示例代码2.上拉输入模式(GPIO_Mode_IPU)介绍使用场景示例代码3.下拉输入模式(GPIO_Mode_IPD)介绍使用场景示例代码4.模拟输入模式(GPIO_Mode_AIN)介绍使用场景示例代码5.开漏输出模式(GPIO_Mode
MCU的工作原理:嵌入式系统的控制核心
绿算技术
MCU架构介绍 单片机 嵌入式硬件
MCU的工作原理可以概括为以下几个步骤:1.初始化上电后,MCU从Flash存储器中加载程序代码,并初始化外设和寄存器。2.任务执行根据程序逻辑,MCU执行数据处理、外设控制和通信等任务。通过中断系统实时响应外部事件。3.低功耗管理在空闲时,MCU进入低功耗模式,等待外部事件唤醒。4.结果输出通过GPIO、通信接口或模拟接口输出处理结果。MCU的架构:模块化与可扩展性MCU的架构设计注重模块化和可
基于ASP.NET校园二手交易网站设计与实现
汐泽学园
asp.net 后端
摘要校园二手交易市场伴随互联网技术的迅猛发展以及校园内资源共享需求的增长而逐渐兴起。基于ASP.NET开发的校园二手交易网站,目的在于为高校师生打造一个便捷、安全且高效的二手物品交易平台。此网站借助ASP.NET技术开展开发工作,并且结合SQLServer数据库来存储数...关键词ASP.NET;校园二手交易;网站设计AbstractWiththerapiddevelopmentofInterne
Conda报错解决:ProxyError: Conda cannot proceed due to an error in your proxy configuration.
三采
Linux Conda 代理
目录原因一:源配置有误原因二:代理配置有误原因三:路由配置有误在需要使用代理的服务器下,创建新conda环境时报错:condacreate-nopencompasspython=3.8/usr/lib/python3/dist-packages/requests/__init__.py:89:RequestsDependencyWarning:urllib3(1.26.9)orchardet(3.
第20篇:从零开始构建NLP项目之电商用户评论分析:模型训练阶段
Gemini技术窝
自然语言处理 人工智能 深度学习 AIGC 机器学习 nlp langchain
大家好,今天我们继续探讨如何从零开始构建一个NLP项目,特别是电商用户评论分析中的模型训练阶段。模型训练是NLP项目的核心环节,通过合理的调参和优化,可以显著提升模型性能。本文将详细介绍模型训练的步骤,并展示如何使用LangChain库进行模型训练、调参和优化。文章目录项目的背景和目标模型训练的详细步骤安装依赖包流程图1.准备数据2.定义模型3.训练模型4.评估模型5.调参与优化常见错误和注意事项
MyBatis注解开发之一对多查询
我心向阳iu
# Mybatis Java面试知识点精讲 mybatis java mysql
文章目录0.MyBatis的注解实现复杂映射开发1.一对多查询1.1一对多查询的模型1.2一对多查询的语句1.3创建StudentMapper接口1.4使用注解配置Mapper1.5测试类1.6一对多配置总结0.MyBatis的注解实现复杂映射开发实现复杂关系映射之前我们可以在映射文件中通过配置来实现,使用注解开发后,我们可以使用@Results注解,@Result注解,@One注解,@Many注
什么是mybatis?
十二.413
mybatis java 数据库
目录一、mybatis框架介绍二、mybatis配置三、mybatis逆向工程三、userMapper.xml配置一、mybatis框架介绍1.1mybatis本是apache的一个开源项目iBatis,2010年这个项目由apachesoftwareoundation迁移到了googlecode,并且改名为MyBatis。2013年11月迁移到Github。mybatis是一个基于Java的持久
高效快速教你deepseek如何进行本地部署并且可视化对话
chatgpt
随着最近一个新的人工智能deepseek的爆火,很多大佬都开始了在本地进行deepseek的部署操作,并且离线也可以使用,这里的话我就一步一步带你们部署本地的deepseek,说实话这个人工智能的实力不亚于openai的gpt安装ollama我们需要先安装ollama,安装地址ollama,我们直接点击下载,我们在下载的时候尽量使用我们的谷歌浏览器,有魔法的最好带上魔法,不然安装的时候可能会出问题
79.HarmonyOS NEXT 手势操作模型详解:移动、缩放与旋转的实现原理
harmonyos-next
温馨提示:本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦!HarmonyOSNEXT手势操作模型详解:移动、缩放与旋转的实现原理1.模型概述这组模型类主要用于处理手势交互中的各种变换操作,包括:位置控制(PositionModel)偏移计算(OffsetModel)旋转处理(RotateModel)缩放控制(Scale
基于oracle linux的 DBI/DBD 标准化安装文档(二)
文档
一、安装DBIDBI(DatabaseInterface)是perl连接数据库的接口。其是perl连接数据库的最优方法,他支持包括Orcale,Sybase,mysql,db2等绝大多数的数据库,下面将简要介绍其安装方法。1.1解压tar-zxvfDBI-1.616_901.tar.gz1.2安装依赖yuminstallperl-ExtUtils-CBuilderperl-ExtUtils-Mak
全网最有效树莓派完整详细的换源教程
执着的着
电子 服务器 运维 linux
一、什么是源?软件源就是一个应用程序安装库,很多很多的应用软件都在这个库里面。他可以是网络服务器,是光盘,甚至是硬盘上的一个目录。常见软件源类型GEM源、APT源、YAST源、ISO源、YUM源、UAP源二、为什么换源?树莓派系统默认下载软件的服务器在国外,经常出现下载比较慢、或者直接没用的情况以及无法更新的情况。这时就需要更换为我们国内的镜像站来加快速度了。三、开始换源第一步输入下面命令打开文件
mybatis一对多结果集,主表分页查询,子表条件查询
寂寞旅行
Mybatis MP mybatis tomcat java
文章目录前言一、举个栗子二、如何解决这个问题1.嵌套查询2.嵌套结果集查询根据如上思路,这里做些伪代码方便大家理解总结太复杂了,有更简单的前言一对多查询mybatis中一对多的查询一般分为两种:嵌套查询:主表查询过程中,再次调用一个查询,取查询子表数据嵌套结果集查询:一次性查询主表关联出子表,通过结果集封装,将自己封装为一个集合,返回一个一对多的结果今天要说的是当:做了一对多查询后,还要对多的子表
selenium+pyquery爬取《鱿鱼游戏》评论2000+条
铁憨憨0304
python爬虫 selenium python 测试工具
IMDB网址爬取《鱿鱼游戏》的全部评论评论排名评论标题id评论时间评论内容导入所需要的包selenium:模拟浏览器,这里使用的是Edge浏览器,需要安装Edge浏览器驱动解析库:PyQuery保存数据:pandas,保存为csv文件fromseleniumimportwebdriverfromselenium.webdriver.support.uiimportWebDriverWaitfrom
基于asp.NET的病历管理系统 (源码+net+vue+部署文档+讲解等)
qq_1406299528
计算机毕业设计 asp asp.net vue.js 后端
收藏关注不迷路!!文末获取源码+数据库感兴趣的可以先收藏起来,还有大家在毕设选题(免费咨询指导选题),项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人文章目录前言程序资料获取一、项目技术二、项目内容和功能介绍三、核心代码数据库参考四、效果图五、资料获取前言博主介绍:✨全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,专注于Java/Python/小程序app/深度学
MyBatis一对多关联查询
qq_25073223
Mybatis mybatis
转自:MyBatis一对多关联查询一对多级联关系的处理一对多的级联关系:在我们日常开发中有很多这样的情况,如:一个用户下面会有很多订单,但是每一个订单都只会属于一个用户,这就是一个典型的一对多的级联关系操作,那么如何使用MyBatis进行此类数据的查询操作呢?下文将一一道来,如下所示:实现思路:在MyBatis中,我们可通过元素的子元素处理一对多级联关系,collection可以将关联查询的多条记
过滤器和拦截器的区别详解
总是学不会.
Java Web 开发 java spring boot maven spring
文章目录过滤器和拦截器的区别详解一、基本概念1.过滤器(Filter)2.拦截器(Interceptor)二、核心区别三、执行流程对比四、具体实现1.过滤器的实现常用场景:2.拦截器的实现2.1.`preHandle`方法2.2.`postHandle`方法2.3.`afterCompletion`方法五、应用场景总结过滤器适合场景拦截器适合场景六、总结过滤器和拦截器的区别详解过滤器(Filter
Spring Boot 启动失败:Failed to start bean ‘documentationPluginsBootstrapper’ 解决方案
总是学不会.
异常报错处理 spring boot 后端 java
文章目录1.问题描述2.可能原因分析原因1:SpringFox版本与SpringBoot版本不兼容❌✅解决方案:添加兼容性配置(首选!!!!)原因2:SpringFox依赖冲突⚠️✅解决方案:确保只使用正确的SpringFox依赖原因3:SpringBoot3.x不支持SpringFox✅解决方案:使用springdoc-openapi替代SpringFox原因4:Swagger配置文件错误✅解决
STM32定时器、PWM周期、频率、占空比的计算
你也喜欢吃香菜嘛
stm32 嵌入式硬件 单片机
频率和周期:PWM的频率=时钟频率/(自动重装值+1)*(预分频值+1)STM32的最大时钟频率为72MHz=72000000Hz例PWM频率=72000000/(100-1+1)*(720-1+1)=1000Hz周期=1/f=1/1000=1ms占空比:占空比=CCR/(ARR+1)当Compare=50时,改PWM的占空比为50/(100-1+1)=50%
爬取电影标题、评论、评分(21-11-4)
穆桥
Python爬虫 XPath解析 MySQL数据库 电影信息 疾病数据
功能描述:1、爬取网页1中的电影名称、评分、简介到mysql数据库中。2、爬取网页2中的标题、时间、正文、采集时间到mysql数据库中。使用的技术:requests请求、xpath解析、mysqlxpath解析语法//子孙节点/直接子节点.选取当前节点…选取当前节点的父节点@选取属性通过Python的lxml库,利用XPath进行HTML的解析。scrapy封装了lxml也可以导入scrapy任务
什么是 MyBatis?有哪些优点和缺点?
码农落落
java基础 mybatis java 数据库
什么是MyBatis?有哪些优点和缺点?MyBatis是一款基于Java的开源持久化框架,可以帮助开发者轻松地将SQL语句与Java对象映射起来,使业务逻辑与数据持久化分离,提高开发效率。MyBatis的主要优点和缺点如下:优点:1.简单易用:MyBatis对开发者提供了简单易用的API,无需编写繁琐的JDBC代码,降低了学习和使用成本。2.灵活性强:MyBatis比较灵活,支持多种配置方式,可以
ASP.NET Core 项目 - 汽车租赁系统教程
齐游菊Rosemary
ASP.NETCore项目-汽车租赁系统教程项目地址:https://gitcode.com/gh_mirrors/as/ASP.NET-Core-Project-Car-Renting-System1、项目介绍ASP.NETCore项目-汽车租赁系统是一个基于ASP.NETCore框架的开源项目,旨在提供一个完整的汽车租赁管理系统。该项目包含了用户管理、车辆管理、租赁订单管理等功能模块,适用于中
NLP-二分类的应用-区分外卖评论好评/差评
左岸Jason
算法 python kafka flink elasticsearch
目录一、概念二、二分类实战-划分好评/差评1.处理步骤2.实战代码一、概念文本分类一般可以分为二分类、多分类、多标签分类三种情况。二分类是指将一组文本分成两个类(0或1),比较常见的应用如垃圾邮件分类、电商网站的用户评价数据的正负面分类等,多分类是指将文本分成若干个类中的某一个类,比如说门户网站新闻可以归属到不同的栏目中(如政治、体育、社会、科技、金融等栏目)去。多标签分类指的是可以将文本分成若干
树莓派3B+刷了Pi OS 12(Debian12 bookworm)后软件源更换清华(备忘)
RockyCoder
windows
每次折腾树莓派重刷系统,都要面临一次更新国内软件源的过程。所以从清华那边贴过来备份以下过程。树莓派软件源的官方帮助网址raspbian|镜像站使用帮助|清华大学开源软件镜像站|TsinghuaOpenSourceMirrorRaspbian简介Raspbian是专门用于ARM卡片式计算机RaspberryPi®“树莓派”的操作系统,其基于Debian开发,针对RaspberryPi硬件优化。Ras
什么是Mybatis?最全的Mybatis知识点整合!
Tyloo_wdnmd
数据库 mybatis java python mysql
什么是Mybatis?最全的Mybatis知识点整合!一、什么是Mybatis?MyBatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,开发时只需要关注SQL语句本身,不需要花费精力去加载驱动、创建连接、创建Statement等繁杂过程。程序员直接编写原生态sql,可以严格控制sql执行性能,灵活度高。Mybatis可以使用XML或注解来配置和映射原生信息,将POJO映射成数据库中
MyBatis高级查询:一对多查询详解
蓝天资源分享
mybatis tomcat java
MyBatis高级查询:一对多查询详解MyBatis是一个优秀的持久层框架,它支持定制化SQL、存储过程以及高级映射。MyBatis免除了几乎所有的JDBC代码和手动设置参数以及获取结果集的工作。MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJOs(PlainOldJavaObjects,普通的Java对象)映射成数据库中的记录。本文将深入探讨MyBatis中的
mondb入手
木zi_鸣
mongodb
windows 启动mongodb 编写bat文件,
mongod --dbpath D:\software\MongoDBDATA
mongod --help 查询各种配置
配置在mongob
打开批处理,即可启动,27017原生端口,shell操作监控端口 扩展28017,web端操作端口
启动配置文件配置,
数据更灵活 
大型高并发高负载网站的系统架构
bijian1013
高并发 负载均衡
扩展Web应用程序
一.概念
简单的来说,如果一个系统可扩展,那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集,并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种:
1.
DISPLAY变量和xhost(原创)
czmmiao
display
DISPLAY
在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
获取B/S客户端IP
周凡杨
java 编程 jsp Web 浏览器
最近想写个B/S架构的聊天系统,因为以前做过C/S架构的QQ聊天系统,所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统,由于存在客户端Java应用,所以直接在代码中获取客户端的IP,应用的方法为:
String ip = InetAddress.getLocalHost().getHostAddress();
然而对于WEB
浅谈类和对象
朱辉辉33
编程
类是对一类事物的总称,对象是描述一个物体的特征,类是对象的抽象。简单来说,类是抽象的,不占用内存,对象是具体的,
占用存储空间。
类是由属性和方法构成的,基本格式是public class 类名{
//定义属性
private/public 数据类型 属性名;
//定义方法
publ
android activity与viewpager+fragment的生命周期问题
肆无忌惮_
viewpager
有一个Activity里面是ViewPager,ViewPager里面放了两个Fragment。
第一次进入这个Activity。开启了服务,并在onResume方法中绑定服务后,对Service进行了一定的初始化,其中调用了Fragment中的一个属性。
super.onResume();
bindService(intent, conn, BIND_AUTO_CREATE);
base64Encode对图片进行编码
843977358
base64 图片 encoder
/**
* 对图片进行base64encoder编码
*
* @author mrZhang
* @param path
* @return
*/
public static String encodeImage(String path) {
BASE64Encoder encoder = null;
byte[] b = null;
I
Request Header简介
aigo
servlet
当一个客户端(通常是浏览器)向Web服务器发送一个请求是,它要发送一个请求的命令行,一般是GET或POST命令,当发送POST命令时,它还必须向服务器发送一个叫“Content-Length”的请求头(Request Header) 用以指明请求数据的长度,除了Content-Length之外,它还可以向服务器发送其它一些Headers,如:
HttpClient4.3 创建SSL协议的HttpClient对象
alleni123
httpclient 爬虫 ssl
public class HttpClientUtils
{
public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){
SSLContext sslContext=null;
try
{
sslContext=new SSLContextBuilder().l
java取反 -右移-左移-无符号右移的探讨
百合不是茶
位运算符 位移
取反:
在二进制中第一位,1表示符数,0表示正数
byte a = -1;
原码:10000001
反码:11111110
补码:11111111
//异或: 00000000
byte b = -2;
原码:10000010
反码:11111101
补码:11111110
//异或: 00000001
java多线程join的作用与用法
bijian1013
java 多线程
对于JAVA的join,JDK 是这样说的:join public final void join (long millis )throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
Java发送http请求(get 与post方法请求)
bijian1013
java spring
PostRequest.java
package com.bijian.study;
import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURL
【Struts2二】struts.xml中package下的action配置项默认值
bit1129
struts.xml
在第一部份,定义了struts.xml文件,如下所示:
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts
【Kafka十三】Kafka Simple Consumer
bit1129
simple
代码中关于Host和Port是割裂开的,这会导致单机环境下的伪分布式Kafka集群环境下,这个例子没法运行。
实际情况是需要将host和port绑定到一起,
package kafka.examples.lowlevel;
import kafka.api.FetchRequest;
import kafka.api.FetchRequestBuilder;
impo
nodejs学习api
ronin47
nodejs api
NodeJS基础 什么是NodeJS
JS是脚本语言,脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS,浏览器充当了解析器的角色。而对于需要独立运行的JS,NodeJS就是一个解析器。
每一种解析器都是一个运行环境,不但允许JS定义各种数据结构,进行各种计算,还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM,浏览器就提供了docum
java-64.寻找第N个丑数
bylijinnan
java
public class UglyNumber {
/**
* 64.查找第N个丑数
具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url]
*
题目:我们把只包含因子
2、3和5的数称作丑数(Ugly Number)。例如6、8都是丑数,但14
二维数组(矩阵)对角线输出
bylijinnan
二维数组
/**
二维数组 对角线输出 两个方向
例如对于数组:
{ 1, 2, 3, 4 },
{ 5, 6, 7, 8 },
{ 9, 10, 11, 12 },
{ 13, 14, 15, 16 },
slash方向输出:
1
5 2
9 6 3
13 10 7 4
14 11 8
15 12
16
backslash输出:
4
3
[JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新)
comsci
工作流
既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理
大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
redis常见使用
cuityang
redis 常见使用
redis 通常被认为是一个数据结构服务器,主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets
引入jar包 jedis-2.1.0.jar (本文下方提供下载)
package redistest;
import redis.clients.jedis.Jedis;
public class Listtest
配置多个redis
dalan_123
redis
配置多个redis客户端
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&quo
attrib命令
dcj3sjt126com
attr
attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.
只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.
存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件.
Yii使用公共函数
dcj3sjt126com
yii
在网站项目中,没必要把公用的函数写成一个工具类,有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用,成为公用的函数集合。 function.php如下:
<?php /** * This is the shortcut to D
linux 系统资源的查看(free、uname、uptime、netstat)
eksliang
netstat linux uname linux uptime linux free
linux 系统资源的查看
转载请出自出处:http://eksliang.iteye.com/blog/2167081
http://eksliang.iteye.com 一、free查看内存的使用情况
语法如下:
free [-b][-k][-m][-g] [-t]
参数含义
-b:直接输入free时,显示的单位是kb我们可以使用b(bytes),m
JAVA的位操作符
greemranqq
位运算 JAVA位移 << >>>
最近几种进制,加上各种位操作符,发现都比较模糊,不能完全掌握,这里就再熟悉熟悉。
1.按位操作符 :
按位操作符是用来操作基本数据类型中的单个bit,即二进制位,会对两个参数执行布尔代数运算,获得结果。
与(&)运算:
1&1 = 1, 1&0 = 0, 0&0 &
Web前段学习网站
ihuning
Web
Web前段学习网站
菜鸟学习:http://www.w3cschool.cc/
JQuery中文网:http://www.jquerycn.cn/
内存溢出:http://outofmemory.cn/#csdn.blog
http://www.icoolxue.com/
http://www.jikexue
强强联合:FluxBB 作者加盟 Flarum
justjavac
r
原文:FluxBB Joins Forces With Flarum作者:Toby Zerner译文:强强联合:FluxBB 作者加盟 Flarum译者:justjavac
FluxBB 是一个快速、轻量级论坛软件,它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写,并已经开发了一段时间。FluxBB 看起来非常有前途的,
java统计在线人数(session存储信息的)
macroli
java Web
这篇日志是我写的第三次了 前两次都发布失败!郁闷极了!
由于在web开发中常常用到这一部分所以在此记录一下,呵呵,就到备忘录了!
我对于登录信息时使用session存储的,所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。
1、实现接口类,在web.xml文件中配置监听类,从而可以使该类完成其工作。
public class Ses
bootstrp carousel初体验 快速构建图片播放
qiaolevip
每天进步一点点 学习永无止境 bootstrap 纵观千象
img{
border: 1px solid white;
box-shadow: 2px 2px 12px #333;
_width: expression(this.width > 600 ? "600px" : this.width + "px");
_height: expression(this.width &
SparkSQL读取HBase数据,通过自定义外部数据源
superlxw1234
spark sparksql sparksql读取hbase sparksql外部数据源
关键字:SparkSQL读取HBase、SparkSQL自定义外部数据源
前面文章介绍了SparSQL通过Hive操作HBase表。
SparkSQL从1.2开始支持自定义外部数据源(External DataSource),这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0,简单介绍SparkSQL自定义外部数据源,访
Spring Boot 1.3.0.M1发布
wiselyman
spring boot
Spring Boot 1.3.0.M1于6.12日发布,现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下:
1.提供一个新的sprin