美文网首页
前端性能优化

前端性能优化

作者: qhaobaba | 来源:发表于2017-06-29 22:09 被阅读0次

    前端性能优化的方法?
    content方面
    1,减少HTTP请求:合并文件、CSS精灵、inline Image
    2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询
    3,避免重定向:多余的中间访问
    4,使Ajax可缓存
    5,非必须组件延迟加载
    6,未来所需组件预加载
    7,减少DOM元素数量
    8,将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量
    9,减少iframe数量
    10,不要404

    Server方面
    1,使用CDN
    2,添加Expires或者Cache-Control响应头
    3,对组件使用Gzip压缩
    4,配置ETag
    5,Flush Buffer Early
    6,Ajax使用GET进行请求
    7,避免空src的img标签

    Cookie方面
    1,减小cookie大小
    2,引入资源的域名不要包含cookie

    css方面
    1,将样式表放到页面顶部
    2,不使用CSS表达式
    3,使用不使用@import
    4,不使用IE的Filter

    Javascript方面
    1,将脚本放到页面底部
    2,将javascript和css从外部引入
    3,压缩javascript和css
    4,删除不需要的脚本
    5,减少DOM访问
    6,合理设计事件监听器

    图片方面
    1,优化图片:根据实际颜色需要选择色深、压缩
    2,优化css精灵
    3,不要在HTML中拉伸图片
    4,保证favicon.ico小并且可缓存

    移动方面
    1,保证组件小于25k
    2,Pack Components into a Multipart Document

    相关文章

      网友评论

          本文标题:前端性能优化

          本文链接:https://www.haomeiwen.com/subject/utkycxtx.html