笔者所在的前端团队主要从事移动端的H5页面开发，而团队使用的适配方案是: viewport units + rem。具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 。

笔者目前（2017.08.12）接触到的移动端适配方案中，「利用视口单位实现适配布局」是最好的方案。不过使用 rem 作为单位会遇到以下两个难点：

  • 微观尺寸（20px左右）定位不准
  • 逐帧动画容易有抖动

第一个难点的通常出现在 icon 绘制过程，可以使用图片或者 svg-icon 解决这个问题，笔者强烈建议使用 svg-icon，具体理由可以参见：「拥抱Web设计新趋势：SVG Sprites实践应用」。

第二个难点笔者举个例子来分析抖动的原因和寻找解决方案。

一个抖动的例子

做一个8帧的逐帧动画，每帧的尺寸为：360x540。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 45rem 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite; 
}

@keyframes step {
  100% {
    background-position: -45rem;
  }
}

观察在主流（手机）分辨率下的播放情况：

CSS技巧：逐帧动画抖动解决方案_第1张图片 CSS技巧：逐帧动画抖动解决方案_第2张图片 CSS技巧：逐帧动画抖动解决方案_第3张图片 CSS技巧：逐帧动画抖动解决方案_第4张图片
CSS技巧：逐帧动画抖动解决方案_第5张图片
iPhone 6 (375x667)		 CSS技巧：逐帧动画抖动解决方案_第6张图片
iPhone 6+ (414x736)
CSS技巧：逐帧动画抖动解决方案_第7张图片
iPhone 5 (320x568)		 CSS技巧：逐帧动画抖动解决方案_第8张图片
Android (360x640)

四种分辨率下，可以看到除了 ip6 其它的三种分辨率都发生了抖动。（ip6 不抖动的原因是适配方案是基本于 ip6 的分辨率订制的。）

分析抖动

图像由终端（屏幕）显示，而终端则是一个个光点（物理像素）组成的矩阵，换句话说图片也一组光点矩阵。为了方便描述，笔者假设终端上的一个光点代表css中的1px。

以下是一张 9px * 3px 的sprite:
CSS技巧：逐帧动画抖动解决方案_第9张图片

每帧的尺寸为 3px * 3px，逐帧的取位过程如下：
CSS技巧：逐帧动画抖动解决方案_第10张图片

把 sprite 的 background-size 的宽度取一半，那么终端会怎么处理？
9 / 2 = 4.5
终端的光点都是以自然数的形式出现的，这里需要做取整处理。取整一般是三种方式：round/ceil/floor。假设是 round ，那么 background-size: 5px，sprite 会是以下三种的一个：

情况一 情况二 情况三
CSS技巧：逐帧动画抖动解决方案_第11张图片 CSS技巧：逐帧动画抖动解决方案_第12张图片 CSS技巧：逐帧动画抖动解决方案_第13张图片

理论上，5 / 3 = 1.666...。但实际上光点取整后，三个帧的宽度都不可能等于 1.666...，而是有一个帧的宽度降级为 1px（亏），另外两个宽度升级为 2px（盈），笔者把这个现象称作「盈亏互补」。

再看一下盈亏互补后，逐帧的取位过程：

情况一 情况二 情况三
CSS技巧：逐帧动画抖动解决方案_第14张图片 CSS技巧：逐帧动画抖动解决方案_第15张图片 CSS技巧：逐帧动画抖动解决方案_第16张图片

可以看到由于盈亏互补导致了三个帧的宽度不一致，亏的那一帧在动画中的表示就是抖动。

笔者总结抖动的原因是：sprite在尺寸缩放后，帧与帧之间的盈亏互补现象导致动画抖动

附注：1px 由几个光点表示是由以终端的 dpr 决定

解决方案

「盈亏互补」也可以说是「盈亏不一致」，如果尺寸在缩放后「盈亏一致」那么抖动现象可以解决。

解决构想一

笔者根据「盈亏一致」设计了「解决构想一」：

CSS技巧：逐帧动画抖动解决方案_第17张图片

