浏览器性能优化（19种）

主要是三大点：

①减少对HTTP的请求次数和大小

②代码的优化

③dns及HTTP通信方式

举例说明：

1.js中减少闭包的使用（原因：闭包会产生不是放的栈内存）
a:循环给元素做事件绑定的时候，尽可能的把后期需要的信息（列如索引）
储存到元素的自定义属性上，而不是创建闭包储存
b.可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个发发都创建闭包（例如单例模式）
c.尽可能的手动释放不被站用的内存

2.尽量减少css和js文件（把需要引入的css合并成一个，js也是合并成一个），原理是在减少http请求次数，尽可能的把合并后的代码进行压缩，
减少http请求资源的大小
a:webpack这种构建工具
b：在移动开发（或者要求高性能的pc开发），如果js和css不多的，我们可以写内嵌式
3.尽量用矢量图或者svg图标代替传统的png等格式的图片
4.减少对DOM的操作（主要是减少DOM的重绘和回流（重排））
a:关于重排的分离读写
b:使用文档碎片或支付窜拼接做支付窜绑定
5.在js中避免“嵌套循环”（这种会额外郑家很多次循环次数）和“死循环”
6.采用图片的懒加载（延迟加载），目的是减少页面第一次加载过程中http的请求次数
7.利用浏览器和服务器的缓存技术（304缓存），把一些不经常更新的静态资源做缓存处理（css、js、静态图片等都可以做缓存）原理也是为了减少http请求大小
8.尽可能使用事件委托（事件代理）来处理事件绑定的操作，减少DOM的频繁操作，其中包括每一个DOM元素做事件绑定
9.减少使用css表达式（expression）
10.尽可能减少对标签选择器的使用（css选择器的解析是从右往左解析）
11.css雪碧图技术（css sprite/css 图片精灵）把所有较小的图片汇总到一张大图上，用定位的方式展示到对应小图标即可
12.减少cookie的使用（主要是减少本地cookie存储内容大小）
13.页面中的数据获取采用异步编程和延迟分批加载
14.页面中出现视频音频标签，我们不让页面加载的时候就去加载这些资源（要不然加载会变慢）（只需要设置preload="none"即可）等页面加载完成，音频播放的时候我们再加载资源
15.在客户端和服务端交互的时候，对于多项数据我们尽可能基于json格式来进行传送（json格式的数据处理方便，资源偏小）相对于xml格式的传输才会有这个优势
16.尽可能实现js的封装（低耦合高内聚），见晒页面中的冗余代码（减少HTTP请求资源的大小）
17.在css导入的时候尽量减少使用@import导入式，因为@import是同步操作，而link是异步操作
18.使用window.requestAnimationFrame(js中的帧动画)代替传统的定时器动画
19.减少递归的使用，避免死递归，避免由于递归函数到制的栈内存嵌套（建议使用尾递归）

浏览器性能优化（19种）相关推荐

前端对浏览器性能优化
1. 减少http请求,合理设置 HTTP缓存 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路.进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理.这些通信 ...
浏览器性能优化（2）React 虚拟 dom与diff算法
随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...
tomcat限速_解析Tomcat性能优化N种方法
Tomcat在各位JavaWeb从业者常常就是默认的开发环境,但是Tomcat的默认配置作为生产环境,尤其是内存和线程的配置,默认都很低,容易成为性能瓶颈. 幸好Tomcat还有很多的提升空间.下文介 ...
微软中国发布“IE8浏览器性能解密”，为金山网盾辟谣
天,微软中国安全技术团队摘取解释了<Internet Explorer 8 Performance Whitepaper><IE8性能白皮书>的部分内容. 微软安全团队为了避免 ...
2018 前端性能优化清单（转载）
2018 前端性能优化清单转载自 https://juejin.im/post/5a966bd16fb9a0635172a50a 前言:这篇文章我在掘金翻译计划中跟着一起翻译的文章(感谢掘金翻译), ...
IE8 浏览器性能解密
本文摘取并转译自<Internet Explorer 8 Performance Whitepaper> (<Internet Explorer 8 性能调查白皮书>). 浏览 ...
2018 前端性能优化清单
下面是前端性能问题的概述,您可能需要考虑以确保您的响应时间是快速和平滑的. 2018 前端性能优化清单 - 第 1 部分 2018 前端性能优化清单 - 第 2 部分 2018 前端性能优化清单 - ...
MySQL性能优化要点解析
以下就是跟大家分享的19个MySQL性能优化主要要点,一起学习学习. 1.为查询优化你的查询大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理 ...
原生canvas游戏性能优化
微信小游戏在 17 年末推出,再次带火了 H5 小游戏的开发,本公众号准备一些 H5 游戏开发的文章,奉献给读者,想做小游戏的可以练练手,没时间做的可以学习下游戏常用的一些方法和概念. 本文来自 li ...

浏览器性能优化（19种）

主要是三大点：

浏览器性能优化（19种）相关推荐

最新文章

热门文章