访问首页长时间白屏问题

1、JavaScript外联文件引用放在html文档底部;CSS外联文件引用在html文档头部,位于head内;

2、http静态资源尽量用多个子域名;

3、服务器端提供html文档和http静态资源时,尽量开启gzip压缩;

4、在js,css,image等资源响应的httpheaders里,设置expires,last-modified;

5、尽量减少HTTP Requests的数量;

6、js/css的minify:可统一通过combo handler做到压缩加合并;

7、减少不必要的301/302跳转:别让页面打开时间浪费在302多次跳转上(每次可能几十毫秒);

8、请大量使用精灵图:这样做可以大大地减少CSS背景图片的HTTP请求次数;

9、首屏不需要展示的较大尺寸图片,请使用lazyload懒加载;

10、图片无损压缩的优化;

11、避免404错误:尽量减少外联js;

12、减少cookies的大小:尽量减少cookies的体积对减少用户获得响应的时间十分重要;

13、使用无cookies的域;

14、减少DOM Elements的数量;

15、引入textarea/script元素做延迟解析异步渲染

通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习,可以学到如下内容:①WEB网站页面性能的指标(白屏时间首屏加载完成时间、FP、FCP、DCL、CLS、FPS等);②WEB网站页面性能测试策略;③WEB网站页面加载过程(前端基础语言:HTML+CSS+JavaScript,DOM、CSSOM、渲染树、布局、绘制);④WEB网站页面性能测试工具的实际操作和功能介绍(开发者工具:控制台、网络、性能、Lighthouse、FPS渲染统计等);⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容:第一章:课程简介1、课程介绍2、课程大纲第二章:页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章:页面加载过程1、HTML概念,HTML5实例,HTML5文档2、CSS概念,CSS实例,CSS文档3、JavaScript概念,JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程,HTML渲染树第四章:页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章:页面性能测试工具-控制台:window.performance1、控制台:window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章:页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章:页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章:页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章:页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章:页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章:网速调研1、全国网速的调研和本机网速测试第十二章:页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值