列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失。那么从Web前端的性能优化上来说有哪些常见、实用的方法呢?下面小千就列举6个常见且实用的Web前端性能优化方法。
1、使用CDN
CDN(内容分发网络)部署在各大运营商机房,当用户通过浏览器请求资源时可以直接反馈给用户,极大的减轻了服务器数据中心的压力。本质上CDN也是一种缓存,如果你的所在地距离某个CDN节点很近,那么网站响应的速度提升也是非常明显的。另外CDN所缓存的资源主要为静态资源,如静态页面、图片、css和js文件等。CDN加速对于一些遍布范围较大的网站来说效果最为明显,使用的话像阿里云CDN产品,其节点多达280多个,覆盖运营商也比较全面。
2、减少外部http协议
网页加载的时间与http请求密不可分,而外部资源的加载的速度则与主机服务提供商服务器架构和分布地点有关。我们可以通过检查自己的网站上多余的图片、css、JavaScript和一些组件,然后对应的去逐个完善,就可以减少一些http请求。
3、使用预获取
顾名思义预获取就是在真正有需要去请求之前就获取一些必要的数据和资源,以提升用户的浏览体验。预获取主要有三大方式:
1.链接预先获取
2.DNS预先获取
3.预先渲染
根据你想要使用的预先获取形式,你只需在网站 HTML 中的链接属性上增加 rel=“prefetch”,rel=“dns-prefetch”,或者 rel=“prerender” 标记。
4、压缩HTML、CSS和JavaScript
在编写代码时候会有一些多余的空格,这会占用字节,使用一些压缩工具可以有效解决这个问题。值得注意的是,压缩后的文件,其可读性就会变差,后期想维护就会变得困难了。
5、优化图片
一张高清的图片大概几兆左右,而很多时候我们并不需要这样的画质,一般我们都会选择将其保存为高画质的就可以了,这样会有效减小加载图片带来的压力。像JPEG图片那样包含了时间、地点、相机型号的格式,更不是我们所需要的。
6、Ajax请求方式
POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(可以在服务器端对数据进行缓存,以便提高处理速度)
GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。所以在进行Ajax请求的时候,可以选择尽量使用get方法,这样可以使用客户端的缓存,提高请求速度。
以上就是小千整理的6个常见且实用的Web前端性能优化方法。进行Web前端优化似乎需要花费很大的精力,相信这篇应用指南中的一些小技巧能帮你极大改善网站加载速度。网站加载地越快,则用户体验越佳。因此,对Web前端进行优化能使给你和你的用户都带来益处。
本文来自千锋教育,转载请注明出处。
列举6个常见且实用的Web前端性能优化方法相关推荐
- WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
- WEB前端性能优化小结
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- Web前端性能优化思路
本文旨在整理常见Web前端性能优化的思路,可供前端开发参考.因为力求精简,限于篇幅,所以并未详述具体实施方案. 基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的inde ...
- Web 前端性能优化
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- (2020.12.7)初次web前端性能优化记录
(转载公司内部论坛本人文章2020.12.7) 导语: 作为客户端开发,由于项目的需要,最近一年陆续做了很多web前端的需求开发.但过去做的大部分都是单页面的运营H5,上线时间短,一般保证能稳定运行就 ...
- web前端性能优化与SEO
web前端性能优化与SEO 网站优化的必要性 浏览器的页面优化 使用浏览器缓存 css Sprites 压缩 css与js文件的位置 减少cookie运输 javascript代码优化 数据访问 字符 ...
- 大型网站技术架构(3):WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- 【JavaWeb】Web前端性能优化
本文目录 一. 浏览器访问优化 1.1 减少http请求 1.2 使用浏览器缓存 1.3 启用压缩 1.4 CSS放在页面最上面. JavaScript 放在页面最下面 1.5 减少Cookie传输 ...
- WEB前端性能优化基本套路
前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响 ...
最新文章
- 在MySQL数据库中,这4种方式可以避免重复的插入数据!
- 拼接图像亮度均匀调整_液晶拼接屏如何才能达到更好的显示效果
- struts2+extjs文件上传完整实现(攻克了上传中的各种问题)
- [vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢?
- 来自前苹果高管Heidi Roizen的经验之谈
- 360私有云平台Elasticsearch服务初探
- win 10 1709安装linux,小编详解win10 1709安装教程
- 查看谁连接oracle,oracle如何查看当前有哪些用户连接到数据库
- Hadoop环境搭建学习(1)
- 手机qq旋风.android,QQ旋风安卓版2020,QQ旋风手机版安卓版2020最新版本预约 v1.0 - 浏览器家园...
- Access入门之索引查询
- 企业CIS 系统的收集方法分析
- UG NX 10 坐标系
- Java项目集成工作流引擎解决方案及实例展示(前后分离版)
- 跳马问题:马走日,请问马从0,0位置出发,走到x,y目标点,还必须走k步,有多少种走法
- php页面添加背景图片,css怎么增加背景图片
- java 三维数组 魔方_三维数组的横向/纵向输出
- 修改DarkNet的weights文件以编辑模型版本号
- 下一代 TGW 从13Mpps到50Mpps性能优化之旅
- 2021年中国家具行业现状及未来趋势分析:线上渠道将成为新增长点[图]
热门文章
- 快速使用GitBook以及二级标题的设置
- 打印show attend and tell的编码器网络结构
- Python【算法中心 02】Web框架Django管理页面使用(管理员账号创建+API使用+应用添加)GreenPlum数据库引擎及API测试
- SpringMVC-快速入门
- spring配置数据源(交给spring容器完成)
- Java中有关clone方法的用法
- 牛客题霸 SQL3 查找当前薪水详情以及部门编号dept_no
- C++——《算法分析与设计》实验报告——贪心算法与回溯法
- 跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
- java水印图片,Java添加水印+图片水印+文字水印