美文网首页
前端优化总结

前端优化总结

作者: _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是单线程的,后端语言大多数是多线程的 )

    相关文章

      网友评论

          本文标题:前端优化总结

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