根据上图，其实很容易就联想到一个简单的方案：不用雪碧图（即一帧对应一张图片）。
这个方案确实是可以解决抖问题，不过笔者并不推荐使用它，因为它有两个负面的东西：

  • KB变大与请求数增多
  • 多余的 animation 代码

这个方案很简单，这里就不赘述了。

解决构想二

把逐帧取位与图像缩放拆分成两个独立的过程，就是笔者的「解决构想二」：
CSS技巧：逐帧动画抖动解决方案_第18张图片

实现「构想二」，笔者首先想到的是使用 transform: scale()，于是整理了一个实现方案A：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 1800px 540px;
  top: 50%;
  left: 50%; 
  transform-origin: left top; 
  margin: -5.625rem 0 0 -5.625rem; 
  transform: scale(.5); 
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}
/* 写断点 */
@media screen and (width: 320px) {
	.steps_anim {
		transform: scale(0.4266666667); 
	}
}
@media screen and (width: 360px) {
	.steps_anim {
		transform: scale(0.48); 
	}
}
@media screen and (width: 414px) {
	.steps_anim {
		transform: scale(0.552); 
	}
}

这个实现方案A存在明显的缺陷：scale 的值需要写很多断点代码。于是笔者结全一段 js 代码来改善这个实现方案B：

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url("//misc.aotu.io/leeenx/sprite/m.png") 0 0 no-repeat;
  background-size: 1800 540px;
  top: 50%;
  left: 50%; 
  transform-origin: left top; 
  margin: -5.625rem 0 0 -5.625rem; 
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}

javascript:

1
2
3
4
5
6
7
8
9
 
// 以下代码放到  中

                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(CSS技巧：逐帧动画抖动解决方案)

        

            

                
    
                    
  • 深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具
                        nseejrukjhad
数据库python
                        
    深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
    
                    
    • 
                    
  • CX8903：Ebike自行车仪表电源方案开发,Ebike智能仪表电源芯片
                        诚芯微科技
社交电子
                        
    CX8903：电动Ebike自行车仪表电源方案开发,Ebike智能仪表电源芯片推荐。电动助力自行车EBIKE凭借其环保、健康、低噪、和便捷等特点，成为了越来越受欢迎的骑行便利交通工具。提供电动Ebike自行车仪表电源方案开发、E-BIKE电动助力自行车仪表供电电源解决方案。CX8903采用100V高压制造工艺（芯片最高耐压可到100V以上），SOP-8L贴片封装，CX8903内置100V/90mΩ
    
                    
    • 
                    
  • CX8836：小体积大功率升降压方案推荐（附Demo设计指南）
                        诚芯微科技
社交电子
                        
    CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
    
                    
    • 
                    
  • OPENAIGC开发者大赛企业组AI黑马奖 | AIGC数智传媒解决方案
                        RPA中国
人工智能AIGC传媒
                        
    在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。无论您是技术专家还是爱好者，希望能带给您不一样的知识和启发。让我们一起探索AIGC的无限可能，见证科技与创意的完美融合！创未来AI应用赛-企业组AI黑马奖作品名称：AIGC数智传媒解决方案参赛团队：深圳市三象智能技术
    
                    
    • 
                    
  • Xinference如何注册自定义模型
                        玩人工智能的辣条哥
人工智能AI大模型Xinference
                        
    环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
    
                    
    • 
                    
  • wandb一直上传 解决方案
                        行业边缘的摸鱼怪
bug解决方案服务器linux服务器
                        
    问题描述运行带有wandb的代码时，虽然可以实现及时同步非常方便，但当设置错参数或其他原因不得不使用ctrl+C停止运行时，总会出现wandb一直上传个不停的现象，给在同一终端重新运行新的代码造成困难。解决方案运行以下代码把wandb的进程直接杀死。psaux|grepwandb|grep-vgrep|awk'{print$2}'|xargskill-9参考链接[CLI]:Ctrl+Ctokill
    
                    
    • 
                    
  • 程序员如何在AI时代保持核心竞争力
                        nfgo
