html压缩

项目实战 1.环境介绍 2.nvm和node.js环境配置 3.npm使用详解 4.gulp介绍和安装 5.gulp创建任务 6.gulp创建处理css文件任务 7.gulp给文件重命名 8.gulp处理JavaScript文件的任务 9.合并多个文件 10.创建压缩图片任务 11.监听文件修改，自动执行任务 12.修改代码实时刷新浏览器 13.项目环境搭建和安装相应包 14.编写gulpfile.js文件 15.sass语法介绍和转换为css 16.导航条实现（1） 17.导航条实现（2） 18.导航条实现（3） 19.导航条吸顶效果 20.轮播图布局和样式 21.JS面向对象和实现一次轮播 22.实现自动轮播 23.鼠标hover事件控制轮播图暂停和继续 24.切换轮播图的箭头样式及其显示和隐藏事件 25.轮播图上下切换 26.小圆点结构和样式 27.根据轮播图的个数动态修改小圆点结构和样式 28.小圆点点击事件和自动更新当前选中的小圆点 29.实现自动无限循环轮播 30.左右箭头切换实现循环轮播 31.新闻列表tab栏布局完成 32.新闻列表页布局完成 33.加载更多按钮的布局和样式 34.侧边栏-标题和广告位布局完成 35.侧边栏-关注第三方平台盒子布局和样式 36.侧边栏-热门推荐完成 37.footer布局和样式（1） 38.footer布局和样式（2） 39

webpack4.x webpack 模块打包工具，分析项目结构，找到js模块及一些浏览器不能运行的语言如ES6/sass等，并将其转换和打包为何时的格式供浏览器使用； 打包：将多个js文件打包成一个文件，减少服务器压力和下载带宽； 转换：把浏览器不能识别的语言转换为js，让浏览器能够正确识别 优化：优化项目，提高性能 安装 // 新建项目文件夹，并进入 mkdir webpack_demo cd webpack_demo //全局安装 npm install -g webpack // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等） npm n init // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用； npm install --save-dev webpack // 查看webpack版本 webpack -v // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli npm install --save

本文提到的网站性能指网站的响应速度，这也符合绝大部分人对于网站性能的理解：访问快速的网站性能好，反之，访问速度越慢，则网站性能越差。本文总结的优化方法是宏观的工程层面的方法，并不包含微观的语言语法层面的方法，例如，JS、CSS的语法优化，这一部分同样影响网站的性能，但语言语法层面的优化更多的是取决于开发人员的编程水平。 什么样的网站响应速度快呢？其实很容易想到，网站加载资源的速度越快，网站响应速度越快；网站需要加载的资源越少，网站响应速度越快。这就分别对应网站性能优化的两大方向：资源缓存、资源合并压缩。当浏览器完成资源的加载后，需要进一步解析资源，才能渲染出最终的网页，所以，浏览器的解析机制也是网站性能优化的一个方向。各种优化方法都可以归类到这三个大方向中。 1.资源缓存 1.1 使用CDN 将网站的静态资源分离，如静态HTML、图片Image、样式CSS、脚本JS等，把静态资源部署到CDN中，可以明显加快这部分资源的加载速度。 1.2 利用HTTP缓存机制 HTTP缓存会把浏览器加载过的资源缓存到本地，下次加载时，只要缓存的资源没有过期，就可以直接使用本地的资源，减少了HTTP请求次数，加快了资源加载速度。具体做法是设置HTTP Header 中的Cache-Control参数。HTTP 1.0 中使用Pragma和Expires两个参数进行缓存，不过早已不推荐使用。 2.

小概述： 1.只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%-90%的时间花在了下载页面中的所有组件上【js,css,image，flash...】。 2.如果浏览器和服务器都支持的话，可以使用压缩来减小响应的大小。浏览器可以使用Accept-Encoding头来声明它支持的压缩，服务器使用Content-Encoding头来确认响应已被压缩。 3.条件GET请求 如果浏览器在其缓存中保留了组件一个副本，但并不确定它是否仍然有效，就会生成一个条件GET请求，即在请求头中使用If-Modified-Since头将最后修改时间发送给服务器，请求服务器验证该副本从最后修改时间以来有没有被更新过，如果 没有更新过，服务器会返回一个"304 Not Modified"状态码并不再发送响应体，浏览器直接使用缓存中的这个副本，从而得到一个更小且更快的响应。 请求： GET /us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js HTTP/1.1 Host: us.js2.yimg.com User-Agent: Mozilla/5.0 (...) Gecko/20061206 Firefox/1.5.0.9 Accept-Encoding: gzip,deflate If-Modified-Since: Wed, 22

最近在写一个用了 layui 的后台管理系统。因为某些原因，html，css，js都写在.html里，并且没有用到别的打包工具。所以写了一个用node命令 批量压缩 页面并且混淆js的小工具。 node安装 html-minifier 目录结构如下，可自行更改。 压缩前代码 压缩后代码 运行node index命令后，source目录下的所有html页面都会被批量压缩， 看是不是压缩的明明白白的了。 代码github地址 来源： https://www.cnblogs.com/homehtml/p/11809870.html

摘要： 前端的性能对于Web应用的用户体验来说非常重要。不要以为你的Web应用的性能已经足够好了，其实还会有很多可以提升的地方。本文将介绍Google和雅虎关于前端优化的最佳实践以及工具，你可以逐一检验你的Web应用。 前端的性能对于一个Web应用来说非常重要，如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应，那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。 你的Web页面的速度是否已经足够快了？其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议，并发布了一些工具，你可以逐一检验你的Web应用，以便达到更高的性能。 这些优化不仅仅可以给用户提供更好的体验，从开发者角度来说，进行优化还可以减少页面的请求数、降低请求所占的带宽、减少资源的浪费。 下面来看看Google和雅虎提供的Web页面优化最佳实践。 一、Google的Web优化最佳实践 1. 避免坏请求 有时页面中的HTML或CSS会向服务器请求一个不存在的资源，比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求，类似于： 浏览器：“我需要这个图像。” 服务器：“我没有这个图像。” 浏览器：“你确定吗？这个文档说你有。” 服务器：“真的没有。” 如此一来，会降低页面的加载速度。因此，检查页面中的坏链接非常有必要，你可以通过

webpack4.x webpack 模块打包工具，分析项目结构，找到js模块及一些浏览器不能运行的语言如ES6/sass等，并将其转换和打包为何时的格式供浏览器使用； 打包：将多个js文件打包成一个文件，减少服务器压力和下载带宽； 转换：把浏览器不能识别的语言转换为js，让浏览器能够正确识别 优化：优化项目，提高性能 安装 // 新建项目文件夹，并进入 mkdir webpack_demo cd webpack_demo //全局安装 npm install -g webpack // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等） npm n init // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用； npm install --save-dev webpack // 查看webpack版本 webpack -v // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli npm install --save

html功能: 1.gulp-htmlmin html文件的压缩的 2.gulp-file-include 公共头部的抽取 ——注意： 在我们的html里面 需要加上 @@include(抽取的代码块的文件路径) css功能 1.gulp-csso css压缩 2.gulp-less less的转换 js功能 1.gulp-uglify js的压缩 2.gulp-babel es6转成es5 任务构建 我们可以把多个任务放在一个任务队列里面 ，然后给这个任务队列去一个名字，那我们在执行命令的时候，只需要 执行 gulp default 按照我们任务列表里面的顺序，依次去执行里面的任务 来源： https://blog.csdn.net/qq_34987378/article/details/100674263