前端对浏览器性能优化
1、 减少http请求,合理设置 HTTP缓存
http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,减少http请求的数目可有效提高访问性能。
减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。
① 简单的图片效果可以使用html+css、canvas或者svg来替换。
② 合并CSS、合并javascript、合并图片(webPack等包管理工具)
③ 图片格式,大小选择,图片优化
2、 应用浏览器缓存:
① http缓存(文件级缓存)
② cookie: 储存在用户本地终端上的数据(通常经过加密)有长度和个数限制,浏览器端也可以通过document.cookie来获取cookie,并通过js浏览器端也可以方便地读取/设置cookie的值。
③ localStorage: localStorage是html5的一种新的本地缓存方案,目前用的比较多,一般用来存储ajax返回的数据,加快下次页面打开时的渲染速度。localstorage大小有限制,不适合存放过多的数据,如果数据存放超过最大限制会报错,并移除最先保存的数据。localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据
localStorage核心API:
localStorage.setItem(key, value) //设置记录
localStorage.getItem(key) //获取记录
localStorage.removeItem(key) //删除该域名下单条记录
localStorage.clear() //删除该域名下所有记录
注:localStorage对象的属性值只能是字符串,json对象可以根据当然也可以借助JSON类,将对象转换成字符串保存,然后在取出来的时候将json字符串转换成真正可用的json对象格式。
④ sessionstorage:
sessionStorage和localstorage类似,但是浏览器关闭则会全部删除,api和localstorage相同,实际项目中使用较少。
⑤ application cache
application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。
3、启用压缩
在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。文本文件的压缩效率可达到80%以上,因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。
采用网上在线压缩工具(jQuery MiniUI)自己压缩或者通过webpack、gulp等打包工具进行压缩处理。
4、(使用精灵图)CSS Sprites
5、(图片懒加载)LazyLoad Images
对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。
①jqueryLazyload方式
②echo.js方式
6、CSS放在页面最上部,javascript放在页面最下面
如有帮助到您,我将倍感荣幸
前端对浏览器性能优化相关推荐
- 【chrome devtools】前端性能分析之chrome devtools的使用 前端项目内存性能优化的建议 前端浏览器崩溃卡死 前端性能分析实战
最近有个项目,静置一段时间,chrome内存一直上涨.就像是这样: 内存会慢慢悄悄的往上涨,最终可以到达2000多M,直至浏览器崩溃卡死.很明显,这应该是内存泄漏了. 但是只知道内存泄漏,并不知道究竟 ...
- web前端分享:性能优化之文档碎片处理
有不少同学在前端开发面试的时候会被问到性能优化的相关问题,做好优化是一件非常重要的事情,今天小千就来给大家介绍一下文档碎片的处理方式. 性能优化之文档碎片 一般情况下,在操作DOM结构的时候,经常会说 ...
- 前端工程与性能优化:静态资源版本更新与缓存
2019独角兽企业重金招聘Python工程师标准>>> 每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎14条性能优化原则,还有两本很经典的 ...
- 全方位分析web前端如何进行性能优化
前言: 最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教. 1.整体资源 (1)js.css源码压缩 (2)css文件 ...
- 小猿圈web前端之网站性能优化方案
现在前端不仅要能做出一个网站页面,还要把这个页面做的炫酷,那需要很大程度的优化,那么怎么优化才更好呢?小猿圈总结了一下自己优化的方案,感兴趣的朋友可以看一下. 一般网站优化都是优化后台,如接口的响应时 ...
- 网站前端和后台性能优化的34条经验和方法
1 减少HTTP请求数量 (Minimize HTTP Requests) tag:content 80%的用户响应时间被花费在前端,而这其中的绝大多数时间是用于下载页面中的图片.样式表.脚本以及Fl ...
- 前端面试—网站性能优化
我们常将网站性能优化措施归结为四大方面: 1.css优化: 2.js优化: 3.合理利用缓存,提升网络传输速率: 4.减小请求资源体积: 5.其它 1 css优化 1.1使用雪碧图,减少http请求, ...
- 鸟瞰前端 , 再论性能优化
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 导语 : 从事前端有6年 的时间了,从最开始的美工到重构再到偏向js逻辑开发的前端开发,一直在前端这个行业里面摸索和学习,我现在将自己这些 ...
- 前端Vue 项目性能优化
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
最新文章
- 沫沫金:Java快速合并两个数组【绝技】
- 如果MySQL的自增 ID 用完了,怎么办?
- 3.2.5 四则运算的例子
- bzoj2442codevs4654 单调队列优化dp
- 贝塞尔曲线理解与应用
- C语言中局部变量和全局变量 变量的存储类别
- eclipse 最全快捷键(网络收集)
- “37岁,年薪50万,一夜被裁”:伪上班,毁掉了多少中国年轻人
- 武大高级软件工程2017评分汇总
- 《孽海记·思凡》唱段·风吹荷叶煞
- 万豪国际集团与蚂蚁集团达成合作;快手科技一季度收入同比增长23.8%至211亿元 | 美通企业日报...
- HoloLens2开发
- 手机控件查看工具uiautomatorviewer中一些方法
- 如何将时间序列分解为周期序列和趋势序列的和?
- js--定时器的使用
- java使用465端口发送邮件
- 【华为OD机试真题 C++】数字涂色 【2022 Q4 | 100分】
- Pulmonary -- Detection1
- 鸿蒙内测报名多久,麒麟985、990处理器手机准备开始内测鸿蒙,开放报名
- windows12系统及16系统安装.NET Framework 3.5(sxs)文件包