• 性能优化之浏览器篇


    为什么浏览器端更重要?

    性能优化在浏览器端 总结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以上的资源 

    性能优化之服务篇

  • 相关阅读:
    es的多种term查询
    es的批量导入
    可重入锁
    常见的字段类型
    es中的分词
    搜索的简单使用
    application.properties中的list配置
    mysql中的concat的几个函数使用
    文档的增删改查
    Mxnet学习笔记(3)--自定义Op
  • 原文地址:https://www.cnblogs.com/Abner5/p/6093368.html
Copyright © 2020-2023  润新知