• web前端性能优化问题


    常用的几大优化解决:

    • 页面内容的优化
    1. 减少http请求   

        途径:

          1>启用http/2--越来越多的浏览器都开始支持 HTTP/2。HTTP/2 为同一服务器的并发连接问题带来了很多好处。换句话说,如果有很多小型资源需要加载(如果你                 打包过的话就没有必要了),在延迟和性能方面 HTTP/2 秒杀 HTTP/1。

          2>设计层面保持简洁,减少资源请求。

          3>根据需求设置http缓存--少变的可以在header中延长过期头;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证

          4>资源合并压缩--外部的文件进行压缩处理(js,css,image),减少多次请求。压缩合并工具grunt,gulp,webpack等

          5>css Sprites  精灵图  多个图片在一个整体的图片上, 减少图片的请求

          2. 减少DOM的数量

        DOM的操作费时费力,每次的访问及修改都会导致页面的reflow和repaint需要耗费大量的资源,如使用循环的时候,结束后将变量保存到局部,在进行访问。

       3. 避免404

       4.减少DNS查询的数量

        DNS解析优化(DNS缓存、减少DNS查找、keep-alive、适当的主机域名)

       5. 避免不必要的http跳转

        根据服务器需求http路由请求时‘/’是否要带

    • JavaScript&&css的优化
    1. 样式表置顶--脚本表置底
    2. 外部引入文件
    3. 避免css表达式
    4. link替代@import   因为@import相当于将css放到底部
    5. 避免Fliters
    6. 避免重复代码
    7. Javascript代码优化 减少空格和注释
    • 图片
    1. 压缩图片使用Sprite技术 -- 水平排列  ,颜色接近的排在一起 ,
    2. favcion.ico 浏览器会去读取这个图片 --确保存在,小 <1k  ,过期时间设置较长
    • cookie
    1. 减少cookie的大小和控制cookie污染 

        去除没有必要的cookie  存在请求头中

        cookie<=4k 尽量减小cookie的使用

        合理使用cookie的生命周期

       2. 页面内容是用无域名cookie

        静态页面资源不需要cookie,可以使用domain单独存放这些静态文件,有些proxy拒绝缓存带有cookie的内容,如果能将这些静态资源cookie去除,那就可以得到这些       proxy的缓存支持。

    • 标签的优化

       1.<title>标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<title>标题中不要设置相同的内容。

          2.<meta keywords>标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。

              3.<meta description>标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。

              4.<body>中的标签:尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6 是用于标题类的,           <nav>标签是用来设置页面主导航的等。

          5.<a>标签:页内链接,要加 “title” 属性加以说明,让访客和 “蜘蛛” 知道。而外部链接,链接到其他网站的,则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬,因             为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。

    • 移动客户端

        保持单个内容小于25kb

    参考文章:

        http://blog.csdn.net/grandpang/article/details/51329289

        http://www.cnblogs.com/EnSnail/p/5671345.html

        http://www.qdfuns.com/notes/18892/168da392c447a172d3dd0d8e1754ca48.html

        http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

        http://www.cnblogs.com/ricoliu/p/6090290.html

  • 相关阅读:
    ActiveMQ简单的HelloWorld实例
    ActiveMQ简单介绍以及安装
    solr6.3与MySQL结合使用的简明教程(三)
    SolrException: undefined field text错误如何解决?
    solr6.3与MySQL结合使用的简明教程(二)
    solr undefined field text 异常
    solr6.3与MySQL结合使用的简明教程一
    Java中日期的转化
    JSON转化为JAVABEAN集合
    【js】判断简写
  • 原文地址:https://www.cnblogs.com/MaggieGao/p/6995145.html
Copyright © 2020-2023  润新知