问题 5:糟糕的负载分发

糟糕的分发机制会将新的请求分配到已经当机的服务器,而不是备用待机服务器上,导致服务器响应速度急剧变慢。如果过多的人同时访问同一个服务器,即使这个系统性能远低于瓶颈,还是会造成这样的问题。利用类似NeoLoad的工具测试产品势在必行,它有助于你发现任何薄弱的环节。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

澳门微尼斯人手机版 1
澳门微尼斯人手机版 2

1 赞 收藏
评论

关于作者:唐尤华

澳门微尼斯人手机版 3

做自己喜欢的,编程、喝茶、看世界

个人主页 ·
我的文章 ·
18 ·
    

澳门微尼斯人手机版 4

问题 2:未经优化的数据库

优化好的数据库可以达到很好的安全级别和处理性能,反之,没有优化的数据库可能会拖垮生产环境下的应用程序。索引的缺失会减慢SQL的查询性能,从而使整个网站变慢。一定要用脚本和文件分析检查任何低效的查询。

关于作者:TGCode

澳门微尼斯人手机版 5

路途虽远,无所畏
个人主页 ·
我的文章 ·
9 ·
   

澳门微尼斯人手机版 4

用jQuery Mobile做HTML5移动应用的三个优缺点

2013/03/30 · HTML5 · 来源:
伯乐在线     ·
HTML5

英文原文:Niall
O’Higgins,编译:伯乐在线——唐尤华

在过去大约一个月的时间里,我一直在使用JQuery
Mobile为一个健身培训网站开发基于HTML5的手机/平板前端应用。我之前曾经写过Android和iOS应用程序(分别用Java和Objective-C),因此只要编写一段基础代码就可以在主流平台上运行并能够快速地用HTML和JavaScript迭代,这样的许诺十分诱人。

JQuery Mobile & HTML5

使用HTML5和JavaSript构建一个手机应用,你需要写很多JavaScript代码。然而,带有触摸屏的设备的UI控制和处理与标准的Web应用程序非常不同。因此,你会想要使用现成的手机HTML5/JavaScrip框架(除非你有很多的时间并且打算将所有东西重新构建)。现在有很多现成的框架可供选择:jQTouch、 Sencha
Touch 等等。

我成为JQuery的粉丝已经很多年了,尤其欣赏它的至简哲学以及出色的核心特性和插件以及社区的贡献。正是由于有JQuery,我才能够接受使用JavaScript开发。所以,当听到
Chris McDonough(Pyramid Python
Web 框架的作者)发布JQuery的好消息时,我知道我应该去试一试。

 

JQuery Mobile 和 HTML5 的 3个优点

1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery
Mobile文档以及O’Reilly出版的JQuery
Mobile书籍,我完成了一个可以工作的app初步版本。在此之前我没有HTML5 /
JQuery Mobile开发经验。与Android和iOS相比,使用JQuery
Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。

译注:原生系统:原装的操作系统,例如Android原生系统是Google发布未经修改的系统。在本文中,原生应用指直接用系统提供的API开发的程序,与JQuery
Mobile开发的程序相对应。

我发现Apple的Builder接口的学习曲线十分陡峭,同样学习令人费解的Android布局系统也很耗时间。此外,要使用原生代码将一个list
view连接到远程的数据源并具有漂亮的外观是十分复杂的(在Android上是ListView,
在iOS上是UITableView)我能够通过已经掌握的JavaScript和HTML/CSS知识快速地实现同样的功能,无需学习新的adapter,delegate等等抽象概念,只要编写JQuery代码就可以做到。

2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦:为手机开发应用,尤其是iOS系统的手机,最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户,你需要等待一个相当长的过程(需要好几天,甚至可能是好几周)。不仅在第一次发布程序时要经历磨难,以后的每一次升级也是如此。这使得QA和发布流程变得复杂,还会增加额外的时间。由于JQuery
Mobile应用程序仅仅是一种web应用程序,因此它继承了所有web环境的优点:当用户加载你的网站时,他们就马上“升级”到最新的版本。可以马上修复bug和添加新的特性。即使是在Android系统——应用市场的要求比起Apple环境要宽松得多,在用户不知不觉中完成产品升级也是一件很好的事情。

进一步的好处是,发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了!不需要考虑iOS令人抓狂的DRM,也不需要理会Android必须的APK。

3.支持跨平台和跨设备开发:一个巨大的好处是,我的应用程序马上可以在Android和IOS上工作,同样也可以在其他平台上工作。作为一个独立开发者,为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作,为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和IOS设备上同时工作对我来说是一个巨大收获。

