常见的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)


相关推荐

  • 当用户登录,经常会有实时的下拉框,例如,输入邮箱,将会@qq.com,@163.com,@sohu.com

    当用户登录,经常会有实时的下拉框,例如,输入邮箱,将会@qq.com,@163.com,@sohu.com

  • [分享]在线的代码片段测试工具 jsbin[通俗易懂]

    [分享]在线的代码片段测试工具 jsbin[通俗易懂]有些时候,我们往往有这样的需求:临时测试一个代码片段,不想打开编辑器来新建一个文件,测试完毕又删除想给别人分享一个代码,html文件,css文件,js文件,打个包?向别人展个某个效果,发个文件过去?把代码部署到自己服务器上面?针对这些需求,我们使用在线的代码片段测试工具,也许来得更加简单和方便了。针对前端的在线代码片段工具很多,比较常见的有jsbin和jsfiddle以及codepen.而我最喜欢的就是jsbin了,它有着更多的特性给我带来了极大的方便:任意控制要展示的窗口点击这些标

    2022年10月25日
  • 不要再被骗了——QQ盗号原理大揭秘

    不要再被骗了——QQ盗号原理大揭秘前言相信大家在懵懂无知的时候都有被盗号的经历吧,QQ胡乱的加好友,突然有个好友传了个文件给你,打开以后发现QQ竟然显示强制下线,然后再也上不去了QAQ,很明显,QQ号被人盗了。最近也是很多小伙伴私信我,也看了一些人发空间说QQ号被盗了啥的,以及我自己收到的一些诈骗请求。网上针对防骗这块的文章几乎没有,为了不让更多的人受害,下面我将会以最真实朴素的语言介绍最常见的一种盗号诈骗方式,浅析一下这个盗…

  • 415错误的一种解决方法

    415错误的一种解决方法出现415错误的解决方法:1.前端看ajax请求的contentType是否与后端一致2.看发送的数据格式是否正确。下例为后端所需数据为json格式,contentType为application/json的ajax请求。functiongetAddDirResponse(data){$.ajax({url:’/algor/api/datadirs’,

  • python的三种取整方式_python取整函数-取整函数,PYTHON[通俗易懂]

    python的三种取整方式_python取整函数-取整函数,PYTHON[通俗易懂]本教程分享:《python取整函数》,python有什么办法使得int按照”四舍五入”的方式取…由于小数取整会采用比较暴力的截断方式,即向下取整,所以要想使得int()按照“四舍五入”的方式取整,可以采用如下方法:5.4“四舍五入”结果为:5,int(5.4+0.5)==55.6“四舍五入”结果为:6,int(5.6+0.5)==6python为什么算除法自动取整了。如图…

    2022年10月27日
  • Linux下rpm包x86、i386、i486、i586、i686和x86_64这些后缀含义

    Linux下rpm包x86、i386、i486、i586、i686和x86_64这些后缀含义iamlaosong评:虽然rpm包版本很多,不过目前的新机器都可以使用x86_64版本,而且也应该使用这个版本,除非一些特殊场合,比如为了使用一些老版程序。有些功能没有x86_64版本,那也只好用i386了。现在的发行包,一般也就提供i386和x86_64两个版本,即32位版本和64位版本,有些甚至已经不提供i386版本了。1、i386、i586、i686与Noarchi386—几乎所有的X…

发表回复

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

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