大屏开发经验总结

• 大屏开发经验总结
  • 框架及设计
  • 图表库的选择
  • 页面布局
  • 自适应网页的实现
  • 性能优化

大屏开发经验总结

框架及设计

其实可视化的web开发和传统网页开发并没有什么本质区别。都是数据+模板。前后端分离什么的，跟传统网页开发也没山么区别。现在流行的是用node作为中间层，数据处理交给java或者其他。（对于体量小的应用，不需要设计这么复杂）

首先根据项目及人员配备情况，选择合适的前端框架，个人觉得用vue效率比较高且跟得上现在的技术。以及确定是否需要使用前后端分离。

在UI设计过程中，最好能及时沟通一些技术细节，避免设计出的效果现有技术不能达到要求或者具有太大的技术难度。最终商量确定折中方案实施。

图表库的选择

可视化的关键就是能直观生动的将数据进行展示，对页面的动效要求和图表统计分析比传统网页要多，选择合适的插件非常重要。常用的echarts或highcharts，d3.js，如果要求3d效果，可以采用wegGL技术。

echarts
echarts是百度开源的，底层是canvas。支持很多丰富的图表，官网实例也非常多，兼容性不考虑IE低版本的话是非常不错的选择。4.0版本据说支持千万级别数据量渲染，同时增加了svg引擎包裹。

highcharts
highcharts底层是svg的，商业使用需要授权。在浏览器兼容性支持上比echarts好，但是实例较少，个人更偏向使用echarts。

canvas vs svg

• canvas依赖于分辨率，而svg不依赖，也就是说浏览器缩放时canvas会变形而svg不会。
• canvas不支持事件处理，svg支持事件处理。
• 对于移动端，canvas不太友好，而svg内存占用小
• 数据量大交互多时，canvas占优势，svg渲染性能较差。

页面布局

在开始着手设计页面时，首先得考虑页面以怎样的方式布局，他是一个静态网页，还是一个自适应或者响应式？

静态网页
所谓静态网页就是采用固定的宽度实现的页面。

自适应
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。

响应式
响应式可以自动识别屏幕宽度，并作出响应调整，布局和展示的内容在不同屏幕下可能不同。众所周知，twitter开源的bootstrap就是一套响应式的UI框架。

在做可视化大屏展示时，根据需求选择使用哪一种网页布局。一般采用静态或者自适应。

自适应网页的实现

1. 允许网页宽度自动调整
   在网页代码的头部，加上viewport meta

    <meta name="viewport" content="width=device-width, initial-scale=1" />  
   

2. 尽量避免使用绝对宽度
   由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，通过指定百分比来替代。
3. 相对大小的字体
   字体同样不能使用绝对大小(px)，而使用相对大小（em）或高清方案（rem），上面的宽度也可以使用。
4. 选择性加载css
   自适应网页设计的核心就是css3引入的Media Query。
   例子：

    <link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)"  href="tinyScreen.css" />  
   

5. css的@media规则
   同一个css文件中，可以根据不同的屏幕分辨率，选择性的应用不同的css规则。

    @media  screen and (max-device-width: 400px) {  
       
    　　　　.column {  
    　　　　　　float: none;  
    　　　　　　width:auto;  
    　　　　}  
       
    　　　　#sidebar {  
    　　　　　　display:none;  
    　　　　}  
       
    　　}  
   

6. 图片的自适应
   除了页面布局和文本需要自适应外，图片也必须实现自动缩放。通过css来实现：

    img { max-width: 100%;}  
   

   老版本的IE不支持max-width，可以使用：

    img { width: 100%; }
   

7. flexbox布局
   flexbox布局就是我们经常说的弹性布局。它是css3新增的一种布局模式，可以很方便地用来改善动态或者未知大小的元素的对齐和方向等。

flex容器的主要特性是她可以调整其子元素的宽度或者高度来填充可用的空白区域，以最优的方式达到兼容大小。使用felx布局需要写一些浏览器的hack，IE低版本（10-）不支持flex布局。

性能优化

有时我们访问一个网页，会感觉很卡顿，一方面除了网络带宽原因外，页面的渲染性能也有很大的影响。

首先，我们得了解浏览器渲染的过程，浏览器从解析一个页面到渲染做了哪些事呢？

1. 转化： 浏览器从磁盘或网络读取HTML的原始字节，并按照相应编码规范（一般为utf-8）进行编码。
2. 符号化： 根据W3C标准转换为对应的标签符号。
3. DOM构建： HTML解析器解析其中的标签，生成token，遇到css或js会发送相应的请求。根据token生成相应的DOM树。
4. CSSOM构建： 添加CSS样式生成CSSOM树。
5. 渲染树构建： 从DOM树的根节点开始，遍历每个可见的节点，给每个节点找到相应匹配的CSSOM规则，应用这些规则，连带其内容及计算的样式。
6. 样式计算： 浏览器会将所有的相对位置转换成绝对位置等一系列的样式计算。
7. 布局： 浏览器将元素进行定位和布局。
8. 绘制： 绘制元素样式，颜色、背景、大小、边框等等。
9. 合成： 将各个层合成到一起，显示在屏幕上。

在理解渲染性能之前，我们有必要了解一下两个概念，那就是重排（也叫回流，Reflow）和重绘（repaint）。

重排（Reflow）
重排指的是计算页面布局，包括节点的尺寸和位置，还有可能触发其子节点的Reflow。

当渲染树中的一部分或全部因为元素的尺寸、布局、隐藏等改变而需要重新构建，这就叫回流，每个页面至少需要一次回流，就是页面第一次加载的时候。

在web网页中，很多状况会导致回流：

• 调整窗口大小
• 改变字体
• 增加或移除样式元素
• 内容变化
• 激活css伪类
• 操作css属性
• 操作DOM
• css3 Animation或transition

重绘（Repaint）
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格、而不会影响布局的，就是重绘。

回流和重绘都很容易被触发，他们的触发对性能的影响都非常大，我们无法完全避免，只能尽量不触发。

1. 避免触发布局
   目前，transform和opacity只会引起合成图层，不会引起布局和重绘。性能是最好的。所以在制作动画时，建议使用transform的translate替代margin或position中的top、right、bottom、left，同时使用transform中的scaleX或scaleY替代width和height

2. 避免长时间渲染
   • 复杂的css，如过多的属性嵌套或者复杂的样式计算
   • Image Decodes，图片解码及图片大小的设置
   • 大的空图层
     以上这些都花费长时间来渲染，应避免。
3. 使用css提供的新特性will-change
will-change的主要作用就是提前告知浏览器将会进行的一些变动，告诉浏览器分配资源。

但是注意，不要将will-change应用到太多元素上，也不要过早的应用will-change，并注意在应用变化之后，取消will-change的资源分配。