zoukankan      html  css  js  c++  java
  • Web前端优化方法

    一、尽可能的减少http请求数,提高访问速度。这些请求包括html文件、CSS文件、JS文件和图片文件等外部资源。
    1、可以将多个CSS或JS文件合并、压缩
      a.合并引入。如:<link  type="text/css"   rel="stylesheet"  href="css/a.css,css/b.css"> //淘宝的服务器技术,目前只有tengine可以支持这种模式。
        (1)DOS命令:copy a.css+b.css ab.css /b,就可以得到合并的“ab.css”文件。
          (2)可以采用雅虎的工具包YUI Compressor压缩(http://tool.oschina.net/jscompress)。该工具可以去掉CSS文件、JS文件和html文件中的一些不必要的空格和注释,减少文件的字节数;还可以合并多个js文件。

      b.可以用minify工具合并。

    2、可以将多个图片文件整合到一个图片文件,然后用CSS读取需要的某一部分图像。

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。

    如何使用CSS Sprites技术进行图片合并
    如何使用CSS Sprites技术进行图片合并

    实现方法:首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px;

    其实影响网站访问速度最主要的是我们的网络环境,我们大部分时间花在了网络阻塞和等待响应上,而真正用在接收数据上的时间还真不多。但是我们做前端优化的,你不能去要求用户的网络环境,你要接受用户网络状况差的事实,在其他方面进行优化。

    PS:
    Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些 不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service 非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件

  • 相关阅读:
    C#解析json的几种方式
    记一次linux服务部署
    记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)
    Could not commit JPA transaction RollbackException: Transaction marked as rollbackOnly
    elasticsearch服务安装采坑
    spring boot ${}占位符不起作用
    js 事件冒泡、捕获;call()、apply()
    angular $digest already in progress
    idea其他人把jar更新之后更新不到
    spring接入swagger后单元测试报错
  • 原文地址:https://www.cnblogs.com/beast-king/p/5282068.html
Copyright © 2011-2022 走看看