影响网站打开时间有两个因素,一个是网页加载速度,另一个是网站页面的大小。网站加载速度与用户所处的网络环境及主机性能有关,而网站页面的大小则由网站开发者决定,最主要的就是web前端开发工程师的工作。本文的重点就是如何压缩网站页面,以减少页面加载时间。

1. 图片压缩

相对与文本来说,图片是相当占用空间的。压缩图片是重中之重。

图片压缩工具推荐:

2. Javascipt压缩

为了增加页面的交互性及动画效果,很多页面大量使用 Javascript ,特别是Jquery。

推荐工具:

3. CSS 压缩

由于CSS代码有很多缩写,所以使用压缩工具压缩一下,能大大的降低CSS文件的大小。

推荐工具:

4.HTML压缩

推荐使用 Dreamweaver 的清理工具。使用 Dreamweaver 的“Clean Up HTML”( 清理 HTML)命令,可以从文档中删除空标记、融合嵌套的 font 标记等,以增强代码的可读性和易懂性。

web前端开发必备压缩工具整理的更多相关文章

  1. Web前端开发必备

    前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...

  2. Web前端开发必备工具推荐

    http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...

  3. web前端开发必备技术

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  4. 国人Web前端开发必备干货,一个完美支持IE6在内所有浏览器的CSS框架

    摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...

  5. Web前端开发必备手册(Cheat sheet)

    转自:http://blog.bingo929.com/cheat-sheets-for-web-develop.html Cheat sheet这个词组如果直译成中文,意思大概是”作弊小抄”之类的词 ...

  6. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  7. Web前端开发CSS规范总结

    作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...

  8. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  9. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

随机推荐

  1. ACM ICPC Kharagpur Regional 2017

    ACM ICPC Kharagpur Regional 2017 A - Science Fair 题目描述:给定一个有\(n\)个点,\(m\)条无向边的图,其中某两个点记为\(S, T\),另外标 ...

  2. /proc/cpuinfo 文件分析(查看CPU信息)

    /proc/cpuinfo文件分析 根据以下内容,我们则可以很方便的知道当前系统关于CPU.CPU的核数.CPU是否启用超线程等信息. <1>查询系统具有多少个逻辑核:cat /proc/ ...

  3. SilverLight高亮显示文本

    文笔不好,就长话短说,就是想实现这样的效果,比如在成都二环路南一段一号附一号凤舞九天网吧 ,搜索 二环路 九天网吧 然后结果中高亮显示. <local:TextBlockHighLight Te ...

  4. html清屏 meta http-equiv="refresh" content="3">

    <meta http-equiv="refresh" content="3"> 什么意思? <meta http-equiv="re ...

  5. plsql例子

    create or replace procedure find_difference(db_link in varchar2) is /* 比对两套环境建表脚本差异,以224环境为主 当前环境,db ...

  6. python中的any和all函数

    any和all函数是判断一组数据真假性的综合结果.以下摘选自Stackoverflow. ------------------ 分割线开始 ----------------- any any will ...

  7. print、println的区别

    System.out.print("a");——后面没有换行符 System.out.println("b");——后面有换行符 换行符:\r和\n以及\r\n ...

  8. 易普优APS应用案例:线束行业生产计划排产

    一.线束行业生产现状 (1)产品种类以及标准繁多,生产计划难协调 线束行业的生产,虽然原材料不多,但线束产品却多达几万种.一般线束企业,虽然不是每个月都生产数万种产品,但每月生产的产品品种在300种以 ...

  9. Python全栈开发之10、网络编程

    网络编程就是如何在程序中实现两台计算机的通信,而两台计算机间的通信其实就是两个进程间的通信,进程间的通信主要通过socket(套接字)来描述ip地址(主机)和端口(进程)来实现的,因此我们学习网络编程 ...

  10. 牛客网 牛客练习赛43 F.Tachibana Kanade Loves Game-容斥(二进制枚举)+读入挂

    链接:https://ac.nowcoder.com/acm/contest/548/F来源:牛客网 Tachibana Kanade Loves Game 时间限制:C/C++ 1秒,其他语言2秒 ...