首页 归档 图表 购物 半帘梦 个人中心

页面加载优化

2019-07-23
  • 前端
本文总阅读量次

据说世界上有两种女人是让你爱的,一种是让你最快乐的,一种是让你最困扰的。

1. 重复的 HTTP 请求数量应尽量减少

  • 减少调用其他页面、文件的数量。

  • 在使用 css 格式时,常会采用 background 载入图形文件,而每个 background 的图像都会产生 1 次 HTTP 请求,为了让页面生动活泼大量使用 background 来加载背景图,可以采用 css 的 1 个有用的 background-position 属 性来加载背景图加以改善,将需要频繁加载的多个图片合成为 1 个单独的图片,加载时采用:background:url(….) no-repeat x-offset y-offset 的形式加载,图片加载的 HTTP 请求缩减为 1 个。

2. 压缩 Javascript、CSS 代码

  • 一般 js、css 文件中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。这方面的工具也有很多,可以在百度里搜索一下 关键字“css 代码压缩”,或者“js 代码压缩”将会发现有很多网站都提供这样的功能,当然了你也可以自己写程序来做这个工作,如果你会的话。就拿我们这 个网站来说吧。刚开始上传这个网站的时候,我的很多 Css 代码都没有压缩,后面发现了这个问题,我就上网找了相关的网站的压缩代码的功能,最后就把很多 CSS 文件都压缩了。这个压缩比率还是比较高的,一般都有百分五十左右。这个代码压缩对于网页的加载还是很有用的。

3. 在文件头部放置 css 样式的定义

  • 这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利,可以在网页逐步呈现的同时仍会保持格式信息,不影响网页美感。

4. 在文件末尾放 Javascript 脚本

  • 网页文件的载入是从上到下加载的,很多 Javascript 脚本执行效率较低,或者在网页前面都不需要执行的,如果将这些脚本放置到页面比较靠前的位置, 可能导致网站内容载入速度下降或加载不了,将这些脚本放置在网页文件末尾,一定要放 置在前面的脚本要改用所谓的“后载入”方式加载,在主体网页加载完成后再加载,防止其影响到主体网页的加载速度。

5. css、javascript 改由外部调用

  • 如果 css、js 内容比较庞大,尽量不要写到同 1 个页面中去,改由外部载入比较妥当,因为浏览器本身会对 css、js 文件进行缓存。

6. 尽可能减少 DOM 元素

  • 尽可能减少网页中各种<>元素数量,例如的冗余很严重,而我们完全可以用
    取代之。

    7. 避免使用 CSS 脚本(CSS Expressions)

    • 有时为了要 css 的参数动态改变,可能会采用 css expression 来实现,但这样做得不偿失,会使用户端浏览器负担明显加重,所以不建议这样做,如果需要改变,可以使用 Javascript 脚本去实现。

    8. 添加文件过期或缓存头

    • 对于同一用户频繁访问的图片、Js 脚本文件等可以在 Apache 或 Nginx 设置其缓冲时间,例如设置 24 小时过期时间,这样用户在访问过该页面之后再次访问时,同一组图片或 JS 不会再重复下载,从而减少了 HTTP 请求,用户访问速度明显有所提升,同时服务器负载也会下降。

    9. 使用 CDN(Content Delivery Network)网络加速

    • 现在国内做 CDN 加速业务的公司很多,简单讲,就是将你的图片、视频扩散到 CDN 网络所能到达之处,让用户访问时能就近下载到这些文件,从而达到网络提速的目的,这样做,同时能减轻你自己网站的负载。

    11. 图片压缩优化

    • 优化图片文件,减小其尺寸,使用精灵图,svg等。
    完
    单点登录
    图像优化

    Promise

    Do not, for one repulse, give up the purpose that you resolved to effect.

    Tags

    • CSS
    • ES6
    • Echarts
    • Git
    • HTML
    • JS
    • Java
    • React
    • Redux
    • SQL
    • Vue
    • Vuex
    • jQuery
    • 前端
    • 数据结构
    • 算法
    • 综合
    • 网络

    Tag Cloud

    CSS ES6 Echarts Git HTML JS Java React Redux SQL Vue Vuex jQuery 前端 数据结构 算法 综合 网络

    Archives

    • December 2021
    • November 2021
    • October 2021
    • September 2021
    • August 2021
    • July 2021
    • June 2021
    • May 2021
    • April 2021
    • March 2021
    • February 2021
    • January 2021
    • December 2020
    • November 2020
    • October 2020
    • September 2020
    • August 2020
    • June 2020
    • May 2020
    • April 2020
    • March 2020
    • February 2020
    • January 2020
    • December 2019
    • November 2019
    • October 2019
    • September 2019
    • August 2019
    • July 2019
    • June 2019
    • May 2019
    • April 2019
    • March 2019
    • February 2019
    • January 2019
    • December 2018
    • November 2018
    • October 2018
    • September 2018
    • August 2018
    • July 2018
    • May 2018
    • April 2018
    • March 2018
    • February 2018
    • October 2017
    • March 2017
    • February 2017
    • April 2016
    • March 2016
    • February 2016
    • January 2016

    Recent Posts

    • Java反射
    • Tomcat部署前端项目
    • Java序列化
    • Java泛型
    • Java枚举
    © 2023 Infatuation    阁下是第99999个访客
    首页 归档 图表 购物 半帘梦 个人中心