更进一步,尤其是对于运行Android各种分支的设备,它们大小和形状各异,想要让你的应用程序在各种各样屏幕分辨率的手机上看起来都不错,这是真正的挑战。对于要求严格的Android开发者来说,按照屏幕大小进行设屏幕分割(从完全最小化到最大进行缩放)会需要很多开发时间。由于浏览器会在每个设备上以相同的方式呈现,关于这个方面你不必有任何担心。

 澳门微尼斯人手机版 7

 

JQuery Mobile 和 HTML5 的3个缺点

1.比原生程序运行慢:在我看来最大的缺点是,即使是在最新的Android和iOS硬件上(双核Tegra
2 Android手机,双核iPad2平板),JQuery Mobile应用程序都会明显慢

于原生程序。尤其是在Android上,浏览器比起iOS更慢且bug更多(虽然谷歌是专注web领域的公司)。我没有在更早的Android设备上测试我的程序,也许根本就不能运行(例如Android
G1)。我相信在未来的12-24个月,硬件速度会很快得到提升(例如,四核设备2011年马上就要上市),性能也许很快就不会成为问题。但是今天,它确实是一个缺点。如果你只专注于iOS,你大可以期待一下浏览器的性能,至少它在这方面是可靠的(不像Android,黑莓等等)

2.古怪(跨浏览器、跨平台开发):JQuery
Mobile现在仍是beta版本,因此我遇到了很多bug。也就是说,JQuery团队还在积极地回复GitHub上提出的问题。我认为其中最大的一个问题是各种浏览器在不同的手机平台上古怪的表现。这个问题一直为人诟病。应用程序可能看上去有些古怪——虽然我认为JQuery
Mobile团队在widget和主题上做得很棒,但的确和原生程序看起来有显著的不同。这个问题到底对用户有多大影响不得而知,但是这一点需要引起注意。

3. 有限的能力 vs
原生程序:很明显,运行在浏览器上的JavaScript不能完全地访问设备的很多特性。一个典型的例子就是摄像头。然而,类似PhoneGap这样的工具能够帮助解决很多常见问题。实际上,我已经开始将我的应用程序通过PhoneGap将几个版本部署到iOS和Android上,使用的是原生Facebook绑定,效果令我映像深刻。我会在未来的博客中写一些使用PhoneGap的经验。

 

总结

总的说来,我认为使用JQuery
Mobile和HTML5作为手机应用开发平台是可行的。然而,这并不适用于(至少到目前为止)所有类型的应用程序。对于简单的内容显示和数据输入类型的应用程序(相对的是需要丰富多媒体/游戏程序),它是对原生程序一个有力的增强。我对自己的应用程序使用新平台的结果感到高兴——不再需要同时为Android和iOS维护我的健身跟踪软件。

在接下来的1-2年中,随着硬件变得越来越快,手机设备越来越多样化,我相信HTML5
(JQuery Mobile, PhoneGap,
等等)在手机应用开发中会成为更加重要的技术。

 

英文原文:Niall
O’Higgins,编译:伯乐在线——唐尤华

【如需转载,请在正文中标注并保留原文链接、译文链接和译者等信息,谢谢合作!】

 

赞 收藏
评论

问题 3:失控的数据增长

数据系统一般会随时间的推移变慢。制定一项计划来管理和监控数据,因为维持数据的增长对高性能的Web应用不可或缺。首先,找出业务中导致数据增长的主因。然后,研究并制定合适的存储解决方案。留意所有数据库、缓存、以及更复杂存储方案的选项。

聊聊 CSS3 中的 object-fit 和 object-position

2016/11/22 · CSS ·
CSS3

本文作者: 伯乐在线 –
TGCode
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fitobject-position

