zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Max History CodeForces
    Buy a Ticket CodeForces
    AC日记——字符串的展开 openjudge 1.7 35
    AC日记——回文子串 openjudge 1.7 34
    AC日记——判断字符串是否为回文 openjudge 1.7 33
    AC日记——行程长度编码 openjudge 1.7 32
    AC日记——字符串P型编码 openjudge 1.7 31
    AC日记——字符环 openjudge 1.7 30
    AC日记——ISBN号码 openjudge 1.7 29
    AC日记——单词倒排 1.7 28
  • 原文地址:https://www.cnblogs.com/MaggieGao/p/6995145.html
Copyright © 2011-2022 走看看