• 性能优化篇


    性能优化在浏览器端 总结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以上的资源 
  • 相关阅读:
    操作系统简介
    计算机硬件知识整理
    使用 Docker LNMP 部署 PHP 运行环境
    Chart.js 动态图表的使用
    手把手教你使用 GitBook
    手把手教你发布自己的 Composer 包
    PHP 基础篇
    macOS 上安装 PECL
    Yii2 教程
    PHP 基础篇
  • 原文地址:https://www.cnblogs.com/weiyecrossover/p/6158812.html
Copyright © 2020-2023  润新知