基于HTML5的WebGIS前端要素绘制性能优化研究
Computer Science and Application 计算机科学与应用, 2016, 6(1), 9-20
Published Online January 2016 in Hans. https://www.sodocs.net/doc/d810989471.html,/journal/csa
https://www.sodocs.net/doc/d810989471.html,/10.12677/csa.2016.61002
Research on the Performance Optimization of Drawing Front-End Vector Features Based on WebGIS of HTML5
Cui Li, Zhihong Li*, Lijie Zhou
Key Laboratory of Geographic Information Science, Ministry of Education, College of Geographical Sciences, East China Normal University, Shanghai
Received: Jan. 6th, 2016; accepted: Jan. 22nd, 2016; published: Jan. 27th, 2016
Copyright ? 2016 by authors and Hans Publishers Inc.
This work is licensed under the Creative Commons Attribution International License (CC BY).
https://www.sodocs.net/doc/d810989471.html,/licenses/by/4.0/
Abstract
Traditionally, the client vector graphics technology is implemented via plug-ins, but at the risk of the browser disabling the plug-ins. To solve this problem, this paper puts forward the HTML5 Canvas drawing technology based on modern browsers, achieves visualization and interaction of geographical features in WebGIS based on HTML5 Canvas, gives the realization process of drawing vector features and complex island or hole features, and further analyzes the influence factors of Canvas graphics performance mainly from four aspects: the amount of features, features’ nodes, drawing style and browser difference. And then the performance analysis tool is used to find the bottleneck and make the performance optimizations of drawing features. Finally, this technology is applied to two cases successfully with good drawing effects.
Keywords
HTML5 Canvas, WebGIS, Island or Hole Features, Drawing Performance, Performance Optimization
基于HTML5的WebGIS前端要素绘制
性能优化研究
李翠，李治洪*，周力杰
*通讯作者。
李翠等
华东师范大学地理科学学院，地理信息科学教育部重点实验室，上海
收稿日期：2016年1月6日；录用日期：2016年1月22日；发布日期：2016年1月27日
摘要
传统地，客户端矢量绘图技术采取插件机制的形式实现，但需要承担浏览器禁用插件的风险，针对这种弊端，文中提出现代浏览器中的绘图技术即HTML5 Canvas绘图技术，利用HTML5 Canvas实现WebGIS 中地理要素的展示与交互，给出绘制矢量要素以及复杂岛洞要素的实现过程，并进一步对Canvas绘图性能的影响因素进行分析，主要是从不同要素数量、要素结点数、要素绘制样式、不同浏览器四个方面对比绘图性能，并利用性能分析工具找出绘制性能的瓶颈，对绘图性能进行优化。最后，将此绘图技术成功运用在两个案例中，具有良好的绘图效果。
关键词
HTML5 Canvas，WebGIS，岛洞要素，绘图性能，性能优化
1. 引言
随着互联网技术的快速发展，在客户端进行数据的图形化展示与交互也受到越来越多的关注。其中，WebGIS [1]中的地理要素的可视化显示，也需要在客户端对点、线、面、以及复杂地理要素进行绘制与编辑等交互操作。现有WebGIS系统中在客户端实现矢量绘图技术根据其底层实现机制，主要分为两类
[2]：一种是外部代码载入方式如Flash、Applet、SilverLight等，一种是浏览器原生支持的方式如Canvas、
SVG、VML等。第一种方式因为要导入外部执行环境，通常要安装插件，而在浏览器禁用插件后，相关的功能也会受到影响，有一定风险。相比较而言，后一种方式则直接由浏览器原生支持，但在浏览器支持性以及绘图效率等方面也有较大差异。
VML (Vector Markup Language，矢量可标记语言)是一种基于XML描述的矢量图形，支持高质量的图形显示。在WebGIS客户端引入VML，可以弥补WebGIS中绘图的诸多不足，它作为IE浏览器内置的绘制工具，无需任何额外的组件，不仅提高了开发进度，而且增强了系统的适用性[3]。但它仅被IE支持，存在很大的兼容性问题，并且在高版本的IE浏览器(IE10)中也逐渐淡化VML，开始使用SVG替代VML进行矢量绘图。
SVG指可缩放矢量图形(Scalable Vector Graphics)，也是基于XML的，支持DOM事件模型，具有良好的交互性。但在绘制对象数量较多时，DOM操作会严重影响性能。并且它不支持绘制png、jpg等格式的图片，绘制的图形也无法导出成图片。
HTML5 Canvas [4]是W3C推出的新一代浏览器端绘图API，它是基于像素级的绘图技术，支持图像像素操作，能够绘制路径和栅格图像，绘制后的对象可以转成base64编码，在前端保存为png、jpg图片。目前，主流浏览器都支持Canvas，IE8之前的版本也可通过ecxcanvas.js插件实现。许多客户端图表也是基于Canvas 实现的[5] [6]，如一些插件echarts、CanvasXPress、AwesomeChartJS、RGraph等都是基于Canvas实现的。而且随着HTML5标准的规范化，HTML5技术日趋成熟，使用Canvas进行前端矢量绘图也成为一种趋势。
Canvas除了用于基本的图形展示外，还可用于WebGIS中空间要素的显示与表达[7]，实现地图数据的显示和交互，尤其是在要素量较大的情况，绘制效率远高于SVG。对基本的点、线、面的表达，Canvas API中提供了相关的接口，但对复杂地理要素诸如多线、多面、岛洞多边形等并没有提供绘图接口。而
李翠等
实际的地理对象中并不只是单一的几何对象，有时会出现一些复杂的地理对形的嵌套，形成岛、洞等复杂对象。文中针对这类复杂地理要素的绘制给出解决方案，并对其性能进行分析。
2. HTML5 Canvas API简介
Canvas是HTML5中新增加的标签元素，用于客户端绘图，其绘图能力依赖于JavaScript脚本。它定义了一个矩形画布，通过画布元素的context对象，调用一系列的绘图方法，主要包括：moveTo、lineTo、stroke、fill、arc、quadraticCurveTo等绘制路径的方法，以及drawImage绘制图像的方法，该方法可接受img、canvas，video对象等作为参数。除了绘制方法外，还包括一些坐标变换、样式设置、像素级别的操作方法。
Canvas不仅支持绘制简单图形如线、矩形、圆、扇形等，还支持绘制复杂的曲线如二次贝塞尔曲线、三次贝塞尔曲线。除了支持矢量要素的绘制，还可用于栅格图像的绘制。目前，现代浏览器如Internet Explorer 9、Firefox、Opera、Chrome 以及Safari都已支持
3. 要素绘制的基本方法
3.1. 点要素的绘制
点要素的绘制实际上就是圆的绘制，调用Canvas API [8]中的arc方法，以鼠标点击位置为圆心，设定半径以及填充样式，绘制圆即可，代码如下：
ctx=document.getElementById(“myCan”).getContext(“2d”);
ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2, true);
ctx.fill(); //绘制半径为4的圆
3.2. 线要素的绘制
绘制线要素就是不断地调用lineTo方法，首先，在鼠标单击下第一点时，通过moveTo绘制线段起点，之后每次单击的位置点作为线段的下一拐点，通过lineTo绘制两点间的线段，直至双击结束，完成该线要素的绘制。
ctx.moveTo(sxy0.x, sxy0.y);
for (var i = 1; i < ptArr.length; i++) {
ctx.lineTo(ptArr[i].x, ptArr[i].y); }
ctx.stroke();
//ctx.closePath(); //ctx.fill(); }
3.3. 面要素的绘制
Canvas API中没有提供绘制多边形的方法，只有绘制矩形的drawRect方法，而多边形的绘制和绘制线要素基本一致，不同的是，线要素绘制结束后使用stroke描边，而面要素需使用closePath闭合和fill 方法进行填充。
3.4. 岛洞要素的绘制
要素绘制过程中，采用的是双层画布，在临时画布上绘制的都是简单多边形，双击结束后，将临时画布上的要素绘制到要素层画布featureCanvas上，在该画布上的绘制会涉及到复杂的岛洞多边形。因此，在将临时画布上的要素向要素层上绘制时，还需要进一步判断当前绘制的多边形与要素层上已存在的多边形的位置关系。如果当前多边形与已有的多边形不存在包含关系，则作为简单多边形处理；否则的话，则会形成岛或者洞多边形如图1，具体地，需要根据两个多边形的方向进行判断。如果两者的方向一致，
李翠等
Figure 1.Hole polygon
图1. 洞多边形
即同为逆时针或顺时针，则形成岛；否则形成洞多边形。
具体过程：在完成一个简单多边形的绘制后，将当前多边形与要素层上的已有多边形要素逐一进行多边形在多边形内的判断(代码见下)。如果存在包含关系，即为岛洞多边形，需要将两个多边形合并成一个新的要素，主要是将其中的坐标信息_lineRings合并，重组成一个新的多边形要素，并从内存数组和要素层中移除原来要素，流程如图2。
//判断多边形在多边形内
function isPolyInPoly(poly,outerPoly){
for(var i=0;i var pt1 = poly[i]; var pt2 = poly[i+1]; var line = [pt1,pt2]; var isInpoly1 = pointInPoly(pt1,outerPoly); var isInpoly2 = pointInPoly(pt2,outerPoly); //两端点不都在多边形内 if(!isInpoly1 || !isInpoly2) return false; //判断每条边是否在多边形内 var flag = isLineInPoly(line,outerPoly); if(!flag) return false;} return true; } 要素的空间信息都存储在lineRings二维数组中，具体的组织方式如下： 1) 简单多边形的空间信息lineRings：[ptArr],其中ptArr是多边形顶点坐标组成的数组。 2) 复杂多边形的空间信息lineRings：[ptArr1,ptArr2,....ptArr i....]，ptArr1是外部多边形的顶点坐标数 组，ptArr2...ptArri是内部的岛或洞的顶点坐标数组。 在将临时画布上的简单要素或合并后的复杂要素向要素层上绘制要素时，由于存在岛洞的情况，需要根据每类要素的特点采取不同的绘制策略，具体如表1。 绘制岛洞多边形时，首先，需要判断这个多边形要素的各部分的包含关系，即多边形在多边形内的判断，确定其包含层级关系，然后通过isClockWise方法判断多边形的方向，是顺时针还是逆时针方向； 比较存在包含关系的两多边形的方向是否一致，如果方向不一致，则形成一个洞，绘制时将这个内部多边形的填充色设为白色，形成一个空白区域。否则的话，这个内部多边形就是一个岛，绘制时只绘制边框。具体绘制过程如下： // 岛洞多边形的绘制 var dir_outer = isClockWise(lineRings[0].points); for(var i=1;i 李翠 等 var pointArr=lineRings[i].points; var dir_inner=isClockWise(pointArr); if((dir_outer&&!dir_inner)||(!dir_outer&&dir_inner)){ holeOrIsland = 'hole'; //方向不一致 }else{ holeOrIsland = 'island';} drawPoly_inner(ctx,pointArr,holeOrIsland ); } 4. 要素交互式绘制与内存模型 4.1. 交互式绘制技术 Canvas 绘图是基于位图的，按照像素单位在画布上进行绘制，绘制的内容保存在Canvas 对象中。Canvas 整体作为一个对象，支持DOM 事件模型，但是Canvas 中每个图形则无法直接通过DOM 事件进行交互。因此，在对画布上的图形进行交互时，需要通过鼠标相关事件模拟交互过程。图3是以绘制多边形为例，作以说明绘制过程中的鼠标事件。 首先，声明两个相同宽高的画布图层，使用绝对定位叠放在一起，一个用于显示绘制好的图形(featureCanvas)，一个用于显示绘制过程中的图形的变化(overlayCanvas)。使用两个画布的目的在于提高绘制效率，在绘制过程中，鼠标每移动一次就需要重绘一次，如果在同一个画布上，则需要反复清空画 Figure 2. Workflow of drawing complex features 图2. 绘制复杂要素的流程 Table 1. Strategies of drawing diverse features 表1. 各种类型的要素绘制策略 类型 特点 绘制策略 简单多边形 单一 绘制各顶点之间的连线 岛多边形 在多边形内部嵌套多边形， 特殊的多面 绘制外部的多边形(设置边框、填充样式等)， 再绘制内部嵌套的多边形的边框 洞多边形 在多边形内部存在一块 不属于该多边形对象的区域 先绘制外部的多边形(设置边框、填充样式等)， 再绘制内部嵌套的多边形，填充样式设为白色，形成一个空白区域 李翠等 布再重绘，图形数量较多时，重绘会降低性能。使用双层画布，将当前绘制的图形放在临时画布上，已经绘制好的放在另一画布上，在绘制过程中，只需要重绘临时画布上的内容即可，能够大大提升性能。 4.2. 要素内存模型 在前后台的通讯过程中，主要通过实验室自主研发的Geoserver2013提供的要素服务接口进行要素的增删改查操作，除了要素服务外，同时它还提供了切片地图服务、动态图服务、文件服务、数据库服务等接口。在前端绘制的要素，使用gFeature对象存储，通过Geoserver提供的要素服务接口，将其提交至服务器进行保存；前端也可以通过属性查询和几何查询向服务器端请求要素集，以Geojson格式返回，在前端处理成gFeature格式，并绘制显示。 WebGIS中的矢量要素通常包含空间和属性两大部分，空间数据主要描述地理对象的位置，属性描述该地理对象的特征信息。在前端存储要素数据时，将要素的两部分信息分别存储在gFeature对象中，空间信息主要存储在shape中，属性信息存储在fields中，具体如图4。 5. 要素绘制性能分析 在要素绘制过程中不可避免地会涉及到绘制性能问题，影响其性能的因素众多，如要素的数量、要 Figure 3.Mouse interaction event 图3. 鼠标交互事件 Figure 4.Memory model of features 图4. 要素内存模型 李翠等 素类型、绘制样式、浏览器类型以及硬件配置等。本文主从以下三个方面：不同数量、不同绘制样式、以及不同浏览器来对比Canvas绘制性能。 5.1. 基本性能分析 以绘制最简单的多边形为例，测试在同一浏览器中，以相同的绘制样式绘制不同数量的多边形耗费的时间。先声明一个1000 × 600的画布，利用随机函数在画布内生成含有三个结点的多边形，对比绘制不同数量的相同结点数的多边形的耗时。在测试过程中，多边形的绘制样式统一设置了填充色、边框色、线宽、边角样式等，测试使用的浏览器是FireFox33。由于单次测试存在一定偶然性，因此，绘制耗时的计算采用的是取100次测试结果的平均值，最后，得出不同绘制规模下的平均绘制时间(如表2)，绘制时间和绘制数量成线性关系。 要素绘制性能不仅与要素的数目有关，还与每个要素的复杂程度有关，相同数目的要素，要素结构越复杂，即构成每个要素的结点数目越多，绘制时就越耗时。在测试实验中，分别对比同等数量下，三结点和五结点构成的多边形的绘制耗时。结果发现，两者的绘制时间存在一个倍数关系，同等数量下，绘制五边形的时间是三角形的2.26倍左右。 5.2. 绘制样式对性能的影响 进行要素绘制时，不仅可以使用颜色填充，也可以使用图像填充。但是二者的填充效率如何，需要进一步测试。分别比较使用纯色填充和图片填充的绘制效率，其中，图片大小为3 KB，图片填充样式的设置如下： var fillImg = new Image(); fillImg .src = 'apple.png'; var pstyle=ctx.createPattern(fillImg ,'repeat'); ctx.fillStyle=pstyle; 图5是对比绘制不同规模数量的三角形，分别使用两种填充方式所需要的时间，从表中可看出，图像填充比较耗时，约是纯色填充耗时的4倍左右。 5.3. 不同浏览器中绘制效率对比 不同浏览器中绘制效率对比Canvas是由浏览器解析并处理的，因此，其绘图的性能与浏览器平台有Table 2.Time consuming of drawing different numbers of features 表2. 绘制不同数量要素的耗时对比 数量(个) 平均耗时(毫秒) 100 5.87 500 28.74 1000 58.64 2000 117.82 5000 286.4 8000 461.8 10,000 574.8 15,000 887.9 20,000 1158.6 李翠等 直接关系，与客户端的硬件设备性能也有间接关系。不同浏览器对JavaScript的解析与执行速度会有所差异，这也会影响Canvas的绘制性能。部分浏览器开发商实现了Canvas GPU硬件加速，会大大加快了绘制速度。 下面的测试实验是在启用了浏览器的GPU加速功能后，对比三类浏览器中的绘制效率。分别在Chrome43、FireFox33、IE11三个浏览器中，绘制同等数量的三角形，都采用纯色填充的方式，对比要素的绘制效率，测试结果如下所示，从图6中可看出，Chrome中JavaScript的执行效率是最高的，其次是FireFox，IE最慢。各浏览器JS的执行速度还存在一定的数量关系，Chrome中JS的执行速度是Firefox 的4~5倍，是IE的6~8倍。 6. 要素绘制性能分析 6.1. 性能分析 在绘制过程中，要素数量、结点数、填充样式等都会影响绘制性能，而具体地这些因素是如何影响性能的，还需要进一步探讨。要找出绘制过程中时间消耗在哪些操作中，可以借助Chrome提供的Timeline 工具，它会将web应用过程中各部分的耗时概况显示出来，主要包括DOM事件的处理、页面布局渲染、向屏幕绘制元素三个层面上的耗时数据，帮助找出耗时操作。 分别对比绘制5000个要素时，启动Chrome的Timeline模块，记录下绘制过程中的具体耗时概况，结果如图7。其中，黄色部分代表分析和执行JavaScript所用的时间，紫色表示计算元素样式和布局所用 Figure 5.Time consuming comparison in different styles 图5. 不同绘制样式的耗时对比 Figure 6.Canvas rendering time consuming in different browsers 图6. 不同浏览器中Canvas绘制耗时对比 李翠等 时间，绿色是绘制屏幕所用时间，在三者的耗时中，脚本运算耗时最多，占比最大，而且随着要素数量的增加，脚本运算耗时几乎成倍增加。由此可见，绘制过程中，脚本运算对性能影响最大。 Profile模块提供了对脚本中各函数执行时间的统计，可以帮助网站找出哪些函数导致的脚本阻塞。利用该模块下的JavaScript CPU Profile来记录测试页面中的JavaScript各函数的执行时间，从中找出最耗时的操作。在性能优化时，考虑最大程度的减少这些耗时操作。表3是分别绘制1000个和5000个要素时，脚本各函数运行时间的记录。其中，当绘制5000个要素时，描边操作耗费了10.9 ms，填充、画线、移动节点分别消耗4 ms左右。在绘制过程中，绘制时间主要消耗在画线、描边、填充等操作上。 通过上述分析可以看出，stroke、fill、lineTo、moveTo等函数的执行耗时占比较大，这也说明了要素数量、结点数以及填充样式会对要素的绘制时间产生影响。在随着要素数量增多时，这几个耗时函数的调用次数都会增多，导致最终的耗时增加；同等数量的要素，要素结点数越多，会使moveTo、lineTo 函数的调用次数增加，从而增加绘制时间；填充样式的复杂程度会影响fill函数的执行时间，最终影响绘制时间。因此，绘制性能的提升主要体现在对这些操作的优化，如何最大程度地较少耗时操作。 6.2. 优化方法 6.2.1. 使用双层画布 在绘制过程中，每进行一次鼠标操作，就需要执行一次重绘，以保证最新的绘图状态。当画布比较大，且画布上的要素比较多时，重绘操作会阻塞线程，出现卡的现象，影响用户体验。采取的解决办法是使用双层画布，将已绘制好的要素放置在一个目标画布上，而正在绘制或修改的要素放在一个覆盖层画布上，当绘制完成或修改完成后，一般是在鼠标触发MouseUp时，再将覆盖层画布上的要素绘制到目标画布上，更新目标画布的视图状态。 6.2.2. 预渲染 使用离屏Canvas，声明一个不可见的Canvas画布，同目标画布同等大小，预先将要素绘制到离屏画 Figure 7.Time consuming of drawing 5000 features 图7. 绘制5000个要素的耗时 Table 3.Executing time of drawing functions 表3. 绘制函数的执行时间 函数1000个要素5000个要素 beginPath - 0.2 ms moveTo - 4.4 ms lineTo 1.1 ms 3.8 ms stroke 2.1 ms 10.9 ms fill 1.1 ms 4.0 ms 李翠等 布上，在需要的时候，通过drawImage方法把离屏画布中的内容绘制到目标画布中。 function preRender(){ //将离屏mCanvas中的内容绘制到目标画布 ctx.drawImage(mCavans,0,0,mWid,mHei); } 6.2.3. 请求视窗范围内的地理要素 在绘制地理要素时，地理范围可能会很大，可以先根据地理坐标与屏幕坐标的换算公式，确定当前画布视窗范围内能够显示的地理要素。在执行修改要素、绘制要素时，只涉及到当前视窗范围内的要素状态变化，减少重绘操作的性能损耗。 6.2.4. 函数节流 当画布尺寸发生变化时，视图范围随之变化，视窗范围内的要素需要重新计算，并执行要素的重绘操作。但如果画布尺寸变化事件不断触发，如在改变浏览器窗口大小时，则会频繁执行重绘操作，带来严重的性能损耗。为了避免这种情况的发生，可以采用函数节流的方式，让重绘操作只在超过指定的时间间隔后才执行[9]，如指定在500毫秒后再调用画布尺寸变化的处理函数，避免画布尺寸频繁变化时，连续触发响应函数。 function throttle(method,context){ clearTimeout(method.timerId); method.timerId=setTimeout(function(){ method.call(context);},500); } 7. 要素绘制性能分析 在《上海市农业布局规划动态管理系统》中(图8)，依托上海市高清遥感影像，对上海全市农用地数据进行在线采集[10]。其中，农用地地块数据主要采用了Canvas进行绘制，并通过fillText方法绘制地块类型的文字。在性能方面，采用了双层画布绘制、控制视窗范围内的要素显示以及函数节流等进行优化，缩放平移操作中，要素响应基本在1秒内；在并发访问上，可以满足不少于20个用户的同时在线数据编辑。 Figure 8.The planning system of Shanghai agriculture 图8. 上海市农业布局规划系统 李翠等 Figure 9.ECNUGIS platform 图9. ECNUGIS平台 实验室自主研发的ECNUGIS [11]平台(图9)是一个开放的数据管理与分享平台，提供了在线创建要素集，进行要素的绘制与编辑以及数据分享的功能。其中，要素的绘制与编辑使用的也是Canvas，用户可以自主创建要素集，进行在线矢量化，并通过实验室研发的Geoserver服务器将要素集保存在后台，通过要素服务和动态图服务供用户后续调用。 8. 结论 文中对前端使用Canvas进行地理要素的绘制进行了探讨，针对Canvas交互做了鼠标事件模型，实现了复杂岛洞多边形要素的绘制，为WebGIS中复杂地理要素的可视化显示以及要素编辑提供了基础。在性能方面，主要从要素数量、要素结点数、绘制样式、浏览器类型四个方面进行了要素绘制耗时的对比试验，并进一步提供了在WebGIS中绘图时的几种优化方法。 HTML5 Canvas客户端绘图技术越来越成为一种趋势，尤其是针对这种数据量大、比较零碎的地理对象的绘制与展示，而且随着HTML5规范的标准化，Canvas的浏览器支持性会更好。此外，Canvas元素除了支持2D [12]绘图，还支持3D绘制，这主要赖于浏览器的支持，随着浏览器的不断迭代更新，未来直接通过Canvas在浏览器中实现3D绘图也变得十分有可能。 参考文献(References) [1]李治洪. WebGIS原理与实践[M]. 北京: 高等教育出版社, 2011: 269-292. [2]廖明, 潘媛芳. WebGIS矢量地图绘制方法的性能分析与比较WebGIS的技术方案[C]. 《测绘通报》测绘科学前 沿技术论坛摘要集, 2008. [3]蔡锦辉, 陆明典. 用VML构建基于WebGIS的交通气象服务系统[J]. 气象研究与应用, 2014, 35(2): 60-62. [4]Fulton, S. HTML5 Canvas开发详解[M]. 任旻, 王洋, 等, 译. 北京: 人民邮电出版, 2014: 17-165. [5]龚丽. HTML5中的Canvas绘图研究[J]. 软件导刊, 2014, 13(4): 151-153. [6]谷伟. 基于HTML5 Canvas的客户端图表技术研究[J]. 信息技术, 2013(9): 107-110. [7]徐莎, 杨帆, 徐昌庆. 基于HTML5的WebGIS的研究与应用[J]. 信息技术, 2012(4): 149-151. 李翠等 [8]陆凌牛. HTML5与CSS3权威指南[M]. 北京: 机械工业出版社, 2013: 49-205. [9]Zakas, N.C. (2010) High Performance JavaScript. O’Reilly Media, Sebastopol, 61-80. [10]丁扬. 上海市农用地数据在线采集系统研究[D]: [硕士学位论文]. 上海: 华东师范大学, 2015. [11]地理大数据协同创新平台[DB/OL]. https://https://www.sodocs.net/doc/d810989471.html,/mapb/, 2015-7. [12]朱文. 基于HTML5的2D动画的设计与实现[D]: [硕士学位论文]. 广州: 中山大学, 2013. 做笔记 用一些文本描述另外一些文本的语意 p标签里面只能放文本，表单，图片 对于”text-indent:2em;”属性，只能加在块元素上面，內联元素时不起作用的 内联元素不能设置height，width，margin-top，margin-bottom，padding-top，padding-bottom ie8／ie9/Firefox不能识别附加有*号的css属性语句，IE6/IE7可以识别附加有*号的css属性语句 IE7/IE8/IE9／Firefox可以识别上面附加”!important”的语句， IE6无法识别”important” Ajax Readystate 变量，此属性只读，状态用长度为4的整型表示.定义如下： 0 （未初始化） 对象已建立，但是尚未初始化（尚未调用open方法） 1 （初始化） 已调用send()方法，正在发送请求 2 （发送数据） send方法调用完成，但是当前的状态及http头未知 3 （数据传送中） 已接收部分数据，因为响应及http头不全，这时通过responseBody 和responseText获取部分数据会出现错误， 4 （完成） 数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据 state 服务器常用的状态码及其对应的含义如下： 200：服务器响应正常。 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。 400：无法找到请求的资源。 401：访问资源的权限不够。 403：没有权限访问资源。 404：需要访问的资源不存在。 405：需要访问的资源被禁止。 407：访问的资源需要代理身份验证。 414：请求的URL太长。 500：服务器内部错误。 Web网站性能优化的相关技术 来源：站长网 https://www.sodocs.net/doc/d810989471.html, 2011-03-04 06:50:47 Web站点性能问题吸引或者迫使越来越多的人投入到这个问题的研究中来，产生了很多解决方案。下面是我根据自身的理解对这些技术进行了归类总结，如有不足之处欢迎拍砖。 一、提高服务器并发处理能力 我们总是希望一台服务器在单位时间内能处理的请求越多越好，这也成了web 服务器的能力高低的关键所在。服务器之所以可以同时处理多个请求，在于操作系统通过多执行流体系设计，使得多个任务可以轮流使用系统资源，这些资源包括CPU、内存以及I/O等。这就需要选择一个合适的并发策略来合理利用这些资源，从而提高服务器的并发处理能力。这些并发策略更多的应用在apache、nginx、lighttpd等底层web server软件中。 二、Web组件分离 这里所说的web组件是指web服务器提供的所有基于URL访问的资源，包括动态内容，静态网页，图片，样式表，脚本，视频等等。这些资源在文件大小，文件数量，内容更新频率，预计并发用户数，是否需要脚本解释器等方面有着很大的差异，对不同特性资源采用能充分发挥其潜力的优化策略，能极大的提高web 站点的性能。例如：将图片部署在独立的服务器上并为其分配独立的新域名，对静态网页使用epoll模型可以在大并发数情况下吞吐率保持稳定。 三、数据库性能优化和扩展。 Web服务器软件在数据库方面做的优化主要是减少访问数据库的次数，具体做法就是使用各种缓存方法。也可以从数据库本身入手提高其查询性能，这涉及到数据库性能优化方面的知识本文不作讨论。另外也可以通过主从复制，读写分离，使用反向代理，写操作分离等方式来扩展数据库规模，提升数据库服务能力。 四、Web负载均衡及相关技术 负载均衡是web站点规模水平扩展的一种手段，实现负载均衡的方法有好几种包括基于HTTP重定向的负载均衡，DNS负载均衡，反向代理负载均衡，四层负载均衡等等。 对这些负载均衡方法做简单的介绍：基于HTTP重定向的负载均衡利用了HTTP 重定向的请求转移和自动跳转功能来实现负载均衡，我们熟悉的镜像下载就使用这种负载均衡。DNS负载均衡是指在一个DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时返回不同的解析结果将客户端的访问引到不同的机 Web性能测试方案 1测试目的 此处阐述本次性能测试的目的，包括必要性分析与扩展性描述。 性能测试最主要的目的是检验当前系统所处的性能水平，验证其性能是否能满足未来应用的需求，并进一步找出系统设计上的瓶颈，以期改善系统性能，达到用户的要求。 2测试范围 此处主要描述本次性能测试的技术及业务背景，以及性能测试的特点。 编写此方案的目的是为云应用产品提供web性能测试的方法，因此方案内容主要包括测试环境、测试工具、测试策略、测试指标与测试执行等。 2.1测试背景 以云采业务为例，要满足用户在互联网集中采购的要求，实际业务中通过云采平台询报价、下单的频率较高，因此云采平台的性能直接决定了业务处理的效率，并能够支撑业务并发的压力。 例如：支撑100家企业用户的集中访问，以及业务处理要求。 2.2性能度量指标 响应时间（TTLB） 即“time to last byte”，指的是从客户端发起的一个请求开始，到客户端接收到从服务器端返回的响应结束，这个过程所耗费的时间，响应时间的单位一般为“秒”或者“毫秒”。响应时间＝网络响应时间+应用程序响应时间。 响应时间标准： 事务能力TPS（transaction per second） 服务器每秒处理的事务数； 一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。 客户机在发送请求时开始计时，收到服务器响应后结束计时，一次来计算使用的时间和完成的事务个数。它是衡量系统处理能力的重要指标。 并发用户数 同一时刻与服务器进行交互的在线用户数量。 吞吐率（Throughput） 单位时间内网络上传输的数据量，也可指单位时间内处理的客户端请求数量，是衡量网络性能的重要指标。 吞吐率=吞吐量/传输时间 资源利用率 这里主要指CPU利用率（CPU utilization），内存占用率。 3测试内容 此处对性能测试整体计划进行描述，包括测试内容以及关注的性能指标。Web性能测试内容包含：压力测试、负载测试、前端连接测试。 3.1负载测试 负载测试是为了测量Web系统在某一负载级别上的性能，以保证Web系统在需求范围内能正常工作。负载级别可以是某个时刻同时访问Web系统的用户数量，也可以是在线数据处理的数量。例如：Web应用系统能允许多少个用户同时在线？如果超过了这个数量，会出现什么现象？Web应用系统能否处理大 web前端工程师实习心得体会（精选3篇） web前端工程师实习心得体会 引导语：每个大学生都会有一段实习时间，相信这段时间会给他们带来不少的收获，那么，作为一个在web前端方向实习的学生来说，在编写实习心得体会时，应该从哪些方面入手呢？提供了几篇L：尽量掌握尽可能多的标签。必须掌握的标签有等，这些虽然平时比较少用甚至几乎不用，但是当你学到Boostrap框架时，你会发现Boostrap 框架为这些标签赋予了特定的功能与外观。除此之外，新增了很多标签和属性，使得HTML语言更加强大。还有很多新的内容，需要初学者更多的接触并掌握。 CSS：对各个属性以及一些属性之间结合使用的技巧应该多钻研。CSS能够统一有效地对页面的布局、字体等网页中的各个元素显示属性进行控制，可以方便快捷地实现精美的页面表现效果。你会用CSS 技术的使用技巧解决下列问题吗？清除浮动有哪些方式？比较好的方式是哪一种？当容器中具有浮动元素时，如何为容器设置边框或背景颜色？怎样让块级元素在容器中水平居中？当多个连续块级元素的浮动布局影响了原本不想浮动的对象时该如何处理？容器内部的对象如何实现相对于容器的自由定位？为什么要初始化CSS样式？ CSS+div布局模式：许多布局模式的基础，也是大部分前端开发人员接触到的第一种布局方式。这种布局模式对于PC端页面的设计是非常有帮助的，同时对于后面将会遇到的“移动端布局”、“响应 式布局”等，这种布局方式都具有一定的指导意义。 第二、将JavaScript作为前端学习的重点。JavaScript是目前大多数主流浏览器支持的面向对象的脚本语言，它可以在不与服务器交互的前提下对HTML的页面内容进行修改。JavaScript控制着网页的行为，决定着网页“做什么”。系统学习过JavaScript的同学们，你看看下列问题你能准确的找到答案吗？通过表达式来系统阐述“==”和“===”这两个运算符的区别。把某个元素移除你的视线的方法有哪些？你对JSON了解吗？通过哪个函数可以判断从文本框中获取的内容是不是数字？DOM 操作——怎样添加、移除、移动、复制、创建和查找节点？怎样判断是否为整数？运算符都能删除哪些内容？在脚本中，this有几种使用情况呢？ 第三、多练习多操作，实践是检验真理的唯一标准。IT编程是需要多加实践的，要不断反复进行上机操作，是学习编程开发的唯一方法。 这些问题的答案就是我的实习心得，经过这段时间的实习，我觉得自己可以独当一面，当一个web前端工程师了呢。 web前端工程师实习心得体会篇2 作为web前端工程师，在XX工作了5个月，自己从刚开始的一名新人到最后和大家融为一体，为组内贡献自己的一份力量，我经历了很多，成长了很多。 刚进到公司，我内心是很惶恐的。我对自己没有一个正确的定位，对公司的环境也是那么的陌生。我不知道自己能不能胜任公司的工 浅谈web前端技术 作者：周凯工作单位：成都信息工程学院 摘要 最近几年 WEB 前端开发已经成为一个很专业的方向，从业大军也与日俱增，仅杭州的D2交流会上就有 500 多人参加，且不乏许多高中同学。这说明前端开发行业在我国的兴起，已经是大势所趋。因此学习和掌握WEB相关技术如HTML 、CSS、JavaScript在日后的学习生活和工作中将大有益处。 关键词：HTMLCSSJavaScript Abstract In recent years the WEB front-end development has become a very professional direction from industry main forces, also grow with each passing day, only the Hangzhou D2 exchange will have more than 500 people attended, and there are many high school students. The software development industry in our country is arisen, already represent the general trend. Therefore the study and mastery of WEB related technologies such as HTML 、CSS 、JavaScript study in future life and work will be helpful。 Keywords:HTML CSS JavaScript web前端开发技术： 前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。Web开发技术：World Wide Web（简称Web）是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。Web技术涉及的内容相当广泛，本书涵盖了其中诸多方面，如：HTML标识语言、Java、Applet、CGI、脚本语言、ASP和JSP web服务器性能调整建议 1、更改http server的配置文件参数KeepAlive。 原因：这个值说明是否保持客户与HTTP SERVER的连接，如果设置为ON，则请求数到达MaxKeepAliveRequests设定值时请求将排队，导致响应变慢。 方法：打开ibm http server安装目录，打开文件夹conf，打开文件httpd.conf，查找KeepAlive值，改ON为OFF，其默认为ON 2、更改http server的配置文件参数ThreadsPerChild值到更大数目，默认为50 原因：服务器响应线程的数量 方法：打开ibm http server安装目录，打开文件夹conf，打开文件httpd.conf，查找ThreadsPerChild值，默认为50，改到更大数目，视用户数多少而定，一般改到客户机数量的1.1倍，如200台，则设为220 3、关闭http server日志纪录 原因：http server的日志IO影响性能 方法：打开ibm http server安装目录，打开文件夹conf，打开文件httpd.conf，查找CustomLog值，找到没有注释的那行(行的开头没有符号"#")，将那行用符号"#"注释掉，以关闭日志纪录，提高处理性能。 4、更改Websphere的服务器处理线程数 原因：线程的数量影响同时并发的请求数量 方法：打开管理控制台，依次打开目录树，服务器->server1->web容器->线程池，修改"最大大小"的值，默认是50，改到更大数目，具体视总用户数量和机器的配置而定，一般设置其等于或小于http server设置的MaxKeepAliveRequests 的值。 web服务器性能优化 导读：本文web服务器性能优化，仅供参考，如果觉得很不错，欢迎点评和分享。 作为一种资源的组织和表达机制，Web已成为Internet最主要的信息传送媒介。因此Web的性能已经成为判断一个网站成功与否的一个重要评估标准。而Web服务器则是决定Web性能的重要环节。 Web服务器性能就是指一个Web服务器响应用户请求的能力。为了提高Web服务器的性能人们进行了诸多尝试，已经取得了可喜的成果。本文通过对前人研究结果的分析，提出了在具体应用环境中优化Web服务器的方法和策略。 Web服务器概述 Web系统在现在网络中广泛使用，而Web服务器则是Web系统的一个重要组成部分。完整的Web结构应包括:HTTP协议，Web 服务器，通用网关接口CGI、Web应用程序接口、Web浏览器。 Web服务器是指驻留在因特网上某种类型计算机的程序。它是在网络中信息提供者基干HTTP的为实现信息发布、资料查询、数据处理等诸多应用搭建基本平台的服务器，其主要功能是提供网上信息浏览服务。当Web浏览器(客户端)连到服务器并请求文件时，服务器将处理该请求并将文件发送到该浏览器上，附带的信息会告诉浏览器如何查看该文件(即文件类型)。 Web服务器在web页面处理中大致可分为三个步骤:第一步，web浏览器向一个特定的服务器发出Web页面请求;第二步，Web 服务器接收到web页面请求后，寻找所请求的web页面，并将所请求的Web页面传送给Web浏览器;第三步，Web服务器接收到所请求的web页面，并将它显示出来。 web服务器不仅能够存储信息，还能在用户通过Web浏览器提供的信息的基础上运行脚本和程序。在Web上，常见的大多数表单核搜索引擎上都是用的是CGI脚本。 影响web应用服务器性能的因素 Web服务器的性能就是指一个Web服务器响应用户请求的能力，服务器的性能对于一个Web系统来说至关重要。为了提高Web 服务器的性能人们进行了许多尝试，也采用了许多技术和方法，但是这些技术和方法往往缺乏适用性。 通过对前人的研究分析可以发现，在web服务器的优化方而存在这种问题的原因主要有两个:一方面是服务器性能评测造成的，一方面是选用优化方案时考虑不全面造成的。 现行的服务器性能评测工具在对Web服务器进行评测时，其实是由一台或几台计算机模拟客户机，与被测的Web服务器进行通信，它们其实组成的只是一个局域网的环境，这与真正的广域网的环境有一定的差别。 另外，评测工具在选择网络负载时，虽然已经尽可能的接近真实负载，但是与持续的高频率负载要求仍有差距;再者，在性能测试指 XXX系统--版本号XXX 性能测试方案 XXX有限公司 XXXX年XX月XX日 修订历史记录 目录 1简介 (1) 1.1目的和软件说明 (1) 1.2内容摘要 (1) 1.3适用对象 (1) 1.4术语和缩略语 (1) 1.5参考文档 (1) 2系统概述 (2) 2.1项目背景 (2) 2.2系统架构 (3) 2.2.1架构概述 (3) 2.2.2运行环境 (3) 2.2.3处理流程 (4) 2.3技术方案设计 (4) 3测试目标 (5) 4测试范围 (6) 4.1测试对象 (6) 4.2需要测试的特性 (6) 4.3不需要测试的特性 (7) 5 4. 测试启动/结束/暂停/再启动准则 (8) 5.1启动准则 (8) 5.2结束准则 (8) 5.3暂停准则 (8) 5.4再启动准则 (9) 6测试人员 (10) 7测试时间 (11) 8测试环境 (12) 8.1系统架构图 (12) 8.2测试环境逻辑架构图 (12) 8.3测试环境物理架构图 (12) 8.4环境配置列表 (12) 8.4.1生产环境 (12) 8.4.2测试环境 (13) 8.4.3环境差异分析 (13) 8.4.4测试客户机 (14) 8.5测试工具 (14) 9测试策略 (15) 10测试场景设计 (16) 10.1总体设计思路 (16) 10.2业务模型 (16) 10.3测试场景设计 (17) 10.3.1......................................... 单交易负载测试 17 10.3.2....................................... 混合交易负载测试 18 10.3.3............................................. 稳定性测试 18 10.3.4...................................... 有/无缓存比对测试 19 10.3.5....................................... 网络带宽模拟测试 19 11测试实施准备.. (21) 11.1................................................. 测试环境准备 21 前端项目心得体会 导语：作为一个程序猿，你的任务就是敲代码，接下来为大家介绍前端项目心得体会文章，仅供参考！ 前端项目心得体会 1、知识的总结 项目开发中也许学到了一个技能，或者一个知识点，但是通过写博客会加深巩固自己学习的东西，自己写不出来可能说明你对这个知识点理解还不够深入。 2、表达能力的提升 程序员大都不善于沟通，是因为表达能力不行，但是通过坚持写博客，自己的表达能力与表达逻辑会慢慢锻炼出来，逐渐的就会影响自己的沟通交流能力，这点我深有体会。 3、面试加分 假设我们同时面试了两个人，两人各方面能力差不多，但是一个写博客，一个不写，我想我肯定优先选择坚持写博客的人。他能坚持写博客，起码知道他善于经验总结，很勤快，因为大部分人不写博客很大原因是因为懒学习前端的心得学习前端的心得。 4、提升写作能力 写的多了，写作能力也就提升了，比如我，相信我的写作能力应该比大部分程序员要优秀，你们认同么? 5、提升名气 如果持续产出高质量的博客，被越来越多的人知道，那名气就会上升了，有了名气自身的价值一下就提升了，我深有感受，自从有了名气之后，每天都能收到各大猎头、CEO等的各种优越条件的邀请，选择接受或拒绝是一回事，但是有没有收到邀请就是另一回事了。 6、赚取外快 这个容易理解，有了名气之后就可以有办法赚取各种外快，而且本身也并不可耻，不偷不抢，靠自身技术赚点零花钱有何不可? 比如我，如果哪一天我很缺钱了(虽然现在也缺)，我可以立刻想办法花点精力去赚更多的钱，只不过现在我选择了我最喜欢，最不受约束的方式而已。 最后奉劝大家，如果你还没有写博客，那从现在开始开通个博客学习前端的心得文章学习前端的心得出自。 走出第一步，如果你已经开始写博客了，不要去奢望靠写博客去赚钱，安心的写博客提升自己能力，总结经验，把它看成一种投资自己的手段，别把目标搞错了 也许有一天你会突然发现，原来你已经走了这么远，而且还有意外收获! 勿忘初心，才能方得始终! 如何找实习机会 如果有校招，最好就从校招进去。一些比较优秀的企业都会培养储备人才，用以发展，所以校招能够有机会进到一些分工比较细化的企 腾讯： 至少熟悉JSP/CGI/python/php/nodejs或一种其他类似后台技术，对前后端联合开发的技术原理有全面认识； 熟悉JS/AS/AJAX/HTML5/CSS等前端开发技术； 对DNS/HTTP和相关的其他底层网络协议有比较全面的了解。 小米： 1、本科学历以上，有前端开发经验者优先 2、熟悉Ajax，JavaScript，Apache，PHP，JSP等WEB系统开发技术 3、开发后台服务器搭配系统和后台服务器管理/分析工具的设计和开发 酷派： 计算机等相关专业本科及以上学历 1.熟悉Photoshop、Flash、Dreamweaer、illustator 等专业软件应用； 2.熟悉Html/Html5、css/css3、JavaScript； 3.有一定的平面设计和美术基础、审美能力和创意，色彩感强。 百度： -精通JavaScript、Ajax等Web开发技术 -精通HTML/XHTML、CSS等网页制作技术，熟悉页面架构和布局 -熟悉W3C标准，对表现与数据分离、Web语义化等有深刻理解 -对互联网产品和Web技术有强烈兴趣，有优秀的学习能力和强烈的进取心 -具有良好的沟通能力和团队合作精神、优秀的分析问题和解决问题的能力 具有以下能力者优先考虑： -具有Mobile WEB/W AP、HTML5/CSS3、nodejs、Flash开发经验 -精通一种模板语言（Smarty、Velocity、Django等） -熟悉Linux平台，掌握一种后端开发语言（PHP/Java/C/C++/python等） -有前端性能优化经验 -具有一定的软件工程意识，对数据结构和算法设计有充分理解 360： 职位要求： 1. 计算机相关专业大学本科及以上学历 2. 热爱软件开发，扎实的计算机基础 3. 熟练掌握HTML、CSS，熟悉页面架构和布局 4. 熟悉Web标准和标签语义化 5. 熟悉JavaScript 6.了解一门服务端语言，如PHP 美团： 有颗对技术追求矢志不渝的心，有过思考难题彻夜不眠的经历，我们有很多技术难题等你来挑战； 喜欢阅读英文资料，因为很多技术问题国内社区都找不到答案； 编码能力必须出类拔萃，即使你现在不懂前端技术也没有关系； 坚信程序设计是一门充满快乐的艺术，一种高水平的游戏，值得为此投入毕生的热血！ 网站界面分析和优化设计 一、网站界面优化的重要性。 web技术的发展，使得互联网用户从单纯浏览信息时代迈入了更加注重交互、更加人性化的时代。网民使用互联网产品已经不仅仅只关注工作效率，而是越来越关心使用过程中的体验。网站界面的本质是让用户做主，操作简便性、强调交互性。 在互联网发展的过程中，最初希望通过建立网站来抢占市场、树立形象的企业逐步认识到网站提供优质的用户体验才是可持续发展的竞争优势，而网站服务界面的设计效果是用户体验好坏的直接影响因素。某电商网站Allurent曾经做过一个调查，当用户对某一网站的验较差时，80%的用户表示不会再次访问该网站，60%的用户表示影响到了自己对该商家的整体印象，而40%的用户表示甚至可能不再去该商家的实体店铺。用户不良体验无疑是在与网站界面的交互中形成的。目前，很多商业网站已经充分认识到周到、贴心的网站界面设计对于企业利益获取的重要性。很多跨国公司如雅虎、惠普、IBM微软、苹果、等都先后成立了用户体验研究机构，尝试将用户体验的研究成果应用到界面设计中来，国内互联网企业如百度、腾讯等也都建立了相应的研究团队。 二、网站界面优化的核心要素 网站服务界面是指网站为用户办事服务和提供信息的网页内容展现方式。关注服务界面，就是要做好网页界面的优化设计工作。基于用户体验进行网站服务界面优化设计，需要将用户体验从不同层次、 维度进行分解，提取与网页界面相关的要素，然后才能对相应要素实施具体的优化设计。 Adaptive Path公司的创始人James Garrett对用户体验的要素进行过较为系统地研究，将用户体验划分为战略、范围、结构、框架、表现10个核心要素，如图所示。这5个层面自下而上逐步的从抽象转为具体。 图1. 用户体验要素模型 这一用户体验要素模型中与界面优化直接相关的是框架层和表现层的四个关键要素，即界面设计、导航设计、信息设计和视觉设计。我们主要讨论界面设计这一主要要素。 三、网站界面的优化 3.1提高页面响应速度 随着科技的发展用户等待网页加载的耐性越来越低。2009年，微软搜索引擎必应（bing）进行过一项调查，研究页面载入速度和其他网站指标是否有明显相关性。根据报告显示，每2秒钟的延迟页面会使用户满意度降低3.8%的，减少4.3%的单位用户收入和减少4.3% Web 性能优化：图片优化 WEB站点性能优化 由于较少的接触WAP站点的建设，缺乏类似站点的建设经验，导致后期的性能问题成了影响项目交付的较严重的因素。 经过后面深入的了解，发现浏览器在访问网站的过程中，有很多地方可以进行性能优化处理。案例分析： 首先，我们先来了解一下客户端(这里指终端浏览器)访问服务器的全过程。 以火狐3.6.8浏览器为例(图例来自火狐浏览插件firebug截图) 从上图可以看出，该页面前后一共向后台发送了6次请求，即建立6次连接。 ●过程一：第1次请求，url地址请求服务器，获得相应的页面html，该次请求需要服务器相 应的业务逻辑处理然后生成页面，花费的时间稍长。 ●过程二：第2、3次请求，终端浏览器接收到请求的html页面后，需要请求页面引入的外部 资源(如css样式,js脚本,图片等)，此时请求过程是并行连接。 ●过程三：第4、5、6次请求，终端浏览器接收到css样式资源后，需要为css中引入的其他外 部资源(图片较为常见)再次发送请求，所有的图片请求也是并行连接，与此同时也会进行页面的渲染工作。 另外，过程二、过程三中提到的并行连接，在各种不同浏览器中体现出来的能力也不一样。 下图显示了每个支持当前的浏览器为HTTP/1.1中以及HTTP/1.0的服务器最大连接数。 简化的浏览器响应时间的计算模型： 终端用户响应时间= 页面下载时间+ 服务器响应时间+ 浏览器处理及渲染时间 页面下载时间= 页面大小/ 网络带宽+ （网络延迟×HTTP 请求数）/ 并发度 所以如果我们可以通过监听互联网应用的网络传输行为得到页面大小、HTTP 请求数、并发度、服务器响应时间和浏览器处理及渲染时间，那么我们就可以推测这个应用在任意网络环境下的终端用户响应时间 优化思路 从上面公式中可以看出，网络带宽、网络延迟由网络环境决定，是系统不可控的，并发度是终端浏览器本身具备的能力，也是系统不可控的。余下的公式参数页面尺寸，HTTP请求数则是我们需要找寻的突破点，我们可以从如下几个方向着手。 1. 减少连接次数 终端浏览器响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 合并文件 是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS 文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。 CSS Sprites 是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分； 我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。 何为：前端工程师？ 前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。 Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！ 它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO 和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。 随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、https://www.sodocs.net/doc/d810989471.html,，JSP、Python）等语言，前端开发工程师也需要掌握。 前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。 HTML 甚至不是一门语言，他仅仅是简单的标记语言！ CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。 Javascript 的基础部分相对来说不难，入手还算快。 也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。 Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。因此，前端技术领域，为自己觅得一个靠谱的师兄，重要性要盖过项目、团队、公司、甚至薪水。 另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。 总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等； 各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力； 浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。 JA V A WEB系统性能调优 V1.0 广州合道信息科技有限公司 2014年3月 ?文档信息 项目名: 项目编号: 作者: 罗承伟 创建日期: 2014-03-21 使用者: 标题: Javaweb 系统性能调优方案 分类: 部门名称: 研发部 版权声明: ?文档状态 ?修订文档历史记录 初稿罗承伟 目录 1. 性能调优流程 (4) 1.1、确定调优目标 (4) 1.2、测量系统性能 (5) 1.3、分析性能瓶颈 (5) 2. JVM性能调优 (5) 2.1、JVM内存组成及分配 (6) 2.1.1、JA V A内存组成介绍:堆(Heap)和非堆(Non-heap)内存 (6) 2.1.2、堆内存分配 (6) 2.1.3、非堆内存分配 (7) 2.1.4、JVM内存限制(最大值) (8) 2.2、JVM参数详解 (8) 2.3、参数配置示例 (14) 3. J2EE应用监控 (15) 3.1、数据库连接池监控(Druid) (15) 3.1.1、Druid连接池配置 (15) 3.1.2、Druid连接池监控 (17) 3.2、容器管理及监控(psi-probe) (18) 3.2.1、Tomcat下安装部署 (18) 3.2.2、probe监控界面 (22) 3.3、JA V A虚拟机监控(Visual VM) (25) 3.3.1、VisualVM安装 (25) 3.3.2、VisualVM简介 (25) 3.3.3、安装插件 (26) 3.3.4、监控本地JA V A应用 (27) 3.3.5、监控远程JA V A应用 (28) 3.3.6、使用Visual VM查看JVM相关信息 (31) 3.3.7、使用Visual VM解决内存溢出问题 (33) 3.3.8、使用Visual VM查看Tomcat的线程状态 (34) 3.3.8、使用Visual VM查看CPU消耗情况 (36) 网站前端性能优化总结 一、服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头 某些经常使用到、并且不会经常做改动的图片（banner、logo等等）、静态文件（登录首页、说明文档等）可以设置较长的有效期（expiration date），这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存，文档就可以从缓存（除已经过期）而不是从服务器读取。接着，客户端考察缓存中的副本，看看是否过期或者失效，以决定是否必须从服务器获得更新。 各个容器都有针对的方案,，以 Apache 为例： ExpiresActive On ExpiresByType image/gif "access plus 1 weeks" 表示gif文件缓存一周，配置可以根据具体的业务进行调整，具体配置可以参考： https://www.sodocs.net/doc/d810989471.html,/Apache/ApacheMenu/mod/mod_expires.html 2. 压缩内容 对于绝大多数站点，这都是必要的一步，能有效减轻网络流量压力。 怎样才能成为一名优秀的web 前端工程师 Web前端工程师简称为前端工程师，它是随着web的发展细分出来的职业。Web前端开发技术主要包括三个要素，分别是：HTML、CSS、JavaScript。作为一名web前端工程师不仅要掌握基本的web前端开发技术、网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。作为一名刚入门的前端工程师通常都会有这样的疑问：“怎样才能成为一名优秀的web前端工程师”？ 第一：多写 爱创课堂的资深讲师如是说：“很多问题都是靠慢慢积累而来的，只有亲手去写了才能真正的理解与记忆，俗话说：好记性不如烂笔头。很多学员都会问我为什么知道那么多CSS兼容解决方案，我只能告诉他：实践的经验，因为我写过很多的项目，遇见过很多的bug，都是自己亲身实践一步一步的调试过来的。” 第二：多看 “书籍是人类最好的朋友”，这句话还是有一定道理的，在飞速发展的网络时代，不要总是把书籍束之高阁。要想成为一名优秀的web前端工程师经常看一些相关的书籍或者在网上浏览一些相关的文档，相信你一定会受益匪浅的。 第三：多浏览blog 在web前端的世界里，什么是高手？高手就是别人不会的内容，你却可以了如指掌；高手就是别人解决不了的细节问题，你却可以信手拈来。很多高手都有写blog的习惯，这些高手在blog里不会写一些简单的list，而是针对某个问题深入研究，所以看这些高手的blog 对于进阶有很大的帮助。 第四：至少学一门后端语言 前端与后端还是有很多相通的地方的，或许你平时很少用到这些后端语言，但是在工作中这些后端语言会有利于你对一些问题的理解。比如Ajax，还有HTML5 中像Web sockets、post message 之类的API。 第五：多学习 移动互联网大潮下各类技术瞬息万变，为此爱创课堂的web前端培训专家提示，你应该学会HTML5、CSS3、响应式网站开发等技术，精通JavaScript、JQuery、Ajax等核心技术，具备互联网交互设计能力、熟悉后端服务器运行环境和数据通信协议，掌握响应式布局框架、 Web应用，性能优化方法 1．Jsva虚拟机性能优化 Tomcat是运行在Java虚拟机上的web服务器，用户可以根据r1己的需要选择不同的操作系统和对应的y1)K的版本．但要确保用户所使用的版本是最新的，因为sun公司和其他一些公司一直在为提高性能顺对Java虚拟机做一些升级改进。用户可以为J ava虚拟机设置使用的内存，如果设置的内存规模不合适．将会影响虚拟机的运行效率。但在运行中，用户可以通过命令行的方式改变虚拟机使用内存的大小，如表2—1历示，有两个参数用来设置虚拟机使用内存的大小。 表2—1中两个值的大小一般根据需要进行设置。初始化堆的大小执行f虚拟机在启动时向系统申请的内存的大小，如果虚拟机启动时设置的使用内存比较小，而这时又有许多对象进行初始化，虚拟机就必须重复地增加内存来满足使用。由于这种原因．一舶把—xms和—xmx设为一样大，而堆的最大值受限于系统使用的物理内存。一般来说，使用数据量较大的应用程序会使用持久对象，内存使用有可能迅速地增长，当应用程序需要的内存超出堆的最大值时虚拟机就会提尔内存溢出．并且导致应用服务崩溃。因此，建议堆的最大值设置为可用内存的最大值的80％。 另外需要考虑的是J ava提供的垃圾回收机制。虚拟机的可用内存规模决定了虚拟机的垃圾回收时间和频度。垃圾回收可以接受的速度与具体应用有关，如果堆过大，那么完全垃圾收集就会很慢，频度会降低。如果堆过小，完全收集就很快，但是会频繁启动垃圾回收。调整堆大小的目的是最小化垃圾收集的时间，以在特定的时间内最大化实际处理的客户请求数。在基准测试中．为保证最好的性能，要把堆设置大一些．防止在基难测试的过程中小现垃圾问收。如果观察到系统花费很多的时间进行垃圾回收．就要减小推的大小，一次完全的垃圾收集应该不超过3—5秒。 2．服务器的整合使用 虽然T。mcat也可以作wEb服务器．但其处理静态HTML的速度比不上APa che，而且其作为web服务器，功能远不如APache．因此可以把Apachc和丁omcat集成起来，将HTML 与JSP的功能进行明确分工，让Tomcat只处理JsP部分，其它的由APnche、IIS等web服务器处理，大大节省T。mcat有限的T作“线程”。 3．负载均伤 在负载均衡中，多台服务器为对称方式，每台服务器都具有同等的地位，可以单独对 外提供服务而无须其他服务器的辅助。通过负载分担技术，将外部发送来的请求按一定规则分配到对称结构中的某一台服务器上．接收到请求的服务器独立问应客户机的请求。 提供服务的一组服务器组成了—个次用服务器集群，并对外提供一个统一的地址．当 一个服务请求被发至该集群时，根据一定规则选择一台服务器，并将服务定向转给该服务器承担，即将负载进行均衡分摊。 曙光公司应用负载均衡技术使应用服务突破了一台服务器只能为有限用户提供服务的限制，可以利用多台服务器同时为大量用户提供服务。当某台服务器出现故障时，负载均衡服务器会白动进行检测并停止将服务请求分发至该服务器，而由其他工作正常的服务器继续提供服务，从而保证了服务的可靠性。 Web前端性能测试及优化技巧 发布时间: 2015-7-31 11:04 作者: 左正来源: 51Testing软件测试网采编字体: 小中大| 上一篇下一篇| 打印| 我要投稿| 推荐标签：性能测试软件测试技术Web测试 1、前段性能的意义 对于访问一个网站，最花费时间的并不是后端应用程序处理以及数据库等消耗的时间，而是前端花费的时间（包括请求、网络传输、页面加载、渲染等）。根据web优化的黄金法则： 80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash 等，的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。 根据著名的“2-5-8原则”，用户访问一个页面： 当用户能够在2秒以内得到响应时，会感觉系统的响应很快； 当用户在2-5秒之间得到响应时，会感觉系统的响应速度还可以； 当用户在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受； 而当用户在超过8秒后仍然无法得到响应时，会感觉系统糟透了，或者认为系统已经失去响应，而选择离开这个Web站点，或者发起第二次请求。 对于一个网站如果希望抓住用户，网站的速度以及稳定性是首当其冲的。目前性能已经被列入google的网站的排名规则中。 相关文章Web Performance Optimization (WPO) – As Business Critical as SEO 2、前端性能关注的重点 2.1 加载时间指标，主要包括三个时间断 a. Time to First Impression 表示从用户在浏览器键入url按下回车键一刻开始到页面开始有反应（用户可以在页面中看见一点点内容）为止。经常能感觉到的一个信号就是网页开始显示title。 b.Time to onLoad Event 表示从页面开始显示内容，到浏览器开始触发OnLoad函数这一时间段。只有当初始的文本和所引用的对象加载完成，浏览器才开始触发OnLoad函数 c.Time to Fully Loaded 表示从上一时间段末到整个网页完全加载完成（所有OnLoad函数以及相关的动态资源加载完成）。在网页中含有timeout或定时刷新之类处理时较为难判断结束点。 2.2 资源情况指标web前端学习笔记
web性能优化(服务器优化)
Web性能测试方案
web前端工程师实习心得体会(精选3篇)
浅谈web前端技术
Websphere性能优化
web服务器性能优化
性能测试方案
前端项目心得体会
web前端开发工程师的要求
网站界面分析和优化设计 (2)
Web性能优化：图片优化
HTTP Archieve 有个统计，图片内容已经占到了互联网内容总量的 62%，也就是说超过一半的流量和时间都 用来下载图片。 从性能优化的角度看， 图片也绝对是优化的热点和重点之一，Google PageSpeed 或者 Yahoo 的 14 条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了 Web 图片优化的方方面面，从基本 的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。
Google Web Fundamentals 的说法我很喜欢：
图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的 特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图 片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像 素尺寸等。
真的要用图片吗？
要实现需要的效果，真的需要图片吗？这是首先要问自己的问题。浏览器和 Web 标准的发展速度极快，记 得数年前我在用微软 Silverlight 1.0 写视频播放器的时候，中文还不能使用自定义字体显示，所以那时 候写了很多糟糕的代码把需要的文字在服务器上生成图片并缓存起来。用户下载起来很慢，搜索引擎也完 全无法检索这些文字。
但是现在不一样了，很多特效（渐变、阴影、圆角等等）都可以用纯粹的 HTML、CSS、SVG 等加以实现，实 现这些效果少则寥寥数行代码，多则加载额外的库（一张普通的照片比非常强大的效果库也大了许多）。 这些效果不但需要的空间很小，而且在多设备、多分辨率下都能很好的工作，在低级浏览器上也可以实现 较好的功能降级。因此在存在备选技术的情况下，应该首先选择这些技术，只有在不得不使用图片的时候 才加入真正的图片。web系统性能优化
如何成为一名优秀的web前端工程师
JAVA WEB系统性能调优
网站前端性能优化总结
怎样才能成为一名优秀的web前端工程师
Web应用,性能优化方法
Web前端性能测试及优化技巧