新普金娱乐网址


地理Linux 入门记录:十一、Linux 用户基础

卞之琳:前半生只看山水,后半生独爱你曾沧海桑田(民国历史80)

地理雅虎前端优化的35修军规

  • 十月 14, 2018
  • 地理
  • 没有评论

 内容有

网的GIS功能实现是基于arcgis api for
flex,首先附上系统的主界面图,接下去的是指向主界面的模块功能详细讲解:

1.尽量减少HTTP请求数

  80%的巅峰用户应时间都花费在了眼前端上,其中绝大多数光阴都于下载页面上的各种零件:图片,样式表,脚本,Flash等等。减少组件数得会减少页面提交的HTTP请求数。

  减少页面组件数的同等种方式是简化页面设计。

  合并文件举凡由此将所有脚论在一个文本被之章程来减少请求数的,当然,也堪统一有的CSS。

  CSS
Sprites
举凡压缩图片请数量的首选办法。把背景图片都构成至同一摆设图纸被,然后用CSS的background-imagebackground-position属性来恒定要显的一些。

  图像投射可以把多布置图片合并成单张图片,总大小是一模一样的,但压缩了请数并加快了页面加载。

  行内图片(Base64编码)data: URL模式来拿图纸嵌入页面。这样见面多HTML文件的高低,把行内图片在(缓存的)样式表中是独好措施,而且成功避免了页面变“重”。  

  但眼下主流浏览器并无克充分好地支撑行内图片。

  减少页面的HTTP请求数是单起点,这是晋升站点首坏做客速度之要紧点标准。

地理 1

2.减少DNS查找

  域称作系建立了主机名及IP地址间的映照,就像电话簿上姓名和号码的炫耀一样。当您于浏览器输入www.yahoo.com的时,浏览器就是会沟通DNS解析器返回服务器的IP地址。DNS是出资产的,它需要20至120毫秒去找寻给定主机名的IP地址。在DNS查找完成之前,浏览器无法从主机名下载任何事物。

  DNS查找被缓存起来再便捷,由用户之ISP(网络服务提供商)或者本地网络存在一个特种的缓存服务器上,但尚可缓存在个人用户的处理器上。DNS信息被保存在操作系统的DNS
cache(微软Windows上之”DNS客户端服务”)里。大多数浏览器有单独于操作系统的友爱之cache。只要浏览器在和谐的cache里还保留着就漫长记下,它就无见面于操作系统查询DNS。

  IE默认缓存DNS查找30分钟,写在DnsCacheTimeout注册表设置中。Firefox缓存1分钟,可以据此network.dnsCacheExpiration布置起设置。(Fasterfox把缓存时间变更成为了1钟头
P.S. Fasterfox是FF的一个来潮插件)

  如果客户端的DNS
cache是空的(包括浏览器的跟操作系统的),DNS查找数等于页面上不同的主机名数,包括页面URL,图片,脚本文件,样式表,Flash对象等等组件中的主机名,减少不同之主机名就足以减少DNS查找。

  减少不同主机名之多寡而为缩减了页面会互为下载的零部件数量,避免DNS查找削减了响应时间,而减去并行下载数量也有增无减了响应时间。我的规则是拿组件分散于2暨4单主机名下,这是又削减DNS查找和同意高并作下载的折中方案。

 

3.避免重定向

平、GIS环境软件安装

4.让Ajax可缓存

  Ajax的一个利是足以于用户提供及时报告,因为其会起后台服务器异步请求信息。然而,用了Ajax就无法保证用户以等候异步JavaScript和XML响应返回期间勿见面充分俗气。在诸多应用程序中,用户会一直等在如何用Ajax。例如,在依据web的电子邮件客户端着,用户为寻找适合他们找标准的邮件信息,将会晤维持对Ajax请求返回结果的关切。重要之是,要记“异步”并无代表“即经常”。

  要提高性,优化这些Ajax响应至关重要。最关键的加强Ajax性能的道就是给响应变得可缓存,就如于添上Expires或者Cache-Control
HTTP头中讨论的一模一样。下面适用于Ajax的其余规则:

  • Gzip组件
  • 减少DNS查找
  • 压缩JavaScript
  • 避重定向
  • 配置ETags

      (1)arcgis
desktop的装置,要是不思量对地图数据开展体制配置或者数额加工的话,这步可超越了绝不安装,详细的装步骤见这里;

