Web前端分析测试和性能提升

本文介绍了14个关键的网页性能优化方法,包括减少HTTP请求、利用浏览器缓存、使用GZIP压缩、合理放置CSS和JS文件等技术手段,旨在帮助开发者提高网页加载速度和用户体验。

14个测试要点以及对应的可以提升的点

  1. 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;CDN托管,图片服务器。
  2. 用好浏览器缓存机制:有利有弊,找到平衡
  3. 网页Gzip:网上看到的图片已经压缩的不能再压缩了,但是GZIP是针对文本类资源压缩的,把空格什么的去掉,十分有效。
  4. 把CSS文件放在HTML开头:如果放在后面会增加reflow的过程
  5. 把JS文件放在HTML的结尾:防止开头的时候就阻塞了。
  6. 减少DOM操作次数,优化javascript性能。
  7. 尽量避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性):根据屏幕分辨率改变CSS样式,能不用就尽量不用,因为加重浏览器的负担
  8. 尽量减少DNS的查找:尽可能在网页里面找内部链接的话用相对路径,如果要多次请求同一个网站,尽可能的把域名换成IP,可以减少DNS的查找。
  9. 最好用JS压缩,相比较GZIP压缩更有针对性一点。var username; var u;
  10. 避免重定向 redirect:https://www.baidu.com,尽可能在后面加上/ 最好还能直接加上index.html,避免浏览器还要在判断一次默认网页。
  11. 去除重复的脚本:不要有冗余的代码段,把能合并的或者是能抽象的都打包一下
  12. 使用Ajax请求,可以局部刷新。不是每一个请求都要刷新一下页面,比如信息填写表单的提交,在客户端就可以验证输入是否正确,而不需要等到请求发送之后才在服务端发现写错了。
  13. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
  14. 图片预加载, 使用雪碧图合并小图标。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值