chatgpt人工智能
                        
    程序员如何在AI时代保持核心竞争力随着AIGC（如ChatGPT、MidJourney、Claude等）大语言模型的相继涌现，AI辅助编程工具逐渐普及，程序员的工作方式正在发生深刻的变革。AI不仅能够自动生成代码，还能优化、调试、甚至提出解决方案。这一趋势让许多人担心：AI会不会最终取代部分编程工作？然而，也有人认为AI是提升效率的得力助手。那么，程序员在这个AI崛起的时代该如何应对？是专注某个领
    
                    
    • 
                    
  • python老是报参数未定义_Python函数默认参数常见问题及解决方案
                        weixin_39935571
python老是报参数未定义
                        
    一、默认参数python为了简化函数的调用，提供了默认参数机制：这样在调用pow函数时，就可以省略最后一个参数不写：在定义有默认参数的函数时，需要注意以下：必选参数必须在前面，默认参数在后；设置何种参数为默认参数？一般来说，将参数值变化小的设置为默认参数。python标准库实践python内建函数：函数签名可以看出，使用print('hellopython')这样的简单调用的打印语句，实际上传入了
    
                    
    • 
                    
  • 程序员架构师主要是做什么_程序员架构师：职责、技能与挑战
                        绿色小猪

                        
    免费备考资料（2024年11月软考）：历年试题+视频课合集+电子讲义点击领取>>>免费刷题：2024年11月软考备考刷题点此进入>>>程序员架构师的角色定位在软件开发领域，程序员架构师是一个至关重要的角色。他们不仅需要深入理解业务需求，还要将其转化为技术上的解决方案。程序员架构师是项目中的技术领航者，负责制定和维护软件系统的整体架构，确保系统的可扩展性、可维护性和性能。他们的工作涉及从概念化到实现
    
                    
    • 
                    
  • 使用datepicker和uploadify的冲突解决（IE双击才能打开附件上传对话框）
                        zhanglb12

                        
    在开发的过程当中，IE的兼容无疑是我们的一块绊脚石，在我们使用的如期的datepicker插件和使用上传附件的uploadify插件的时候，两者就产生冲突，只要点击过时间的插件，uploadify上传框要双才能打开ie浏览器提示错误Missinginstancedataforthisdatepicker解决方案//if(.browser.msie&&'9.0'===.browser.version
    
                    
    • 
                    
  • 加载资源时报错-ERR_CONNECTION_RESET，需要多次请求才能拿到资源的有效解决方案
                        Mebius1916
前端开发前端javascriptreact.js前端框架typescriptvue.js
                        
    初次加载资源时无法正常加载，需要多次刷新、请求才能拿到资源的有效解决方案前言在使用cloudinary进行图片上传并获取图片链接作为用户头像时发现，图片链接网址初次加载会报错：ERR_CONNECTION_RESET必须刷新几次才能获取到，原因可能是cloudinary没有国内的节点，而我用的是在新加坡的节点，所以会导致初次加载的时候被重定向。而这个错误会直接导致用户头像无法加载，因为在img中此
    
                    
    • 
                    
  • metaRTC/webRTC QOS 方案与实践
                        metaRTC