5.延迟加载组件

  工具而帮忙你减轻工作量:YUI Image
Loader可以顺延加载折叠的图片,还有YUI Get
utility是一模一样种植引入JS和CSS的概括方法。Yahoo!主页就是一个事例,可以打开Firebug的网络面板仔细瞧。

  最好让性目标符合其它web开发最佳实践,比如“渐进增强”。如果客户端支持JavaScript,可以增长用户体验,但要管页面在不支持JavaScript时为会正常工作。所以,在确定页面运行如常从此,可以用部分推加载脚论增强它,以支撑有拖放和动画之类的美轮美奂效果。

      (2)arcgis
server的安,这个是得的,用来揭晓webgis的地图服务,比如地图基础服务,路径分析的网络服务,地理编码服务等等,详细的设置步骤见这里;

6.预加载组件

  预加载可能看起与延迟加载是反的,但其实质上生差之靶子。通过预加载组件可以充分利用浏览器空闲的年月来呼吁将来会面用到之零件(图片,样式和剧本)。用户访问下同样页的上,大部分零件都已在缓存里了,所以当用户看来页面会加载得更快。

实在运用中生以下几种预加载的品种:

  • 白白预加载——尽快开始加载,获取有分外的零部件。google.com就是一个sprite图片预加载的好例子,这个sprite图片并无是google.com主页需要的,而是找结果页面上之始末。
  • 条件性预加载——根据用户操作猜测用户将跳反到何并据此预加载。在search.yahoo.com的输入框里键入内容后,可以见到那些额外组件是哪请求加载的。
  • 提早预加载——在推出新规划前面预加载。经常以重新规划后会听到:“这个新网站是,但较以前更慢了”,一部分缘由是用户访问先前的页面还是发生原来缓存的,但新的可是同样栽空缓存状态下之体会。可以经在快要推出新规划之前预加载一些组件来减轻这种负面影响,老站可以采取浏览器空闲的时间来呼吁那些新站需要之图形与本子。

     
(3)arcsde直连创建地理企业数据库,为了促成在线编的作用,比如危险隐患和应急专家抵资源的音信编辑等等,详细的创步骤见这里;

7.回落DOM元素的数

亚、GIS地图服务的颁布

8.跨域分离组件

  分离组件可以最大化并行下载,但如若管特所以非超2-4个域,因为有DNS查找的代价。

     
(1)地理编码服务之披露,用来贯彻路径分析的地点搜索匹配,比如经纬度获取地名与地名获取经纬度,详细的公布步骤见这里;

9.尽量少用iframe

故iframe可以管一个HTML文档插入到父文档里,重要之是明白iframe是怎样工作的连很快地以她。

<iframe>的优点:

  • 引入慢的老三在内容,比如标志以及广告
  • 康宁沙箱
  • 互下载脚本

<iframe>的缺点:

  • 代价高昂,即使是空手的iframe
  • 死页面加载
  • 非语义

     
(2)路网服务的颁布,用来贯彻路径分析模块的,详细的发表步骤见这里;

10.杜绝404

  HTTP请求代价高昂,完全没必要就此一个HTTP请求去得到一个失效的应(比如404
Not Found),只见面拖慢用户体验而从不另外好处。

      (3)地图Feature
Access服务发布,用来贯彻在线编的,就地方的地形图披露能力的勾选上Feature
Access就ok了;

css部分

三、flexviewer的介绍

11.免采用CSS表达式

  用CSS表达式动态设置CSS属性,是千篇一律栽强大而危险的点子。从IE5开始支持,但自从IE8起即无推荐使用了。

   
  flexviewer是单开源框架,是esri公司本着GIS地图的开销服务的,实现GIS功能是基于arcgis
api for flex;详细的牵线见(引用他人的博客):

12.选择<link>舍弃@import

  前面提到了一个超级实践:为了落实逐步渲染,CSS应该置身顶部。

     在IE中用@import与以底层用<link>效益同样,所以极不要用她。

      http://www.cnblogs.com/wangby/p/4499308.html

13.免下滤镜

  IE专有的AlphaImageLoader滤镜可以据此来修复IE7之前的本子被半透明PNG图片的题材。在图片加载过程中,这个滤镜会阻塞渲染,卡住浏览器,还会加内存消耗而是为采取至每个元素的,而不是每个图片,所以会满怀于相同好堆问题。

  最好之不二法门是干脆不要为此AlphaImageLoader,而雅致地贬低到用在IE中支持性很好之PNG8图形来替。如果无要是为此AlphaImageLoader,应该据此生划线hack:_filter来避免影响IE7及重新胜似版本的用户。

      http://www.cnblogs.com/wangby/p/4499312.html

