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以上的资源 
  • 相关阅读:
    关于Js异常
    gitea windows 安装
    spring boot 错误页面配置
    mysql 常用用函数
    nginx 安装 tomcat pfx 格式证书
    git pull 报错
    maven 打 jar 包,包含 xml, 包含 额外 jar
    git clone 分支代码
    git 切换远程分支
    mycat 在 mysql 8.0 下 无法连接 bug
  • 原文地址:https://www.cnblogs.com/weiyecrossover/p/6158812.html
Copyright © 2011-2022 走看看