• 前端页面优化


    页面级优化

    一.减少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跳转

        

        

        

  • 相关阅读:
    Power Apps 创建响应式布局
    SharePoint Online 软件边界限制
    Power Apps 中人员选择器的使用
    Power Apps 中修改 SharePoint Online 数据
    Power Apps 中调用 Automate 工作流
    如何查看你的Office 365 账号的订阅
    Microsoft Teams 中嵌入SharePoint Online 页面
    SharePoint Online 触发Outlook邮件内审批
    Linux查看实时网卡流量的几种方式
    Linux性能优化和监控系列(三)——分析Memory使用状况
  • 原文地址:https://www.cnblogs.com/jlliu/p/5319500.html
Copyright © 2020-2023  润新知