这两个奇葩的属性是做什么的呢?其实它们是为了处理替换元素(replaced
elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。

等等,好像多了一个名词,啥叫替换元素?替换元素其实是:

  • 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
  • CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

这个当然不是我头脑风暴来的,而是引用别人的解释:引用

常见的替换元素有<video>、<object>、<img>、<input
type=”image”>、<svg>、<svg:image>和<svg:video>等。

要是看的稀里糊涂的也没关系,接着往下看,我相信你会懂得!

1、object-fit

语法:

object-fit: fill | contian | cover | none | scale-down;

1
object-fit: fill | contian | cover | none | scale-down;
  • fill
    默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比,导致拉伸。
  • contain
    包含,保持原始的尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域的宽度或高度一致,部分内容会空白。
  • cover
    覆盖,保持原始的尺寸比例,保证内容区域被填满。因此,可替换元素可能会被切掉一部分,从而不能完整展示。
  • none : 保持可替换元素原尺寸和比例。
  • scale-down : 等比缩小。就好像依次设置了none或contain,
    最终呈现的是尺寸比较小的那个。

不好意思,我又要摆妹子来诱惑你们了,看效果图:

澳门微尼斯人手机版 8

上面的五个例子的代码:

<style> .box{ position:relative; float:left; margin:0 10px 40px
10px; width:150px; height:150px; } .box>img{ width:100%; height:100%;
background-color:#000; } .fill{ object-fit:fill; } .contain{
object-fit:contain; } .cover{ object-fit:cover; } .none{
object-fit:none; } .scale{ object-fit:scale-down; } </style>
<div class=”box”> <img src=”example-girl.jpg” class=”fill”
alt=””> </div> <div class=”box”> <img
src=”example-girl.jpg” class=”contain” alt=””> </div> <div
class=”box”> <img src=”example-girl.jpg” class=”cover” alt=””>
</div> <div class=”box”> <img src=”example-girl.jpg”
class=”none” alt=””> </div> <div class=”box”> <img
src=”example-girl.jpg” class=”scale” alt=””> </div>

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
35
36
37
38
39
40
41
42
43
44
45
<style>
.box{  
  position:relative;  
  float:left;  
  margin:0 10px 40px 10px;  
  width:150px;  
  height:150px;  
}  
.box>img{  
  width:100%;  
  height:100%;  
  background-color:#000;  
}  
.fill{  
  object-fit:fill;  
}  
.contain{  
  object-fit:contain;  
}  
.cover{    
  object-fit:cover;  
}  
.none{  
  object-fit:none;  
}  
.scale{  
  object-fit:scale-down;  
}  
</style>
 
<div class="box">  
  <img src="example-girl.jpg" class="fill" alt="">  
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="contain" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="cover" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="none" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="scale" alt="">
</div>

看到这些效果,我想同志们最关心的的应该是兼容性,点这里点这里

2、object-position

object-position属性决定了它的盒子里面替换元素的对齐方式。

语法:

object-position: <position>

1
object-position: <position>

默认值是50% 50%,也就是居中效果,其取值和CSS中background-position属性取值一样。(如果不熟悉background-position,可以瞄瞄这里《CSS3
Background》)

例如:替换元素位于内容区域的左上角

img{ object-fit: contain; object-position: 0 0; }

1
2
3
4
img{
  object-fit: contain;
  object-position: 0 0;
}

效果图:

澳门微尼斯人手机版 9

例如:替换元素相对于左下角10px 10px地方定位

img{   object-fit: contain;   object-position: bottom 10px left 10px; }

1
2
3
4
img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

效果图:

澳门微尼斯人手机版 10

当然,你也可以使用calc()来定位:

img{   object-fit: contain;   object-position: calc(100% – 10px)
calc(100% – 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: calc(100% – 10px) calc(100% – 10px);
}

效果图:

澳门微尼斯人手机版 11

它还支持负数:

img{   object-fit: contain;   object-position: -10px calc(100% – 10px);
}

1
2
3
4
img{
  object-fit: contain;
  object-position: -10px calc(100% – 10px);
}

效果图:

澳门微尼斯人手机版 12

总之,object-position的特性表现与backgound-position一样一样的。

兼容性:点这里

到这里,这两个属性算是讲完了,就是这么简单。

打赏支持我写出更多好文章,谢谢!

打赏作者

问题 9:共享资源和虚拟机

现如今几乎所有的Web应用程序,从扩展到管理再到系统恢复,都依赖于虚拟服务器。可有时候上百个虚拟系统跑在了一个物理的服务器上,结果就会变成一个虚拟机挂掉会影响到所有其它的。毕竟,资源抢夺总是存在的。密切监控系统,当其中一个虚拟机出了问题,你可以很快处理其产生的副作用。

积极主动地解决性能问题

目前你对常见的性能问题有了一个大致印象,事先做更高级别的用户负载测试是非常必要的。看下这些相关文章,阐释了如何搭建高用户负载的服务器。一旦用户开始使用你的网站,就可以利用产品环境中测试(TiP)流程。最后,使用模拟用户脚本来模拟用户导航和购买业务,从而获得反映网站短板的更准确数据。

赞 收藏
评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注