zoukankan      html  css  js  c++  java
  • 前端能做的一些提升网页速度的方法

      关于网站为什么要提速,百度一搜一大把,这里我就不细说了,下面是本人积累的一些干货,希望能够对有需要的小伙伴有所帮助

     

      1:对JavaScript和CSS文件体积进行压缩(下面为在线压缩网站)

      https://www.jb51.net/tools/cssZip.htm

         http://tool.oschina.net/jscompress

     

      2:使用CSS Sprites(又被称为雪碧图、CSS 精灵、图像精灵) 

       这是一种将小图标和背景图像合并到一张图片上,然后利用 CSS 的背景定位来显示其中每一部分的技术,从而减少http请求

       下面推荐一款好用的window的雪碧图软件,CssGaga

      官网: http://dl.pconline.com.cn/download/398688.html

      

     

      3:对图片进行压缩

       下面这个网站是一个在线压缩图片的网站,经本人测试,在不改变图片本身分辨率的情况下,大部分图片体积有较大压缩

     (支持jpg,png) 总的来说是一个很好的在线压缩网站.(推荐)

      https://tinypng.com/

     

      4:引用在线CDN加速

      http://cdn.code.baidu.com/ 百度静态资源库

      https://cdnjs.com/

     

      5:不把js文件放到<head>里面,放在底部

      把那些不需要一开始就加载的JS文件全部放到页面底部,(一般是放在结束的body标签后面)

      这样就可以最后加载,即使因为什么原因导致JS文件无法加载,

      这个时候页面也已经加载完毕,不会被没有加载完的JS文件阻断,导致页面空白

     

      6:css文件要放在<head></head>头部,不要放在底部

      这样更便于浏览器解析网页,如果放在底部,加载页面时间一旦延迟,页面就会整个空白,也不利于用户体验

     

      7:使用懒加载,又叫延迟加载。即,当滚动到每个区域,才开始向服务器发送请求,加载相应图片或数据

     

      8:减少DOM 查询,对 DOM 查询做缓存(存在一个变量中)

       比如 查询一个 DOM ,并缓存在一个变量 pList 中, var pList = document.getElementsByTagName('p');

      9:使用 DOM Fragment 用于缓存批量化的 DOM 操作

      附:雅虎军规:https://developer.yahoo.com/performance/rules.html?guccounter=2

      

      

  • 相关阅读:
    SqQueue(环状队列(顺序表结构))
    LinkQueue(链队列)
    CharMatch(括号匹配)
    LinkStack
    x-boot
    安装npm及cnpm(Windows)
    sourcetree跳过注册的方法
    Mysql 5.7 CentOS 7 安装MHA
    ORA-12519 ORA-12516
    lisp : set 与setq 函数
  • 原文地址:https://www.cnblogs.com/tu-0718/p/6170463.html
Copyright © 2011-2022 走看看