14.管体制表放在顶部

  在Yahoo!研究性的当儿,我们发现将体制表放到文档的HEAD部分会叫页面看起加载地更快。这是以将体制表放在head里能够为页面逐步渲染

      http://www.cnblogs.com/wangby/p/4499331.html

js部分

      附:

15.错过除还脚本

  IE会产生不必要之HTTP请求,而Firefox不会见。在IE中,如果一个不行缓存的表面脚论给页面引入了少不善,它见面在页面加载时起两只HTTP请求。即使脚论是可缓存的,在用户还加载页面时为会见起额外的HTTP请求。

  除了有没有意思之HTTP请求外界,多次针对下论求值也会见浪费时间。因为无论脚论是否可缓存,在Firefox和IE中还见面履冗余的JavaScript代码。

   
 flexviewer官网:http://resources.arcgis.com/en/communities/flex-viewer/index.html ,里面有在线的示范,有api介绍,还有flexviewer开源框架的源代码下载;

16.尽量减少DOM访问

故而JavaScript访问DOM元素是殊缓慢的,所以,为了为页面反应更迅速,应该:

  • 缓存已聘了之素的目
  • 先期“离线”更新节点,再把她添到DOM树上
  • 避用JavaScript修复布局问题

     arcgis api  for
flex官网:https://developers.arcgis.com/flex/sample-code/using-samples.htm,里面来在线的示范,有api介绍等等;

17.用智能的事件处理器

  有时候觉得页面反映不够灵活,是盖发无比多累执行之事件处理器被添加到了DOM树的例外因素上,这就算是援引用事件委托的缘由。如果一个div其中有10独按钮,应该仅仅为div容器添加一个事件处理器,而非是为每个按钮都抬高一个。事件会冒泡,所以可以捕获事件并得知哪个按钮是事件源。

18.拿下部论在脚

  脚本会阻塞并行下载,HTTP/1.1官方文档建议浏览器每个主机名下并行下载的机件数不设超越两只,如果图片来自多独主机名,并履行下载的数据就好超越两单。如果脚本正在下载,浏览器就非起头任何其他下载任务,即使是当不同主机名下的。

  有时候,并无便于把下面论走及脚。举个例子,如果下论是为此document.write插到页面内容遭之,就没有道重新于下换了。还可能是作用域问题,在大部景象下,这些题材还是足以化解之。

  一个大面积的建议是用推迟(deferred)脚本,有DEFER特性之台本意味着非可知含有document.write,并且提示浏览器告诉他们得延续渲染。不幸之是,Firefox不支持DEFER属性。在IE中,脚本可能于延迟,但无顺畅。如果脚本可以顺延,我们即便好把它放页面底部,页面就可还快地载入。

javascript, css 

19.管JavaScript和CSS放到外面

  很多性能原则都是关于怎样保管外部组件的,然而,在这些顾虑出现前若应当问一个还基础之题材:应该把JavaScript和CSS放到外部文件被要么直接写以页面里?

  实际上,用外表文件可以叫页面还快,因为JavaScript和CSS文件会叫缓存在浏览器。HTML文档中的行内JavaScript和CSS在历次要该HTML文档的下还见面再度下载。这样做缩减了所用的HTTP请求数,但加了HTML文档的轻重缓急。另一方面,如果JavaScript和CSS在表文件被,并且就被浏览器缓存起来了,那么我们就算打响地管HTML文档变多少了,而且还从未加HTTP请求数。

20.压缩JavaScript和CSS

  压缩具体来说就是于代码中失去除不必要的字符以减掉大小,从而升级加载速度。代码最小化就是错过丢所有注释和免必要之空白字符(空格,换行和tab)。在JavaScript中这样做能加强响应性能,因为要是下载的文本变多少了。两独极端常用之JavaScript代码压缩工具是JSMin和YUI
