美文网首页
前端优化总结

前端优化总结

作者: _Struggle_ | 来源:发表于2021-11-09 10:49 被阅读0次

html层级优化
减少HTML的层级嵌套
减少空标签、无用标签的滥用
减少标签中style的使用,增加复用性,维护起来更加高效、简便。

css层级优化
样式继承与复用
避免同一类名多次渲染
少用高优先级选择器,慎用!Important
伪类选择器的妙用
不要使用层级过深的css选择器
避免float滥用
css雪碧图
可以使用media query媒体查询,减少使用window.resize。window.resize不断重绘和重排,非常消耗性能,有时会造成死循环效果,导致页面卡死,崩溃

javascript层级优化
用好定时器:大多数定时器影响性能因为使用不恰当(一些动画实现使浏览器过于频繁地重排、重绘),不用的内容及时清除,避免重复生成clearInterval
事件绑定:
多利用事件委托代理:document.querySelector(“ul”).addEventListener(“click”,function(e){

})
避免重复的事件监听
事件冒泡机制
事件冒泡是浏览器默认的行为,就是说事件会从被触发的那一层的具体元素开始,逐级往父级元素传播,直到document或window。冒泡所需的时间更短

资源加载优化
http缓存

加载模式
懒加载:按需加载
分页加载
css预处理及压缩
javascript代码压缩处理
Base64的妙用:小图不能合并到雪碧图的,使用base64
图片压缩
屏蔽开发时的调试,日志代码

合理利用sessionStorage和localStorage

浏览器请求并发性限制:常见的限制是6条
减少和后端交互请求数
前端负责展示,后端负责数据处理。(js是单线程的,后端语言大多数是多线程的 )

相关文章

  • 前端知识个人总结链接

    各类全总结 常用全总结 链接 全栈练习 链接 前端面试知识总结 链接 工作其它知识学习 链接 前端优化 前端优化 ...

  • JavaScript

    前端 优化策略-自查表 前端性能优化常用总结鸟瞰前端 , 再论性能优化 跨域,你需要知道的全在这里内存分析与内存泄...

  • 从开始慢慢总结优化

    我们在面试中前端优化是经常被问到的,所以我们应该从开始学习的时候就总结一些前端的优化方法:什么是前端优化呢?我们前...

  • 前端优化中的DOM优化

    我们在面试中前端优化是经常被问到的,所以我们应该从开始学习的时候就总结一些前端的优化方法:什么是前端优化呢?我们前...

  • 关于前端性能优化

    前端性能优化: 前端性能优化是个经久不息的话题,也是面试常客,今天简单总结下,让大家有初步的了解 1.代码级的优化...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端优化总结

    前端优化总结 优化用户体验 优化响应时间 静态资源 数据接口 渲染/应用初始化 日志管理 客户端HTTP协议缓存的...

  • 前端优化总结

    前端性能优化一直都是一个老生常谈的问题,面试中也经常被问到,今天就结合雅虎前端团队的35条前端优化原则来总结下我在...

  • 前端优化总结

    以前那些优化技巧就不说了,自己找度娘或谷哥一大把(搜索前端优化)。 推荐几篇: CSS3与页面布局学习总结(八)—...

网友评论

      本文标题:前端优化总结

      本文链接:https://www.haomeiwen.com/subject/exegaltx.html