新普金娱乐网址


赛性能Mysql主从架构的复制原理同布局详解

进城记

基于ArcGIS JS API的在线专题地图实现

  • 十二月 15, 2018
  • 地理
  • 没有评论

  如今在学《高性能网站建设指南》这遵照开,本文算是一个上笔记,将学到之东西举行规整一下,方便前面查看。

0 引言

    专题地图大凡暴要深深的意味一致种要几栽素或气象,即按地图主旨的要求,集中代表与大旨有关内容之地图。专题地图的专题要素多种多样,分类方法也五花八门,遵照专题地图表现多少的性状而分为定性专题地图和定量专题地图。定性专题地图用来表示项目要称谓现象数据的半空中分布及一定特征,定量专题地图固然强调不同职位上空间地理目的的多少特征。

境内都发许多在线专题图制作平台,包括地图汇
爱地图十分,对其专题图类型举办分类整理,可得到以下分类:

类型 专题图
定量专题地图 范围值专题图(分层设色)
等级符号专题图
饼状专题图
柱状专题图
定性专题地图 分布专题图
热力专题图
趋势专题图

  性能黄金法则(Performance Golden
Rule)解释了只有暴发10%~20%的最后用户响应时间花在经受所要的用户HTML文档上,剩余的80%~90%岁月花在为HTML文档所引用的保有组件(图片、脚本、样式表等)举行的HTTP请求上,最后用户响应时间花在页面组件上
  ——Steve Sounders

1 初衷

    HTML5的canvas提供基础的绘图功用,为在线专题图的落实提供了点子(地图汇就是依据canvas开发的连带功效),可是这种措施成本相比较高,需要好实现地图渲染、比例尺缩放等一样多重功效。

    基于Arcgis API for
Javascript
二次开发也是一个杀好的选用,ArcGIS API for Javascript凡是ESRI基于dojo,采用JavaScript技术实现之调用ArcGIS
Server REST API接口的同等组脚本,提供了web端地图相关基础功效,在制图方面,
esri/renderers寓地图渲染形式有关的好像,可用以范围值、唯一值、热力图等专题图的渲染,但按存在以下问题:

  • 对柱状图、饼状图、等级符号等专题图,近日本(4.0)并从未平素的出接口。
  • 图例组件展现内容无克很好之满意专题图要求
  • 制专题图涉及类库较多

    鉴于此,基于ArcGIS JS
API封装了顿时套专题图制图类库OTMaps(Online Themetic Maps),并开源出来供我们使用,同时愿意使用者积极上报或一块修改完善。

1 文件合并(缩短HTTP请求数量)

  • CSS Sprites

  用css
sprites将网站因此到之图合并成一布置图纸,通过background-positionwidthheight操纵背景图地点来用某个一个图标,这种办法得以用大半只图片请缩减为同一赖,生成css
sprites的家伙也颇多,grunt和gulp中都有有关的插件,CssGaga也不利。

  • 合并js和css

  和灵活图一律,合并css和js文件为是削减HTTP请求很关键的格局,对css文件之相会目前以来没有什么争议,不过对最近js模块化盛行,将富有js文件合并成一个文本,仿佛是平等种植倒退。正确的主意是信守编译型语言的格局,保持js的模块化,在变化过程被只有对起始请求用到的js文件生成目的文件。

2 思路

    实现思路如下图所示:

图片 1

    各类专题图类的方法同样,都囊括draw、clear、setConfig,均连续自OTMap父类,而draw方法则分别实现,同时draw的兑现并非是独的,而出过多交汇的组成部分,比如柱状专题图或谋面由此到除了柱子的渲染外,还会晤用到独立值渲染或者限制值渲染,部分专题图都相会就此到图例,因为以基本渲染方法封装渲染类吃,各样专题图的实现精神上是渲染类中各种零部件的调用。

2 使用内容公布网络(裁减HTTP请求时)

  HTTP请求时别一个震慑因素是您及网站web服务器所处的离开,明显距离越来越远,请求所用的年金立越久,通过CDN可以大大改善这或多或少。

  CDN是分布于差不四只不同地理地方的web服务器,用于更有效之朝向用户发表内容。CDN最重要的力量是给终端用户存放静态文件,此外为供下载、安全服务等职能。

3 使用

     项目地址:http://vicfeel.github.io/OTMaps/
     效果截图:

     图片 2
    图片 3
    图片 4
    图片 5

博文作者:vicfeel
博文出处:http://www.cnblogs.com/vicfeel
正文版权归作者和乐乎共有,欢迎转载,但得保留这一个段子注脚,并让起本和链接,谢谢合作!
只要看了本著作,觉得有援助,您可为自之博文点击“推荐一下”!

3 设置浏览器缓存(防止重新HTTP请求)

  • 使用Expire/Cache-control

  浏览器通过使用缓存可以免每回都开展重新的求,HTTP
