zoukankan      html  css  js  c++  java
  • 前端页面优化

    页面级优化

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

        

        

        

  • 相关阅读:
    当前毫秒时间戳
    生成随机指定长度的字符串
    symfony框架学习
    Git 学习一
    jmeter逻辑控制器
    jmeter执行顺序及作用域规则
    jmeter常用测试元件
    windows环境下jmeter生成测试报告
    jmeter参数化
    对网页进行截图(selenium)
  • 原文地址:https://www.cnblogs.com/jlliu/p/5319500.html
Copyright © 2011-2022 走看看