前端性能优化（前端性能优化工具）
myzbx 2025-02-03 14:11 13 浏览
今天网站上线自己搜集总结了一些前端的优化1.精灵图
多个图片拼成一个图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置（毕竟流量 都是钱啊）
2.css选择器优化
3. js改变样式直接操作类名
4. js直接操作dom节点
5.正则匹配选择器6.js获取元素优化
7.内存溢出
一般在递归运行时，会产生内存溢出，造成在运行递归时性能大幅度下降，在运行结束后内存
会被系统回收，所以在运行递归时需要用对象将值保存，在每次递归运算时检测，如果存在则直接返
回，不存在则添加，这样就可以解决递归的很大性能。
8.对Ajax用GET请求
POST请求是通过先发送HTTP请求头，再发送数据来实现的，GET而是没有请求头的，但是需要注 意：GET大小限制约4K，POST则没有限制；但POST的安全性要比GET的安全性高。
9.延迟加载图片
在页面发起请求时，请求量过大，可以使图片进行懒加载，当页面滚到到图片的位置时，再 进行加载图片。
10 减少http请求次数
使用图片地图
使用CSS Sprites
合并JS和CSS文件
避免内部无效的链接
合理设置 HTTP缓存 恰当的缓存设置可以大大的减少 HTTP请求
浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢
11 减少DNS查询次数
DNS 是域名系统 (Domain Name System) 的缩写 DNS查询也消耗响应时间
通过使用Keep-Alive和较少的域名来减少DNS查找
12 缓存Ajax Ajax可以帮助我们异步的下载网页内容.我们还是要注意尽量应用以下规则提高ajax的响应速度
添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
压缩回复内容
减少dns查询
精简javascript
避免跳转
配置Etags
确保Ajax请求遵守性能知道,必要时候应具备长久的expires头
13 减少DOM元素数量
DOM操作应该是脚本中最耗性能的一类操作
通过在浏览器中的一条简单命令就可以算出使用了多少标签， document.getElementsByTagName('*').length
14 Gzip压缩传输文件
15 减少Cookie大小
16 移动客户端
保持单个内容小于25KB
这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精
简文件工具要用上了。
17 使用CDN缓存
相关推荐
- MORROR ART:毫无音质可言，真的只是好看而已...
-
今天早上我在微博上发了一条短视频，内容是某款网红音箱正在放声歌唱——这玩意就是此前曾经在网上挺火的所谓“悬浮歌词音箱”。这款产品是我同事收到的礼品，但她嫌在家里放着没用，所以拿到公司里做我们的拍摄道具...
- 「JS优化篇」你的 if - else 代码肯定没我写的好
-
作者：小生方勤转发链接：https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA前言最近部门在对以往的代码做一些优化，我在代码中看到一连串的if(){}el...
- 细聊微内核架构在前端的应用「干货」
-
作者：semlinker转发链接：https://mp.weixin.qq.com/s/ywc98dS4TVB4t3L2tIyk8g一、微内核架构简介1.1微内核的概念微内核架构（Microke...
- ThreeJS 入门教程(一) 是选择桌面的固守还是云原生?
-
导读：最近我购置了一台新的电脑，硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制，都使得在未来3-5年内，这个电脑会被淘汰。但是，基于云APP的使用，老的电脑是足够了，而且，我们也...
- 推荐三款正则可视化工具「JS篇」（正则在线调试）
-
作者：代码先森转发链接：https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw前言最近老王对可视化非常着迷。例如，算法可视化、正则可视化、Vue数据劫持可...
- Javascript 多线程编程的前世今生
-
作者：jolamjiang腾讯技术工程转发链接：https://mp.weixin.qq.com/s/87C9GAFb0Y_i5iPbIL5Hzg为什么要多线程编程大家看到文章的标题《Javasc...
- Pug 3.0.0正式发布，不再支持 Node.js 6/8
-
作者：李俊辰前端之巅转发链接：https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ前言近日，Pug3.0.0正式发布，Pug原名Jade，是由...
- 36个工作中常用的JavaScript函数片段「值得收藏」
-
作者：Eno_Yao转发链接：https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的...
- 深入JavaScript教你内存泄漏如何防范
-
作者：大道至简转发链接：https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA前言一般情况下，忽视内存管理不会对传统的网页产生显著的后果。这是因为，用户刷新...
- 由浅入深，66条JavaScript面试知识点(七)
-
作者：JakeZhang转发链接：https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深，66条JavaScript面试知识点（一）由浅入深，66...
- 用STM32做了个电子秤，成本仅两位数，精度高!解析一下原理
-
俗话说得好！人在胖，秤在看！所以，我想DIY一个精度高的体重秤！并希望它不只能称体重：还能像这样称克重（可设置KG，G，最低可称100克）……这样一来，做甜品的时候，还能拿来应应急。保姆级教程，记录在...
- 前端开发需要了解常用7种JavaScript设计模式
-
作者|Deven译者|王强策划|小智转发链接：https://mp.weixin.qq.com/s/Lw4D7bfUSw_kPoJMD6W8gg前言JavaScript中的设计模式指的是...
- 毛姆的一个手法|王培军（毛姆作品简介）
-
鲁本斯画《海伦娜·芙尔曼肖像》钱锺书在《宋诗选注》文同小传中说：“具体的把当前风物比拟为某种画法或某某大画家的名作”，是“从文同正式起头”。如钱先生所举的：“峰峦李成似，涧谷范宽能”，“独坐水轩人不到...
- 欣赏 | 朝戈:我渴望找到直达心灵的永恒
-
朋友，通过艺术让我们共同感知世界的永恒与不朽。——朝戈橙色的人物117X71cm布面油画2003包与陈185cm×103cm2007年白色80cm×40cm2009年光布面油画-Light-Oilo...
- Web页面如此耗电!到了某种程度，会是大损失
-
现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说，电池寿命都很重要。在这篇文章里，我们将讨论影响电池寿命的因素，以及作为一个web开发者，我们如何让网页耗电更少，以便用户有更多时间来关注我们的...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)