【总结】网站性能分析-前台优化
背景:对于一个大型网站来说,前台的性能直接影响用户的操作体验,直接影响的就是网站的用户活跃度和业务质量。那么如何评测一个网页的性能至关重要。虽然不能得知所有用户访问一个页面的加载流畅情况,但是至少要满足80%的用户操作可用性。从一个页面让用户访问开放的渠道比较多,签入到app移动端,wap端,web端等端应用场景,一般注重移动端性能场景较多,毕竟目前用户手机的内存和性能都比pc小的太多。所以解决移动端访问页面的性能是重中之重。我们从快速从6个维度来衡量一个页面的标准来看,能够解决大部分的网页性能问题。然后再从具体的标准中,去处理相关优化。也就是第二章,网页优化所写的主要内容。后面有几个工具可以简单参考使用。
衡量标准
1.首次加载,弱网<200k,强网<300k,页面二次加载<50k。
2.请求数<20
3.wifi条件下页面渲染时间<1s
4.页面帧率>50
5.弱网Q值配置,
6.资源压缩与域名收敛。
网页优化
content优化与分析
1).减少https请求,尽量将数据在服务端尽量少的接口中返回。
2).减少DNS查找。即页面资源不同的域名尽量少。
3).避免URL重定向。在重定向之间,页面不会下载任何资源,整体到页面渲染延迟较高。
4).尽量让ajax使用缓存,缓存可以是写入本地的缓存也可以是自己自定义的缓存区域,减少没有必要服务端的请求。
5).尽量减少DOM元素,避免不必要的资源下载。
6).避免请求之后返回到404,避免浪费服务器资源。
cookie优化与分析
1).减少没有必要的cookie,以减少传输网络流量
2).静态资源请求以及不需要cookie的请求,尽量减少或不带上cookies。
css优化与分析
1).尽量将css样式文件放到head里面。
2).避免使用css表达式
3).js/css尽量独立成外链文件,避免融合在html。外链的文件可以利用缓存,避免做不必要的请求。
4).js,css脚本尽量压缩,避免多余的网络传输。
5).尽量减少复制或者移除的js,css,减小请求流量
6).避免使用阿尔法图片过滤器,由于是针对每个元素级别的处理,会增大消耗内存。
images优化与分析
1).尽量使用符合要求的图片资源。即不要加载过大的图片,然后使用元素缩小图片尺寸。
2).常用的不变更的图片尽量使用缓存技术处理。避免不必要的请求。
javaScript优化与分析
1).js尽量放到html底部,以保证整个页面会提前被渲染。
2).js/css做成外链文件,可以被浏览器缓存利用,减少不必要的服务端请求。
3).减小js,css文件大小,即压缩文件,减小网络传输。
4).尽量避免,复制或者移除的js,css内容,优化样式或者脚本大小。
Server优化与分析
1).尽量将响应的内容部署到地址位置不同的机器,即CDN上。增加响应速度。
2).避免空的图片链接。减少网络流量。
3).将图片,脚本等静态资源在Headers里面标记过期时,缓存数据,避免每次都需要请求。
4).合并响应请求,开启gzip压缩。
5).开启ETags(entity tags),避免无用的网络请求。
6).尽量使用Get模式的ajax请求,cookie不能太长,最长url在IE6不超过2kb,减少不必要的字节传输,post模式会带有其他信息。
常用工具
页面性能评分工具
1.Yslow
图片合并工具
1.图片合并:css sprite(css精灵)+css sprite样式生成工具
.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
压缩脚本工具
1.压缩js工具,Minify JS
【总结】网站性能分析-前台优化相关推荐
- 前端如何进行网站性能分析及优化性能
目录 1.分析网站性能常用的方式 1.1 chrome dev Tools 1.2 Lighthouse 1.3 第三方收费方案 2.介绍一个常用的性能分析工具 LightHouse 2.1 特点: ...
- 基于linux服务器的性能分析与优化
基于linux服务器的性能分析与优化 方面:硬件系统软件网络 现象:系统不稳定相应速度慢 web无法打开打开速度慢 方案:硬件故障更换硬件或升级硬件 系统问题修改系统参数和配置 软件问题修改和升级软件 ...
- 《网站性能监测与优化》一2.4 软件服务应用网站
本节书摘来自异步社区<网站性能监测与优化>一书中的第2章,第2.4节,作者[美]Alistair Croll , Sean Power,更多章节内容可以访问云栖社区"异步社区&q ...
- 让oracle跑得更快——oracle 10g性能分析与优化思路,[让Oracle跑得更快.Oracle.10g性能分析与优化思路]概要1.doc...
[让Oracle跑得更快.Oracle.10g性能分析与优化思路]概要1 在线事务(OLTP) 在线分析(OLAP) 在Oracle数据库中,凡是分配了存储空间的,都称为段,所有段并不一定指的是表,也 ...
- 网站性能分析(下)-让网站并行加载但顺序执行JS
如果网站不支持JavaScript,复杂的功能将无法正常工作.在开发当中通常有几个脚本会写在HTML文件的头部.你嵌入的越多,网站的速度潜在的变得越慢.因此提高并行加载速度变得非常有必要,在前面的文章 ...
- 《网站性能监测与优化》一2.3 协作网站
本节书摘来自异步社区<网站性能监测与优化>一书中的第2章,第2.3节,作者[美]Alistair Croll , Sean Power,更多章节内容可以访问云栖社区"异步社区&q ...
- .NET Core引入性能分析引导优化
"性能分析引导优化(Profile Guided Optimization,缩写PGO)"是一项原生编译技术,可用于生成高度优化的代码.它通过一个两步编译过程实现优化--用第一步记 ...
- CPython解释器性能分析与优化
原文来自微信公众号"编程语言Lab":CPython 解释器性能分析与优化 搜索关注 "编程语言Lab"公众号(HW-PLLab)获取更多技术内容! 欢迎加入 ...
- oracle 10g 速度慢,让Oracle跑得更快—Oracle 10g性能分析与优化思路_数据库教程
资源名称:让Oracle跑得更快-Oracle 10g性能分析与优化思路 内容简介: 在这本书里读者将会学到作者在性能优化方面的一些思路和思考,一些故障处理的方法和原则,这些东西是作者在实践中长期积累 ...
最新文章
- 关于分布式多级缓存架构,也许你一直考虑的太简单了
- Pycharm快捷键及一些常用设置
- SpringMVC之源码分析--LocaleResolver和ThemeResolver应用
- 技术解析系列 PouchContainer Goroutine Leak 检测实践
- mysql使用date_format格式化日期
- 如何在防火墙或路由器中禁止访问一些公司不相关网站
- CUDA11.1安装教程(python3.8)
- 精通SpringBoot——第二篇:视图解析器,静态资源和区域配置
- Linux下如何杀死终端
- Find命令搜索过去一段时间内修改过的文件
- 剑指 Offer 09. 用两个栈实现队列(day 03)
- MIS--信息管理系统
- 如何寻找竞争情报发挥企业优势
- intel安装mac os
- 六一儿童节 python
- Android屏幕密度计算公式
- 我们是怎么简单打开百度的?
- 抖音一个老人和一个机器人歌曲_抖音一禅小和尚背景音乐汇总 全网最火bgm都在这...
- 【思特奇杯·云上蓝桥·算法集训营】第四周
- 任意波形发生器的设计