常见的web前端性能优化方法总结
首先，我们要了解一下，前端优化的目的是什么
- 从用户角度，优化能够让页面加载得更快、对用户的操作响应更快，给用户提供更为友好的体验。
- 从服务商角度，优化能够减少页面请求数、或者减小请求所占带宽，节省资源。
大概有如下优化方法，我们看一下：
一、页面内容优化
- 减少http请求次数
- 减少DNS查询次数
- 避免页面跳转
- 缓存ajax
- 延迟加载（一般用在图片多的页面中，滚动时才加载）
- 预加载
- 减少DOM元素数量
- 减少iframe数量
- 避免404
二、css优化
- 将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）
- 避免css表达式
- 用link代替@import
- 避免使用filters
- css文件合并与压缩
三、js代码优化
- 将脚本置底（将脚本内容在页面信息内容加载后再加载）
- 使用外部javascript和css文件
- 去除重复脚本，避免重复的资源请求
- 减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
- js文件合并与压缩
四、图片优化
- 优化图片大小
- 尽量使用css sprite（精灵图也叫雪碧图）
- 不要在html中缩放图片
- 使用小且可缓存的favicon.ico
五、减少Cookie传输
- Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量
减少Cookie中传输的数据量。
六、浏览器端使用缓存
- CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。
- 用法：通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。
七、服务器端使用压缩
- 在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此
HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。
常见的web前端性能优化方法总结相关推荐
- 列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
- WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
- Web前端性能优化思路
本文旨在整理常见Web前端性能优化的思路,可供前端开发参考.因为力求精简,限于篇幅,所以并未详述具体实施方案. 基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的inde ...
- Web 前端性能优化
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- （2020.12.7）初次web前端性能优化记录
(转载公司内部论坛本人文章2020.12.7) 导语: 作为客户端开发,由于项目的需要,最近一年陆续做了很多web前端的需求开发.但过去做的大部分都是单页面的运营H5,上线时间短,一般保证能稳定运行就 ...
- 大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- WEB前端性能优化小结
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- web前端性能优化与SEO
web前端性能优化与SEO 网站优化的必要性 浏览器的页面优化 使用浏览器缓存 css Sprites 压缩 css与js文件的位置 减少cookie运输 javascript代码优化 数据访问 字符 ...
- 【JavaWeb】Web前端性能优化
本文目录 一. 浏览器访问优化 1.1 减少http请求 1.2 使用浏览器缓存 1.3 启用压缩 1.4 CSS放在页面最上面. JavaScript 放在页面最下面 1.5 减少Cookie传输 ...
- 【前端性能优化方法与实战】
[前端性能优化方法与实战] 性能优化概览
最新文章
- 2022-2028年中国汽车零配件行业研究及前瞻分析报告
- APP Widget的开发
- B/S项目结束，又是一个新的开始
- Oracle的row_number函数
- Error during artifact deployment. See server log for details解决办法
- 标题 计算机构自由度时主要步骤有哪些,2010年1月全国自考混凝土结构设计试题和答案...
- [算法][二分查找][排除法]
- JavaScript之eval() 函数
- 默认适应窗口_PS教程基础之cs6默认快捷键汇总及补充
- oracle 查找上一个,查看ORACLE_HOME的另外一个方法
- React中的state和props有什么区别？
- 问答| 为什么car-like robot运动中存在最小转弯半径？
- Mosh--mysql 学习笔记（1）
- Nugine: Rust 性能调优
- 小程序中text标签之坑
- 基于java的高校运动会管理系统的设计与实现--毕业论文（可仅作参考）
- activemq如何保证消息按顺序消费
- JAVA IO流（内存流、管道流、打印流）
- 拓嘉启远电商：为什么拼多多商品会掉资源位
- Django使用MySQL数据库