Compressor,YUI compressor还好压缩CSS。

  混淆是同等种而选的源码优化措施,要比较压缩更扑朔迷离,所以混淆过程为还爱出bug。在针对美国前十底网站查证中,压缩可以缩小21%,而混淆能缩小25%。虽然混淆的压缩程度更胜,但于压缩风险又要命。

  除了压缩外部脚本和体裁,行内的<script><style>片啊可以抽。即使启用了gzip模块,先进行削减为能够缩小5%要另行多之尺寸。JavaScript和CSS的用处越来越多,所以压缩代码会时有发生是的功能。

图片

21.优化图片

  • 品将GIF格式转换成PNG格式,看看是不是节省空间。在具有的PNG图片及运行pngcrush(或者其它PNG优化工具)

22.优化CSS Sprite

  • 当Sprite图片中横向排一般都比较纵向排列的结尾文件小
  • 成Sprite图片被的相似颜色可以保持低色数,最精美之是256色以下PNG8格式
  • “对运动端好”,不要以Sprite图片被留给最要命的空当。虽然不会见以特别挺程度达到影响图片文件的大小,但这么做足节约用户代理将图片解压成像素映射时消耗的内存。100×100之图样是1万单像素,而1000×1000底图片就是100万只像从了。

23.毫不为此HTML缩放图片

  不要为在HTML中得安装宽高而动本无需之大图。

24.为此微的可缓存的favicon.ico(P.S. 收藏夹图标)

  favicon.ico是身处服务器根目录的图片,它见面带动同样积聚麻烦,因为即便你无她,浏览器为会见自行请求其,所以最不要吃一个404 Not Found一呼百应。而且只要在和一个服务器上,每次要其时时都见面发送cookie,此外这个图片还会惊动下载顺序,例如当IE中,当你在onload中求求额外组件时,将会见优先下载favicon。

  所以为了解决favicon.ico的先天不足,应该保证:

  • 足够小,最好在1K以下
  • 设置合适的有效期HTTP头(以后只要想变的说话虽未可知重命名了),把有效期设置为几只月后一般比较安全,可以透过检查时favicon.ico的末段修改日期来管反能给浏览器知道。

 cookie

25.给Cookie减肥

用cookie的因由来诸多,比如授权和个性化。HTTP头中cookie信息以web服务器和浏览器之间交换。重要之是包cookie尽可能的稍,以无限小化对用户应时间之震慑。

  • 清除不必要的cookie
  • 保险cookie尽可能小,以极小化对用户应时间的震慑
  • 注意给cookie设置合适的地段级别,以免影响外子域
  • 安合适的有效期,更早的有效期要none可以还快之去除cookie,提高用户应时间

26.将组件放在不含有cookie的域下

  当浏览器发送对静态图像的求时,cookie也会见共同发送,而服务器根本不待这些cookie。所以它不过见面造成没意义之网络通信量,应该保证对静态组件的恳求不含cookie。可以创造一个子域,把具有的静态组件都布置在当年。

移动端 

27.管教有组件都自愧不如25K

  这个限制是以iPhone不能够缓存大于25K之零件,注意这里因的凡休减的深浅。这即是胡缩减内容本身吗老要紧,因为只的gzip可能不够。

28.将组件封装到一个复合文档里

  将各个零部件打包改成一个如有附件的电子邮件一样的复合文档里,可以就此一个HTTP请求获取多单零件(记住一点:HTTP请求是代价高昂的)。用这种办法的时,要先期检查用户代理是否支持(iPhone就未支持)。

服务器

29.Gzip组件

前者工程师可以想艺术明显地缩水通过网传输HTTP请求与应的工夫。毫无疑问,终端用户的拉动富速度,网络服务商,对顶交换点的偏离等等,都是付出组织所无法决定的。但还有别的能够影响响应时间的元素,压缩可以透过减HTTP响应的轻重来缩短响应时间。

于HTTP/1.1方始,web客户端就闹了支持压缩的Accept-Encoding HTTP请求头。

1
Accept-Encoding: gzip, deflate

  如果web服务器看到这请头,它就会见为此客户端列出之同样栽方式来减响应。web服务器通过Content-Encoding相应头来通知客户端。

1
Content-Encoding: gzip

  尽可能多地用gzip压缩能够让页面减肥,这吗是升格用户体验最好简易的方。

30.避免图形src属性为空

会晤招的题材:浏览器会向服务器发送另一个求。

31.配置ETags