metaRTC解决方案webrtcqos
                        
    概述质量服务(QOS/QualityofService)是指利用各种技术方案提高网络通信质量的技术，网络通信质量需要解决下面两个问题：网络问题：UDP/不稳定网络/弱网下的丢包/延时/乱序/抖动数据量问题：发送数据量超带宽负载和平滑发送拥塞控制是各种技术方案的数据基础，丢包恢复解决丢包问题，抗乱序抖动解决网络乱序抖动问题，流量控制解决平滑发送数据/数据超带宽负载/延时问题。拥塞控制(Congest
    
                    
    • 
                    
  • 设计模式】Listener模式和Visitor模式的区别
                        不爱洗脚的小滕
设计模式访问者模式javagolang
                        
    文章目录前言一、介绍Listener模式Visitor模式二、代码实现2.1Listener模式的Java实现2.2Listener模式的Go实现2.3Visitor模式的Java实现2.4Visitor模式的Go实现三、总结前言在软件设计中，设计模式是解决特定问题的通用解决方案。Listener模式和Visitor模式是两种常见的行为设计模式，它们在不同的场景下提供了解决问题的有效方法。本文将详
    
                    
    • 
                    
  • python之pyecharts制作可视化数据大屏
                        cesske
大数据
                        
    文章目录前言一、安装Pyecharts二、创建Pyecharts图表三、设计大屏布局四、实时数据更新五、部署和展示总结前言使用Pyecharts制作可视化数据大屏是一个复杂但有趣的过程，因为Pyecharts本身是一个用于生成Echarts图表的Python库，而Echarts是由百度开发的一个开源可视化库，支持丰富的图表类型和高度自定义。然而，Pyecharts本身并不直接提供“大屏”的解决方案
    
                    
    • 
                    
  • 使用游戏盾就可以保证游戏不被攻击吗？
                        德迅云安全小李
游戏网络服务器安全网络安全
                        
    游戏服务器不管是个人的还是企业的，被攻击都是，很常见的，在所难免的。特别是游戏新上线时，都要承受的住哪些外来压力，玩家突然猛增，被攻击等等。如果承受不住可能会直接宣布游戏倒闭。这里我们一起来说说怎么用游戏盾防御游戏服务器。首先我们要了解的一点是，什么是"游戏盾"游戏盾是针对游戏行业所推出的高度可定制的网络安全解决方案，除了能针对大型DDoS攻击（T级别）进行有效防御外，还能彻底解决游戏行业特有的T
    
                    
    • 
                    
  • Web安全:Web体系架构存在的安全问题和解决方室
                        程序员-张师傅
前端安全web安全前端
                        
    Web体系架构在提供丰富功能和高效服务的同时，也面临着诸多安全问题。这些问题可能涉及数据泄露、服务中断、系统被控制等多个方面，对企业和个人造成不可估量的损失。以下是对Web体系架构中存在的安全问题及解决方案的详细分析：Web体系架构存在的安全问题注入攻击SQL注入：攻击者通过在输入字段中插入恶意SQL代码，操控后台数据库，窃取、篡改或删除数据。OS命令注入：攻击者通过输入字段插入恶意代码，执行系统
    
                    
    • 
                    
  • 【中国国际航空-注册_登录安全分析报告】
                        风控牛
验证码接口安全评测系列安全行为验证极验网易易盾智能手机
                        
    前言由于网站注册入口容易被黑客攻击，存在如下安全问题：1.暴力破解密码，造成用户信息泄露2.短信盗刷的安全问题，影响业务及导致用户投诉3.带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞所以大部分网站及App都采取图形验证码或滑动验证码等交互解决方案，但在机器学习能力提高的当下，连百度这样的大厂都遭受攻击导致点名批评，图形验证及交互验证方式的安全性到底如何？请看具体分析一、中国国际航空PC
    
                    
    • 
                    
  • SQLIntegrityConstraintViolationException解决方案
                        lu520zxcv
java
                        
    java.sql.SQLIntegrityConstraintViolationException:Duplicateentry'2'forkey't_pay.PRIMARY'当项目中出现上述异常表示，唯一的键已存在，再次向数据库插入相同唯一键的数据，此时，我们只需要将唯一键字段换一个既可。
    
                    
    • 
                    
  • 阿里云国际 CDN 和低延迟全球云解决方案
                        九河云
阿里云网络服务器安全
                        
    延迟与隐藏程度成反比。C数据存在，并且连接已建立，但在接收客户端请求响应和显示用户请求的内容时存在明显延迟。将数据从源移动到目标时，会出现即时丢失。延迟是数据发送器和数据接收器之间的时间差。此外，当通过云响应用户查询时，这种延迟会被放大。有多种因素会导致满足用户请求的潜在延迟。想象一下，您在美国数据中心部署了服务，并且您的用户遍布全球。在此拓扑中，来自美国的用户将能够以正常（如果不是很好）的性能使
    
                    
    • 
                    
  • raksmart洛杉矶云服务器全面解析
                        rak部落
服务器raksmart洛杉矶云服务器
                        
    RAKsmart洛杉矶云服务器是一种高性能的云计算解决方案，专为满足不同业务需求而设计。以下是对RAKsmart洛杉矶云服务器的具体介绍，rak小编为您整理发布raksmart洛杉矶云服务器全面解析。1.线路选择：RAKsmart洛杉矶云服务器提供多种网络线路选项，包括大陆优化线路和CN2ONLY线路。这些线路能够提供更稳定和快速的连接速度，特别适合需要高效数据传输和低延迟的业务环境。2.性能表现
    
                    
    • 
                    
  • 了解 UNPKG：前端开发者的包管理利器
                        小于负无穷
前端javascripttypescriptcsshtml5node.js
                        
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
    
                    
    • 
                    
  • 使用FPGA接收MIPI CSI RX信号并进行去抖动、RGB转YUV处理：FX3014 USB3.0 UVC传输与帧率控制源代码，FPGA实现MIPI CSI RX接收，去Debayer， RGB转
                        kVfINoSzdrt
fpga开发程序人生
                        
    fpgamipicsirx接收去debayer,rgb转yuv,fx3014usb3.0uvc传输与帧率控制源代码，具体架构看图，除dphy物理层外，mipi均为源码sensorimx219mipi源码mipi4lanecsirxraw10fpgamachXO3lf-690usb3.0fx301432bityuvdatawithframesync测试模式3280*246415fps1920*108
    
                    
    • 
                    
  • Lombok：Java开发者的代码简化神器【后端 17】
                        终末圆
Java后端java开发语言mysql数据库后端springbootpython
                        
    Lombok：Java开发者的代码简化神器在Java开发中，我们经常需要编写大量的样板代码，如getter、setter、equals、hashCode、toString等方法。这些代码虽然基础且必要，但往往占据了大量开发时间，且容易在属性变更时引发错误。幸运的是，Lombok这个Java库通过注解的方式，为我们提供了一种高效的解决方案。本文将详细介绍Lombok的使用及其优势。什么是Lombok
    
                    
    • 
                    
  • 二胎（二）
                        梦中雅致

                        
    今天宝宝三十周了，还有十周你就要出来了，也许会提前，妈妈和家人都很期待。到了孕晚期，睡觉是个问题，左睡右睡都不对，自己睡的不舒服，自己舒服了，宝宝不舒服，睡着了怕把宝宝压着了，一晚上还要起来上厕所两次，感觉一晚上就是半梦半醒中。每天早上起来的第一件事就是感觉宝宝的胎动，如果没动心里就发慌。最近宝宝的胎动有些跟大宝不一样，偶尔会抖动一下，像手机震动一下，不知道咋回事？在网上查了一下，好多有这种情况，
    
                    
    • 
                    
  • 华为USG6000E-S12防火墙Key exchange failed.无法SSH解决方案
                        redmond88
网络技术ssh华为运维
                        
    由于目前防火墙算法太新，导致crt和xshell的版本无法登陆，按以下方法解决一、下载华为本地加载除弱安全算法组件包之外的组件包https://download.csdn.net/download/redmond88/89620664?spm=1001.2014.3001.5503二、先改后缀名为.cfg,上传文件到防火墙三、在用户视图下改后缀名为.mod四、move文件到$_install_mo
    
                    
    • 
                    
  • C#文件被占用的解决方案
                        花北城
C#项目文件占用
                        
    问题打更新包时，提示文件被占用。System.IO.IOException:文件“D:\RS\RS_CCVI20111210.exe”正由另一进程使用，因此该进程无法访问该文件。在System.IO.__Error.WinIOError(Int32errorCode,StringmaybeFullPath)在System.IO.FileStream.Init(Stringpath,FileMode
    
                    
    • 
                    
  • SpringSecurity初学总结
                        weixin_66442229
spring
                        
    springSecurity安全框架基于Java的安全框架主要有:SpringSecurity和Shiro介绍基础概念安全框架是对用户访问权限的控制,保证应用的安全性。其主要的工作是用户认证和用户授权|鉴权主要应用于Spring的企业应用系统,提供声明式的安全访问控制解决方案。它提供了一组可以在Spring应用上下文中配置的Bean能很好的结合Spring的DI依赖注入和AOP面向切面编程功能应用
    
                    
    • 
                    
  • 系统设计DDIA之Chapter 7 Transactions 之防止丢失更新
                        暴躁老哥在线刷题
SystemDesign数据库系统设计大数据系统架构DDIA
                        
    防止丢失更新涉及处理多个事务并发写入时发生的各种冲突类型。虽然“读已提交”和“快照隔离”等隔离级别管理与读取相关的冲突，但防止丢失更新需要额外的措施来处理写写冲突。丢失更新问题：当两个事务同时读取一个值，对其进行修改，然后将修改后的值写回时，会发生这种问题。一个修改可能会覆盖或“破坏”另一个修改，导致更新丢失。例子包括递增计数器、更新复杂文档，或多个用户同时编辑相同内容。防止丢失更新的解决方案：原
    
                    
    • 
                    
  • 影刀RPA与WPS文档协同办公：实现高效自动化处理的策略与实践
                        enter回车键
影刀RPA
                        
    摘要随着数字化转型的深入，企业对于办公自动化的需求日益增长。影刀RPA（RoboticProcessAutomation）与WPS文档的协同办公提供了一种高效、自动化的解决方案。本文旨在探讨影刀RPA与WPS文档如何配合使用，以实现工作流程的自动化，提高办公效率，并为企业带来实际效益。引言影刀RPA作为一种自动化工具，能够模拟人类用户的行为，执行重复性高、规则性强的工作任务。而WPS文档作为办公软
    
                    
    • 
                    
  • SAP IoT能力揭秘
                        小哈公社

                        
    SAP是企业软件行业的一哥，不过一哥也要拓展地盘。物联网（IoT）就是SAP最近很想占据的新地盘，让我们来看看SAP有些什么新菜端上桌。很多人都知道SAP推出了Leonardo这个最新的产品组合，其中就包括了物联网（InternetofThings,IoT）解决方案。SAP试图在Leonardo这个产品中把未来企业数字化转型所需的各种功能都包括进来，而IoT就是相当重要的一块拼图。Leonardo
    
                    
    • 
                                
  • 如何用ruby来写hadoop的mapreduce并生成jar包
                                    wudixiaotie
mapreduce
                                    
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 
1.安装rvm： 
    不说了 网上有 
2.安装ruby： 
    由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 
3.安装jruby： 
    rvm install jruby然后等待安
    
                                
    • 
                                
  • java编程思想 -- 访问控制权限
                                    百合不是茶
java访问控制权限单例模式
                                    
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问 
  
一:包访问权限; 
  
自定义包: 
package com.wj.control;
//包
public class Demo {
  //定义一个无参的方法
	public void DemoPackage(){
		System.out.println("调用
    
                                
    • 
                                
  • [生物与医学]请审慎食用小龙虾
                                    comsci
生物
                                    
     
     现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡..... 
 
     所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质 
    
    
                                
    • 
                                
  • org.apache.jasper.JasperException: Unable to compile class for JSP:
                                    商人shang
maven2.2jdk1.8
                                    
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 
原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即 
  
  
<plugin>
				
    
                                
    • 
                                
  • 你的垃圾你处理掉了吗?GC
                                    oloz
GC
                                    
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 
 
 
 
1.垃圾收集算法的核心思想 
　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 
　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
    
                                
    • 
                                
  • shiro 和 SESSSION
                                    杨白白
shiro
                                    
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
    
                                
    • 
                                
  • 移动互联网终端 淘宝客如何实现盈利
                                    小桔子
移動客戶端淘客淘寶App
                                    
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
    
                                
    • 
                                
  • wordpress小工具制作
                                    aichenglong
wordpress小工具
                                    
    wordpress 使用侧边栏的小工具，很方便调整页面结构 
小工具的制作过程 
1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 
小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 
<?php 
 class AWP_Post_Category extends WP_Wi
    
                                
    • 
                                
  • JS微信分享
                                    AILIKES
js
                                    
    // 所有功能必须包含在 WeixinApi.ready 中进行 
   WeixinApi.ready(function(Api) { 
       // 微信分享的数据 
           var wxData = { 
      &nb
    
                                
    • 
                                
  • 封装探讨
                                    百合不是茶
JAVA面向对象 封装
                                    
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性 
  
在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用 
  
例如   1： 
	//属性 将其设为私有
	姓名 name 可以公开

    
                                
    • 
                                
  • jquery radio/checkbox change事件不能触发的问题
                                    bijian1013
JavaScriptjquery
                                    
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
    
                                
    • 
                                
  • AngularJS中安全性措施
                                    bijian1013
JavaScriptAngularJS安全性XSRFJSON漏洞
                                    
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 
一.JSON漏洞 
        当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
    
                                
    • 
                                
  • [Maven学习笔记九]Maven发布web项目
                                    bit1129
maven
                                    
    基于Maven的web项目的标准项目结构 
user-project 
    user-core 
    user-service 
    user-web 
       src 
     
    
                                
    • 
                                
  • 【Hive七】Hive用户自定义聚合函数(UDAF)
                                    bit1129
hive
                                    
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 
问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？ 
  
Double evaluate(Double a, Double b) 
 
    
                                
    • 
                                
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持
                                    ronin47

                                    
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： 
&n
    
                                
    • 
                                
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法
                                    bsr1983
session
                                    
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。   在 tomcat-redis-session-manager的github上有如下说明：   Session Change Tracking 
As noted in the &qu
    
                                
    • 
                                
  • 《代码大全》表驱动法-Table Driven Approach-1
                                    bylijinnan
java算法
                                    
    关于Table Driven Approach的一篇非常好的文章： 
 
http://www.codeproject.com/Articles/42732/Table-driven-Approach 
 
 
package com.ljn.base;

import java.util.Random;

public class TableDriven {

    public 
    
                                
    • 
                                
  • Sybase封锁原理
                                    chicony
Sybase
                                    
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
    
                                
    • 
                                
  • java异常处理机制
                                    CrazyMizzz
java
                                    
    java异常关键字有以下几个，分别为 try catch final throw throws 
他们的定义分别为 
try：    Opening exception-handling statement. 
catch：  Captures the exception. 
finally： Runs its code before terminating
    
                                
    • 
                                
  • hive 数据插入DML语法汇总
                                    daizj
hiveDML数据插入
                                    
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
    
                                
    • 
                                
  • 工厂设计模式
                                    dcj3sjt126com
设计模式
                                    
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。  工厂模式 
工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。  
Example #1 调用工厂方法（带参数）   
<?phpclass Example{ 
    
                                
    • 
                                
  • mysql字符串查找函数
                                    dcj3sjt126com
mysql
                                    
      
FIND_IN_SET(str,strlist) 
假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
    
                                
    • 
                                
  • jvm内存管理
                                    easterfly
jvm
                                    
    一、JVM堆内存的划分 
 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 
 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 
 年老代满了之后会执行major gc，这个是stop the word模式，执行
    
                                
    • 
                                
  • CentOS-6.3安装配置JDK-8
                                    gengzg
centos
                                    
    JAVA_HOME=/usr/java/jdk1.8.0_45
JRE_HOME=/usr/java/jdk1.8.0_45/jre
PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
export JAVA_HOME
    
                                
    • 
                                
  • 【转】关于web路径的获取方法
                                    huangyc1210
Web路径
                                    
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
    
                                
    • 
                                
  • php里获取第一个中文首字母并排序
                                    远去的渡口
数据结构PHP
                                    
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： 
Array
(
    [0] => Array
        (
            [sid] => 2885842
            [recetcstoredpay] =&g
    
                                
    • 
                                
  • java内部类
                                    hm4123660
java内部类匿名内部类成员内部类方法内部类
                                    
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。 
     &nb
    
                                
    • 
                                
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten
                                    zhb8015

                                    
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。 
  
maven pom: 
  
		<dependency>
			<groupId>org.hibernate</groupId>
			<ar
    
                                
    • 
                                
  • Spark 性能相关参数配置详解－任务调度篇
                                    Stark_Summer
sparkcachecpu任务调度yarn
                                    
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。 
  
由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
    
                                
    • 
                                
  • css3滤镜
                                    wangkeheng
htmlcss
                                    
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 
 
html代码： 
 
<a href='' class='icon'><img src='utv.jpg' /></a> 
css代码： 
 
.icon{-webkit-filter: graysc
    
                                
    •