浏览器的最大并发连接数一般在4到6之间，首先了解影响加载的性能因素：

（1）下载的文件太大

（2）发出的请求太多

（3）请求相应不及时

针对这些因素，一般会考虑减少请求次数：

（1）对静态文件设置缓存事件

（2）页面设计尽量简洁

（3）合并文件（html，JS， css，图片..）​

再细致一点：

（1）页面实现按需加载（分时加载）

  • 先加载基本静态html框架
  • 再加载css, render css
  • 最后加载Js从服务端​取得的数据，然后render到内容区

（2）页面提交，考虑异步执行

  • 服务器端考虑页面‘轮询’操作，避免页面长时等待
  • 服务器端缓存数据，避免把所有数据放到页面处理
  • 简化对象大小，不要将后端完整对象返回到前端，按需返回
  • 缓存静态信息，如用户登录信息，页面帮助信息...

(3)​页面加载考虑多种优化方案

  • 避免一次加载所有内容，用‘多线程’和‘异步’方式
  • 没有在‘当前屏幕显示’，先不初始化，拖拽到当前屏幕在加载

一般将css在<head>标签加载，Js 在的<body>底部加载

优化方向：

请求数量         合并脚本和样式表 css sprites, 拆分初始化负载，划分主域

请求带宽        开启GZIP，精简JS code，移除重复脚本，图像优化

缓存利用        使用CDN，使用外部JS，CSS 添加Expire 头，减少DNS查找，配置ETag, 使​​AJAX可缓存

页面结构        样式顶部，js底部，避免页面加载阻塞，尽早刷新文档流输出

代码校验         避免CSS表达式，避免重定向​

YUI Compress 压缩工具 -》 精简JS

服务器端安装GZIP自动压缩功能模块​

CDN-》内容分发网络，能够实时地根据网络流量和各节点的连接，负载状况以及到用户的距离和相应时间等信息将用户请求导向​到离用户最近的服务节点。

‘查找----替换’的思路，来实现主域的划分​

​

总之，做前端开发一定要考虑浏览器兼容性和UI性能的设计​，重要的是用户体验。

UI 性能因素考虑的更多相关文章

  1. Android UI性能优化详解

    设计师,开发人员,需求研究和测试都会影响到一个app最后的UI展示,所有人都很乐于去建议app应该怎么去展示UI.UI也是app和用户打交道的部分,直接对用户形成品牌意识,需要仔细的设计.无论你的ap ...

  2. 使用Systrace分析UI性能

    开发应用的时候,应该检查它是否有流畅的用户体验,即60fps的帧率.如果由于某种原因丢帧,我们首先要做的就是知道系统在做什么(造成丢帧的原因). Systrace允许你监视和跟踪Android系统的行 ...

  3. Unity UI性能优化技巧

    本文将介绍一些提升Unity UI性能的技巧.更多优化技巧,可以观看Unity工程师Ian Dundore在Unite Europe 2017的演讲<使用Unity性能提升技巧>. 1.划 ...

  4. Android-优化UI性能(1)-降低主线程的堵塞时间

    Android-优化UI性能(1)-降低主线程的堵塞时间 一 降低主线程的堵塞时间 Android已经提供了AsyncTask实现从主线程生成新的异步任务的方法. 定义并实现以下的类就可以(方法由系统 ...

  5. Android提高UI性能技巧

    提高UI性能的方法事实上有非常多在实际的开发中都已经用到了,在此做一下总结. 1.降低主线程的堵塞时间 若一个操作的耗时较长(超过5秒),我们应该将其放入后台线程中运行.仅仅在须要改动UI界面时通知主 ...

  6. Android UI性能优化实战, 识别View中的性能问题

    出自:[张鸿洋的博客]来源:http://blog.csdn.net/lmj623565791/article/details/45556391 1.概述 2015年初google发布了Android ...

  7. Android UI性能优化实战 识别绘制中的性能问题

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45556391: 本文出自:[张鸿洋的博客] 1.概述 2015年初google ...

  8. 控件UI性能调优 -- SizeChanged不是万能的

    简介 我们在之前的“UWP控件开发——用NuGet包装自己的控件“一文中曾提到XAML的布局系统 和平时使用上的一些问题(重写Measure/Arrange还是使用SizeChanged?),这篇博文 ...

  9. 测试c语言函数调用性能因素之测试三

    函数调用:即调用函数调用被调用函数,调用函数压栈,被调用函数执行,调用函数出栈,调用函数继续执行的一个看似简单的过程,系统底层却做了大量操作. 操作: 1,               调用函数帧指针 ...

随机推荐

  1. Stream processing with Apache Flink and Minio

    转自:https://blog.minio.io/stream-processing-with-apache-flink-and-minio-10da85590787 Modern technolog ...

  2. 记一次接口504 Gateway Time-out原因及解决方法

    今天在刷新公司项目页面时发现有个板块一直刷新不出数据,最后发现接口报错(504 Gateway Time-out) 通过查看代码发现有个sql语句,如下,特别慢 select `vdc1`,      ...

  3. Swift 属性 函数

    如今看cocoachina上得文章越来越有质量了,果断分享一下  原文: http://www.cocoachina.com/newbie/basic/2014/0611/8773.html 函数 函 ...

  4. 写一个递归函数DigitSum(n)，输入一个非负整数，返回组成它的数字之和

    例如,调用DigitSum(1729),则应该返回1+7+2+9,它的和是19. 思路:我们可以先将整数的每一个数字取出来,每次取个位数字,取完后退位(将数字除以10),在取个位数字,依次取出所有的数 ...

  5. 堆的操作（make_heap，push_heap,pop_heap,sort_heap,is_heap）

    堆不是一中sort ranges,堆中的元素不会以递增方式排列,内部以树状形式排列,该结构以每个结点小于等于父节点构成,优先队列就是以堆来实现 make_heap //版本一:用operator &l ...

  6. No MaterialLocalizations found (Flutter)

    在显示SimpleDialog时候程序报错 No MaterialLocalizations found 没有找到 MaterialLocalizations 搜索找到原因 runApp 需要先调用 ...

  7. naturalWidth与naturalHeight

    naturalWidth与naturalHeight是HTML5的新属性, 可与通过这两个属性来直接获取图片的原始宽度和高度, 现在在火狐, 谷歌, IE11均已经实现 可以看看naturalWidt ...

  8. Jenkins入门-部署gitlab 项目(8)

    目前很多公司代码管理已经迁入到了git上,大多数的公司使用的代码管理服务器是gitlab,目前持续交付的流行很多公司都采用Jenkins完成持续交付工作.首先我们需要通过Jenkins来获取我们的项目 ...

  9. Excel文件转为其他格式文件

    引用:Spire.XLS 是一个 Excel 文件的读写库,无需安装office,使用起来也挺方便的.Spire还有一些其他的库(Spire.Doc,Spire.Pdf……) 说明:Spire.XLS ...

  10. 设计模式-责任链模式Chain of Responsibility)

    一.定义 职责链模式是一种对象的行为模式.在职责链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知道链 ...