实业标签(ETags),是服务器和浏览器用来决定浏览器缓存中组件和自服务器被的组件是否配合的一律种植机制(“实体”也便是组件:图片,脚本,样式表等等)。添加ETags可以供平等栽实体验证机制,比最后修改日期越来越灵敏。一个ETag是一个字符串,作为一个零部件有同切实版本的绝无仅有标识符。唯一的格式约束是字符串必须用引号括起来,源服务器用相应头被的ETag来指定组件的ETag:

1
2
3
4
HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

  然后,如果浏览器必须证明一个零部件,它因此If-None-Match要头来将ETag传回源服务器。如果ETags匹配成功,会回一个304状态码,这样就算抽了12195个字节的响应体。

GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified

32.对Ajax用GET请求

  使用XMLHttpRequest时,浏览器的POST请求是通过一个两步底历程来促成的:先发送HTTP头,在发送数据。所以极好用GET请求,它不过需要发送一个TCP报文(除非cookie特别多)。IE的URL长度最大值是2K,所以一旦一旦发送的数额超过2K哪怕无法用GET了。

  POST请求的一个好玩之副作用是实际并未发送任何数,就如GET请求一样。正使HTTP说明文档中描述的,GET请求是用来找信息的。所以她的语义只是用GET请求来要数据,而未是为此来发送需要仓储到服务器的数量。

33.尽早清空缓冲区

当用户要一个页面时,服务器需要用大约200交500毫秒来组装HTML页面,在即时里面,浏览器闲等正在数量达。PHP中发生一个flush()函数,允许让浏览器发送一部分就准备了的HTML响应,以便浏览器可以后台备剩余部分的又开获得组件,好处主要反映于特别忙碌的后台或者异常“轻”的前端页面及(P.S.
也就是说,响应时消耗主要在后台方面经常最能体现优势)。

  较理想之清空缓冲区的职务是HEAD后面,因为HTML的HEAD部分日常还易变,并且同意引入任何CSS和JavaScript文件,这样便得让浏览器在后台还以处理的当儿即便从头互相获取组件。

34.使用CDN(情分发网络

  用户与服务器的大体距离对响应时间啊起震慑。把内容安排在多独地理位置分散的服务器上可知为用户还快地载入页面。但实际要怎么开呢?

  实现内容以地理位置及散落的首先步是:不要尝试去重新设计而的web应用程序来适应分布式结构。这取决应用程序,改变结构或连部分给人战战兢兢的天职,比如同会话状态及跨越服务器复制数据库事务(翻译或者不确切)。缩短用户与情节里距离的提议或于延迟,或者从未容许由此,就是以是难题。

  记住终端用户80%及90%之应时间还花费在下载页面组件上了:图片,样式,脚本,Flash等等,这是业绩黄金法则。最好先疏散静态内容,而不是相同开始就是更规划应用程序结构。这不单能大大减少响应时间,还再次爱表现出CDN的贡献。

  内容分发网络(CDN)是一致组分散于不同地理位置的web服务器,用来被用户更高速地发送内容。典型地,选择用来发送内容的服务器是基于网络距离的衡量标准的。例如:选跳数(hop)最少的或者响应时间太抢之服务器。

35.添上Expires或者Cache-Control HTTP头

及时漫长规则来个别个点:

  • 对于静态组件:通过安装一个老的未来日子作Expires来促成永不失效
  • 剩余动态组件:用适量的Cache-ControlHTTP头来吃浏览器进行条件性的求

  网页设计更长,这表示页面里发出更多的脚本,图片以及Flash。站点的初访客可能还是只能交给几单HTTP请求,但通过行使有效期能叫组件变得可缓存,这避免了以过渡下的浏览过程遭到不必要的HTTP请求。有效期HTTP头通常被用当图及,但其应据此在颇具组件上,包括剧本、样式与Flash组件。

  浏览器(和代理)用缓存来减少HTTP请求的数量及尺寸,让页面会重新快加载。web服务器通过有效期HTTP响应头来喻客户端,页面的顺序零部件应该为缓存多久。用一个遥远的将来时间举行有效期,告诉浏览器是响应在2010年4月15日前无见面转移。

1
Expires: Thu, 15 Apr 2010 20:00:00 GMT

  

倘你用的凡Apache服务器,用ExpiresDefault指令来设置相对于即日期的有效期。下面的事例设置了打央时打10年的有效期:

ExpiresDefault "access plus 10 years"

 

相关文章

No Comments, Be The First!
近期评论
    分类目录
    功能
    网站地图xml地图