zoukankan      html  css  js  c++  java
  • 性能优化之浏览器篇

    为什么浏览器端更重要?

    性能优化在浏览器端 总结19条: 

    规则一:把css放在head标签中加载

    能让页面更早的开始渲染,避免把css放在页面尾部出现的闪屏

    最好能包含关键渲染路径的样式:首屏

    规则二:把js放在body末尾加载

    因为js会阻塞html解析和css渲染

    规则三:不要css表达式

    看似强大,实际性能开销很大,可能导致页面卡顿

    规则四:使用外链方式引用css和js

    有效减少html的体积

    可合理利用浏览器缓存

    规则五:压缩js和css

    生产环境删除不必要的注释、空白

    js中变量名压缩,混淆压缩,css属性合并,选择符的合并等

    规则六:不要重复加载js

    在ie中还是会多个请求,不能发挥缓存优势

    意味着更长的js执行时间

    规则七:让ajax请求可缓存

    GZIP、内容压缩都可使用

    规则八:用get方式发起ajax请求

    get方式可以缓存

    如果是获取信息,get更语义化

    如果是提交信息,post更语义化,post方式是不会被缓存的

    规则9:组件延迟加载(重点)——延迟加载和按需加载

    保障关键页面资源优先加载:因为并发数限制

    延迟加载的典型手段:lazyload

    规则10:减少dom节点数

    天猫:更多节点数以为浏览器布局、渲染时计算量更大

    规则11:避免使用iframe

    会阻塞父文档的onload

    即使是空白也比较耗时

    规则12:减少cookie体积

    因为cookie每次请求都会全部带上

    规则13:使用无cookie域名加载静态资源

    在服务器端做了讲解

    规则14:减少js的dom访问

    对于查找的元素,可以缓存在变量中

    节点增加是合理利用documentFragment

    不要用js去频繁修改样式

    规则15:使用更智能的事件监听机制

    基于事件冒泡的委托机制,有效减少绑定的数量

    规则16:常见的图片优化手段

    相比代码,图片体积很大

    PNGCrush、JPEGTRAN PNGQUANT

    渐进式编码:JPG

    规则17:不要在html里面缩放图片

    徒增渲染开销,提供适当尺寸即可

    规则18:不要把图片scr置空

    ie、chrome、firefox会发起额外的主文档请求

    规则19:任何资源尽量保持的25k以内

    iphone、部分浏览器无法缓存25k以上的资源 

    性能优化之服务篇

  • 相关阅读:
    【NIO】NIO之浅谈内存映射文件原理与DirectMemory
    【搜索引擎】全文索引数据结构和算法
    【多线程】并发与并行
    【缓存】缓存穿透、缓存雪崩、key重建方案
    布隆过滤器
    多层路由器通信
    【路由】设置二级路由器
    【硬件】集线器,交换机,路由器
    JZOJ100048 【NOIP2017提高A组模拟7.14】紧急撤离
    JZOJ100045 【NOIP2017提高A组模拟7.13】好数
  • 原文地址:https://www.cnblogs.com/Abner5/p/6093368.html
Copyright © 2011-2022 走看看