• 前端页面优化


    页面级优化

    一.减少HTTP请求

    (1)合理设置HTTP缓存:变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头; 变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。

        在网站根目录 .htaccess 中加入以下代码

      ExpiresActive on

      ExpiresDefault access plus 1 year

      这段代码的意思是对 jpg|gif|png|css|js 发送 header 缓存头,进行一年的缓存、在浏览器不使用 ctrl+F5 强制刷新时,会一直缓存到时间时间结束,唯一遗憾的是如果你更改了js或者css文件必须把以前的路径或者文件名更改,可以这样 base.js?ver=(x) 这种方式下次浏览器就会自动读取并缓存。

    (2)资源合并与压缩:如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。另外,CSSJavascriptImage都可以用相应的工具进行压缩,压缩后往往能省下不少空间。

    (3)CSS sprites

    (4) Lazy Load Image:这条策略实际上并不一定能减少HTTP请求数,但是却能在某些条件下或者页面刚加载时减少HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了。有啊首页曾经的做法是在加载的时候把第一屏之后的图片地址缓存在Textarea标签中,待用户往下滚屏的时候才惰性加载。

     

    二.将外部脚本置底

    三. 异步执行inline脚本

    由于浏览器在页面处理方面是单线程的,当inline脚本在页面渲染之前执行时,页面的渲染工作则会被推迟。简而言之,inline脚本在执行的时候,页面处于空白状态。鉴于以上两点原因,建议将执行时间较长的inline脚本异步执行,异步的方式有很多种,例如使用script元素的defer属性(存在兼容性问题和其他一些问题,例如不能使用document.write)、使用setTimeout,此外,在HTML5中引入了Web Workers的机制,恰恰可以解决此类问题

    四. Lazy Load Javascript

     

    五. 减少不必要的HTTP跳转

        

        

        

  • 相关阅读:
    单例模式
    iOS宏定义
    WKWebView基本使用
    文件操作(NSFileManager)
    iOS 字典和NSData之间转换
    iOS 身份证,邮箱,手机号验证
    iOS自定义数字键盘
    iOS指纹识别
    JavaScript表单
    JavaScript数组操作方法集合(2)
  • 原文地址:https://www.cnblogs.com/jlliu/p/5319500.html
Copyright © 2020-2023  润新知