常见的web前端性能优化方法总结「建议收藏」

常见的web前端性能优化方法总结「建议收藏」首先,我们要了解一下,前端优化的目的是什么从用户角度,优化能够让页面加载得更快、对用户的操作响应更快,给用户提供更为友好的体验。从服务商角度,优化能够减少页面请求数、或者减小请求所占带宽,节省资源。大概有如下优化方法,我们看一下:一、页面内容优化减少http请求次数减少DNS查询次数避免页面跳转缓存ajax延迟加载(一般用在图片多的页面中,滚动时才加载)预加载减少D…

大家好,又见面了,我是你们的朋友全栈君。

首先,我们要了解一下,前端优化的目的是什么

  1. 从用户角度,优化能够让页面加载得更快、对用户的操作响应更快,给用户提供更为友好的体验。
  2. 从服务商角度,优化能够减少页面请求数、或者减小请求所占带宽,节省资源。

大概有如下优化方法,我们看一下:

一、页面内容优化

  1. 减少http请求次数
  2. 减少DNS查询次数
  3. 避免页面跳转
  4. 缓存ajax
  5. 延迟加载(一般用在图片多的页面中,滚动时才加载)
  6. 预加载
  7. 减少DOM元素数量
  8. 减少iframe数量
  9. 避免404

二、css优化

  1. 将样式表置顶将 (CSS放在 HEAD中,防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面)
  2. 避免css表达式
  3. 用link代替@import
  4. 避免使用filters
  5. css文件合并与压缩

三、js代码优化

  1. 将脚本置底(将脚本内容在页面信息内容加载后再加载)
  2. 使用外部javascript和css文件
  3. 去除重复脚本,避免重复的资源请求
  4. 减少DOM访问(修改和访问DOM元素会造成页面的重绘和重排,循环对DOM操作更是减慢页面加载速度)
  5. js文件合并与压缩

四、图片优化

  1. 优化图片大小
  2. 尽量使用css sprite(精灵图也叫雪碧图)
  3. 不要在html中缩放图片
  4. 使用小且可缓存的favicon.ico

五、减少Cookie传输

  1. Cookie包含在每次请求和响应中,太大的Cookie会严重影响数据传输,因此哪些数据需要写入Cookie需要慎重考虑,尽量减少Cookie中传输的数据量

六、浏览器端使用缓存

  1. CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好地改善性能。
  2. 用法:通过设置HTTP头中的Cache-ControlExpires属性,可设定浏览器缓存,缓存时间可以是数天,甚至是数月。

七、服务器端使用压缩

  1. 在服务器端对文件进行压缩,在浏览器对文件解压缩,可有效减少通信传输的数据量。文本文件的压缩率可达80%以上,因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148173.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • centos 安装 python3_centos运行python脚本

    centos 安装 python3_centos运行python脚本注意:以下教程是让centOS7里面的Python2和Python3共存,并不是替换Python2。一、检查系统是否有gccgcc–version ——查询是否安装gcc-v——查询版本如果没有显示就执行下面yum安装gcc #查看gcc安装包yumsearchgcc#安装gccyum -yinstallgcc 安装下面依赖库(65个,…

  • SSM整合 运行报Handler dispatch failed; nested exception is java.lang.AbstractMethodError: Method com/mcha「建议收藏」

    SSM整合 运行报Handler dispatch failed; nested exception is java.lang.AbstractMethodError: Method com/mcha「建议收藏」今天在整合SSM的时候,在运行过程中出现了如下错误:org.springframework.web.util.NestedServletException:Handlerdispatchfailed;nestedexceptionisjava.lang.AbstractMethodError:Methodcom/mchange/v2/c3p0/impl/NewProxyResultSet.isClosed()Zisabstract org.springframewor.

  • ant man什么意思_汽车的ANT是什么意思?

    展开全部ANT就是天线接口,用来连接天线。常见于收音机,或者GPS等上面。在接收短波或FM时需62616964757a686964616fe58685e5aeb931333433626437要外界天线,以增加接收灵敏度。作为高速数据传输领域的新成员,它在智能网联汽车中所起到的作用是举足轻重的。传统汽车对于天线的需求非常有限,仅仅在于接收一些较低频率的AM/FM信号、GPS信号,以及近两年才开始普及…

  • TinyXML2使用总结「建议收藏」

    TinyXML2使用总结「建议收藏」TinyXML2是简单实用的开源的C++XML文件解析库,可以很方便的应用到现有的项目之中。 TinyXML2解析器相对TinyXML1在代码上是完全重写,使其更适合于游戏开发中使用。它使用更少的内存,更快,并使用更少的内存分配。xml类似数据库,一般来说对数据库有什么操作,那么对xml文件也能实现什么操作。数据库增删查改对应xml文件就是新建xml文件…

  • linxu navicat15 激活码[最新免费获取]

    (linxu navicat15 激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • JS封深入了解

    JS封深入了解

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号