1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 26

常见的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-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。

七、服务器端使用压缩

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148173.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • golang []byte和string相互转换

    golang []byte和string相互转换

    golang []byte和string相互转换测试例子：packagemainimport(“fmt”)funcmain(){str2:=”hello”data2:=[]byte(str2)fmt.Println(data2)str2=string(data2[:])fmt.Println(str2)}

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月17日
  • <span>特征向量、特征值以及降维方法（PCA、SVD、LDA）</span>

    特征向量、特征值以及降维方法（PCA、SVD、LDA）

    特征向量、特征值以及降维方法（PCA、SVD、LDA）

    全栈程序员-站长的头像 全栈程序员-站长
    2021年11月19日
  • 根据IP地址和子网掩码求网络号、主机号

    根据IP地址和子网掩码求网络号、主机号

    根据IP地址和子网掩码求网络号、主机号一、理论阐述目前，IP地址主要使用32位的二进制来表示，即IPv4地址。由于32位二进制不容易记忆和书写，故采用点分十进制形式来表示IP地址。IP地址由两部分组成{<网络号>,<主机号>}，网络号表示计算机所在的网络，供路由器在进行路由选择时使用；主机号是计算机在该网络中的唯一标识。IP地址分为A、B、C、D、E五类，其中：A类IP地址第一个字节的范围是：1~126…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月24日
  • 服务器的系统和NAS有啥区别,nas和云服务器区别「建议收藏」

    服务器的系统和NAS有啥区别,nas和云服务器区别「建议收藏」

    服务器的系统和NAS有啥区别,nas和云服务器区别「建议收藏」nas和云服务器区别内容精选换一换没有区别。创建整机镜像有三种方式：使用云服务器创建、使用云服务器备份创建，以及使用云备份创建。使用备份创建镜像与使用云服务器创建镜像原理一样。云服务器创建镜像时，先为云服务器创建备份，再通过备份创建镜像，中间过程为系统自动完成的。所以二者没有区别。云耀云服务器与弹性云服务器的主要区别：云耀云服务器：云耀云服务器是可以快速搭建简单应用的新一代云服务器，云耀云服务器…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月30日
  • android开发笔记之SwipeRefreshLayout

    android开发笔记之SwipeRefreshLayout

    android开发笔记之SwipeRefreshLayoutSwipeRefreshLayout简介SwipeRefrshLayout是Google官方更新的一个控件，可以实现下拉刷新的效果，该控件集成自ViewGroup在support-v4兼容包下.在android源码中,主要是在联系人界面刷新联系人数据:packages/apps/Contacts/src/com/android/contacts/list/DefaultContactBrow…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月25日
  • EL表达式总结_el表达式循环

    EL表达式总结_el表达式循环

    EL表达式总结_el表达式循环一、EL表达式简介EL全名为ExpressionLanguage。EL主要作用：　　1、获取数据　　　　EL表达式主要用于替换JSP页面中的脚本表达式，以从各种类型的web域中检索java对象、获取数据。(某个web域中的对象，访问javabean的属性、访问list集合、访问map集合、访问数组)　　2、执行运算　　　　利用EL表达式可以在JSP页面中执行一些基本的关系运算、逻…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月28日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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