UI 性能因素考虑
2024-08-25 22:39:35
浏览器的最大并发连接数一般在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性能的设计，重要的是用户体验。
最新文章
- Java集合类学习笔记（各种线性表性能分析）
- Quartz.NET开源作业调度框架系列(一):快速入门step by step
- selenium By.xpath 用法
- WPF MultiDataTrigger
- 转载：C#实现接口回调
- 如何配置web服务器
- iOS 设置控件圆角、文字、字体
- SQL图像查看器 —— SQL Image Viewer
- UVA 1030 - Image Is Everything【模拟+思维+迭代更新】
- ORACLE数据库学习之逻辑结构
- python学习笔记2_条件循环和其他语句
- NuGet 构建服务器与常用命令
- Java - “JUC”锁
- PHP获取当前页面的网址
- VS2003在win7 64位的调试
- Centos下cacti的安装
- 【opencv】 solvepnp 和 solvepnpRansac 求解 【空间三维坐标系 到 图像二维坐标系】的 三维旋转R 和 三维平移 T 【opencv2使用solvepnp求解rt不准的问题】
- odoo继承父类中的函数（方法）
- [Python爬虫] Selenium +phantomjs 模拟下拉滚动条
- 认识Spring AOP