1.0同HTTP1.1独家发出异的休息存实现格局,Expires(1.0)和Cache-control(1.1)。Web服务器通过expires告诉客户端在指定的时外,都采用该文件的缓存副本,不再向服务端重复发出请求,例如:

    Expires: Thu, 01 Dec 2016 16:00:00 GMT (GMT格式)

  这一个设置意味着截至到2016年1九月1日,都得使该缓存副本,无需重新发出请求。

  Expires这种经过了日期的法,存在一个限:要求客户端和服务端时钟严酷同步,而HTTP
1.1引入的Cache-Control通过点名一个盖秒为单位之日指定缓存日期,则无怀该限量,例如:

    Cache-Control: max-age=31536000

  这一个装置意味缓存时间为平年,推荐用Cache-Control,可是在协理HTTP
1.1的景下,此外如留意的一点:Cache-Control和Expire同时有时时,Cache-Control具有双重强之事先级

  • 安排或者移除ETag

  使用Expire/Cache-Control可以免第二不良做客时,使用当地缓存防止再HTTP请求,提升网站速度。不过,在用户点击了浏览器刷新或者以expire已过的状下,仍然会于服务端发出HTTP
GET请求,而这时设该文件并无发生变化,服务端不相会回去整个文件而是会回304
Not Modified状态码。

  服务端判断该文件是否暴发变化的基于有一定量只:Last-Modified(最新修改日期)和ETag(实体标签);

  ETag(Entity Tags)是于HTTP
1.1引入的,与Last-Modified同时是时时如起再度胜之先期级。服务端通过比客户端发来之ETag(If-None-Match)和时ETag,若相同重回304
Not Modifed,否则回整个文件以及200 OK。

  ETag存在一个题材:当浏览器为一个服务器发送GET请求原始组件,之后又于任何一样玉服务器请求该器件时,ETag是不配合的,当然,假诺您的网站寄宿在同等令服务器上未有那一个题材,而现众多网站以多高服务器,ETag的存就大大降低验证有效性的成功率。

  存在是题材是不时之解决办法是针对性ETag举行配备,移除服务器innode值只保留修改时穿和大小作为ETag值,或者直接移除ETag,使用Last-Modified来注解文件中。

4 压缩组件(减小HTTP请求大小)

  通过对HTTP传输的文书举办削减减多少HTTP请求的轻重缓急,提高请求速度,GZIP是现阶段最常用也是非凡管用的减弱情势。

  不过,并非有的资源文件都亟待减小,压缩的工本包括服务端需要花费CPU周期举办压缩,而客户端也需针对压缩文件举办割除压缩,必须结合自己网站开展衡量。现在大部分网站还针对那多少个HTML文档举办压缩,部分网站采取针对性js、css举办压缩,几乎没网站针对图纸、PDF等公事进行GZIP压缩,原因在于这一个文件是一度于裁减了之,接纳HTTP压缩已经给过压缩的物并无可知使它们再有些。事实上,添加标头,压缩字典,并校验响应体实际上要她换得重老,而且还浪费了CPU。

  怎么样对网站开GZIP,需要以所利用的web服务器(IIS、Nginx、Apache等)中展开安装。

5 CSS文件在首部

  将CSS文件在首部和在尾部,并无影响HTTP请求,因而打呼吁时上来讲是同的,不过自从用户体验的角度,将CSS文件在首部,会获取重新好之用户体验。

  原因在浏览器是从上及下一一解析html文档,将CSS文件置于头部,页面会首先对CSS文件发出请求,随后加载DOM树并针对这么些进行渲染,页面会日趋显现于用户面前。

  而同之相反,假设拿CSS文件放置在尾部,页面加载完整DOM之后要CSS文件,然后对普DOM树渲染并展现给用户,从用户之角度,在css文件并未请求完成以前,整个页面是由白屏状态的,白屏大凡浏览器的同等种表现,David Hyatt本着其的说是这般的

每当样式树没完全加载从前,渲染dom树就是同栽浪费,因为在样式树加载成功未来会更渲染,出现FOUC(无样式内容闪烁)问题。

  此外即便注意的少数,使用link而不是@import引入css样式表,使用@import引入的体就写在首部,也会以文档最后加载。

6 JS文书在尾部

  HTTP请求是互相的,不同浏览器并行下载的多少也非同等(2、4、或者8独),并执行下载提高了HTTP请求的快。而以JS文件在首部,不仅会堵塞前边文件之下载而且会堵塞页面的渲染。

  为何会这么为?原因有少数只:

  • JS文件中或者存在document.write修改页面的情节,因而页面会于本子执行得之后才可是若是渲染。
  • 不等JS文件管大小咋样,可能有依靠关系,由此必须按顺序举办实践,因而于加载脚本的下相互下载是禁的。

  所以,最好的办法是讲js文件放置于尾部,等页面所有可视化组件加载成功之后再度展开呼吁,进步用户体验。

博文作者:vicfeel
博文出处:http://www.cnblogs.com/vicfeel
正文版权归作者和虎扑共有,欢迎转载,但必须保留这几个段子讲明,并于闹原本和链接,谢谢合作!
假诺看了本随笔,觉得有帮,您可以吗自家之博文点击“推荐一下”!

相关文章

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