zoukankan      html  css  js  c++  java
  • 设计一套方案,解决浏览器的性能问题

     对于一个前端老司机,浏览器性能问题,浏览器兼容问题,浏览器适配问题随着经验,知识点的拓展逐渐增加,积累下来吧。工作时写成一个方案,放在禅道里面给大家参考。

    1.http请求

    2.网页复杂程度

    主要原因是http请求数以及网站的复杂程度,我们可以从下面几个方面注意去提高网站的性能

    (1)资源加载
    
    CSS顶部, JS底部
    
    CSS JS文件压缩
    
    尽量使用图片使用精灵图,字体图标
    
    图片加载可通过懒加载的方式。
    
    总之就是减少资源体积减少资源请求次数。
    
    (2)代码性能
    
    Css:
    
    使用CSS缩写,减少代码量;
    
    减少查询层级:如.header .logo要好过.header .top .logo;
    
    减少查询范围:如.header>li要好过.header li;
    
    避免TAG标签与CLASS或ID并存:如a.top、button#submit;
    
    删除重复的CSS;
    
    ….
    
    Html:
    
    减少DOM节点:加速页面渲染;
    
    正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成<div></div>的过程;
    
    减少页面重绘。比如 给图片加上正确的宽高值:这可以减少页面重绘,
    
    ……
    
    Js:
    
    尽量少用全局变量;
    
    使用事件代理绑定事件,如将事件绑定在body上进行代理;
    
    避免频繁操作DOM节点;
    
    减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;

     

  • 相关阅读:
    [FJOI 2016] 神秘数
    [SHOI 2017] 寿司餐厅
    [HAOI 2012] Road
    [HAOI 2012] 容易题
    [TJOI 2018] XOR
    [NOI 2011] 阿狸的打字机
    [ZJOI 2010] 排列计数
    [TJOI2016 & HEOI2016] 字符串
    [HNOI 2011] 数学作业
    【NTT】loj#6261. 一个人的高三楼
  • 原文地址:https://www.cnblogs.com/DZzzz/p/8920001.html
Copyright © 2011-2022 走看看