整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一篇《WordPress 网站全方位速度优化：主机篇》讲的是关于WordPress 网站所在主机的设置，这次我们来讲网站内部臃肿导致加载变慢。
还是上一篇那个例子，一个网站首页总大小，如果从3MB下降到1MB。即便是1M 带宽的主机，加载时间也会从25秒下降到8秒，也是很可观的。但是要给网站减肥可不是一件容易的事儿，我尽可能的详细介绍：
访客的浏览器从远程主机上抓取网页，先抓取首页的HTML 文件，然后再从 HTML 文件里提取出 CSS、JS、图片、视频等文件分别加载，有的 JS 和 CSS 里还会加载更多的 CSS、图片、视频。
有一个工具可以看到网页加载过程，比如：文件数量、加载顺序、每个元素的响应时间、明细等信息。谷歌Chrome浏览器自带的“检查”工具，火狐 Firefox 的FireBug 工具都可以完成以上的工作。此外360浏览器，Safari 浏览器，IE 新版本都集成了这个功能。（如图：minify是个 css 文件，大小426KB）
如果是咱们自己写的 HTML、CSS、JS 文件，可以轻易瘦身，自己熟悉代码哪里能优化，但 WordPress 主题的 HTML、CSS、JS 我们是无能为力，只能通过Gzip压缩解决。（如下图，经过 Gzip 压缩，minify 文件 从426KB变成了57KB）
Gzip是服务器或者虚机提供的一种组件服务，简单地说：Gzip开启后，从主机到访客之间传送的文件会被压缩处理，这样就会减小通过网络传输的数据量，提高浏览的速度。比如一个首页150KB，但是经过压缩真实传输大小是25KB。（如下图）
Gzip具体使用方法：主机不同调用方法也不同，有的是写.htaccess，有的是安装个插件，不管是那种，可以到 Chinaz 站长工具里面检测（网址：http://tool.chinaz.com/Gzips/）。比如小红公司的网站：www.jianzhan1.cn的 html 文件是150KB，Gzip 压缩之后变成26KB，然后在火狐里用 FireBug 检查首页果然是25.9KB。双重验证说明 Gzip 生效了。此外Gzip 对 CSS 这类文本类的文件也会压缩，比如有个CSS 文件是426KB，压缩之后是57KB。
上图为 ChinaZ 网站检查结果，我们也可以从其他网站看出Gzip 是否生效，另外也可以用浏览器检查工具检查 header 是否有 Gzip。
通常Gzip只会压缩 HTML 和 TXT 之类的文本文件，不建议用它来压缩图片，因为这样会增加服务器 CPU 的负担，还会增加图片的体积，具体原因大家百度一下。后面会说给图片瘦身。
网站上用的图片大概这么几种：1 头部Slider的背景图和前景图。2 产品和案例的图片。3 其他装饰图片。
不论什么图片，第一步先看宽高尺寸，大小够用就好，切忌贪大，尺寸越大，容量越大，下载越慢，特别是产品图，有的同学直接上传2000px宽的2MB 图片。（很多同学不了解常识）
此外图片还分透明图片和不透明图片：透明图比如说去掉背景的产品图，还有特殊字体的文字也需要做成透明图片，可以把他们放到背景图上。不透明的图片比如说背景图片和产品展示图等。
先说透明图片，常用PNG格式，当然 PNG 图片也有透明和不透明之分，还有8位和24位的区别。总而言之，透明图片我们用 PNG，但是 PNG 图片很大，解决办法是，到 TingPNG 网站优化压缩，网址：https://tinypng.com/，通常可以得到比较好的压缩比，图片质量几乎没变化。因为这种压缩是在线压缩，需要上传和下载，有点麻烦，但是一次麻烦终身受益。
再说经常用到的JPG 图片，通常我们直接在PhotoShop 里修改，裁切大小，另存为 web 格式压缩，jpg 质量60左右。这个大家都会，我再分享个秘籍：“WP Smush”，这是一个 WordPress 插件，每次上传图片时会自动在线压缩，压缩比很高，质量损失很小，速度稍慢，绝对值得，一般人我不告诉他。
PNG 透明图和 JPG 图的究极压缩方法都是在线工具，小而精 小而美，这是他们的独门秘籍，不会轻易外传，在线提供服务也是一种保护。
网站上用的视频通常有两种方式，一种是托管在视频网站，比如优酷，我们在自己网站上引用优酷视频的地址，通常会有优酷的标志或者广告。另外一种方式是把视频存放在本地主机上，我们主要说这种。这种视频往往容量很大，用户下载慢，使用时一定要注意。下面说说如何优化：
以小红建站公司网站首页为例，第一屏有个背景视频，1000kb码率的MP4格式，36秒，5.4MB，严重影响打开速度。压缩成384kb码率的webm格式视频后，变成1.4MB，但画质很粗糙，显得很low。最后把视频剪辑成22秒，压缩成512kb码率的webm是1.4MB，质量好些，在视频上覆盖一层灰色，遮住粗糙的视频，整体显得高档。
这样做还有个问题，IE11浏览器 和 微软Edge浏览器 不支持webm 格式的视频，这需要额外增加mp4格式的视频给微软的浏览器。访客浏览器如果是支持webm视频的谷歌等浏览器，网站直接给他看webm视频；访客如果是 IE 浏览器，网站会给他看 MP4视频。
同样22秒 512k的码率MP4也是1.4MB，但是质量差很多，不得不提升768k码率，视频质量和webm的512k码率类似。吐槽Edge浏览器，播放MP4的质量好差，同样一段视频比IE11差不少，马赛克严重。
以上是对站内HTML，CSS，JS，图片，视频的优化压缩，木桶理论的两块木板“主机提速”和“站内减肥”介绍完了，下集将是最后一集，讲谷歌这个“外患”，还有外链，缓存，调用系统中文字体微软雅黑，。
注：相关网站建设技巧阅读请移步到建站教程频道。
动菜单通常是指一个下拉框的选项值发生改变后，另一个下拉框的选项值会发生对应的变化。在 HTML 页面中，可以使用 JavaScript 结合 HTML DOM 来实现这一功能。下面我来举一个例子。
假设我们有三个下拉框，分别是“省份”、“城市”和“区县”。当“省份”下拉框的选项值发生改变时，我们需要动态更新“城市”下拉框的选项值，并且根据“城市”的选项值动态更新“区县”下拉框的选项值。具体实现步骤如下：
1 首先在 HTML 文件中定义三个下拉框，并分别给它们一个唯一的 ID，如下所示：
<label>省份：</label>
<select id="province"></select>
<label>城市：</label>
<select id="city"></select>
<label>区县：</label>
<select id="district"></select>2 在 JavaScript 中定义三个函数，分别用于更新“城市”、“区县”下拉框的选项值，以及初始化页面时的默认值：
// 更新城市下拉框内容
function updateCity() {
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
citySelect.innerHTML = ""; // 清空城市下拉框内容
// 根据选中的省份，获取该省份对应的城市列表
var provinceName = provinceSelect.value;
var cityList = getCityList(provinceName);
// 根据城市列表，动态生成城市下拉框的选项
for (var i = 0; i < cityList.length; i++) {
var option = document.createElement("option");
option.text = cityList[i];
citySelect.add(option);
}
// 触发区县下拉框更新
updateDistrict();
}
// 更新区县下拉框内容
function updateDistrict() {
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
districtSelect.innerHTML = ""; // 清空区县下拉框内容
// 根据选中的城市，获取该城市对应的区县列表
var cityName = citySelect.value;
var districtList = getDistrictList(cityName);
// 根据区县列表，动态生成区县下拉框的选项
for (var i = 0; i < districtList.length; i++) {
var option = document.createElement("option");
option.text = districtList[i];
districtSelect.add(option);
}
}
// 初始化页面
function initPage() {
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
// 根据省份列表，动态生成省份下拉框的选项
for (var i = 0; i < provinceList.length; i++) {
var option = document.createElement("option");
option.text = provinceList[i];
provinceSelect.add(option);
}
// 触发城市下拉框更新
updateCity();
}现在我们已经完成了省份和城市两个下拉框的联动效果，接下来我们需要再次绑定城市下拉框的change事件，以实现城市与区县下拉框的联动。
首先，我们需要在HTML中添加第三个下拉框，用于选择区县：
<select id="county"></select>然后，我们需要更新updateCity和initPage两个函数，使其能够更新城市和区县两个下拉框：
function updateCity() {
var province = document.getElementById('province').value;
var cityOptions = '';
for (var i = 0; i < cities[province].length; i++) {
cityOptions += '<option value="' + cities[province][i] + '">' + cities[province][i] + '</option>';
}
document.getElementById('city').innerHTML = cityOptions;
// 清空区县下拉框
document.getElementById('county').innerHTML = '<option value="">--请选择--</option>';
}
function updateCounty() {
var province = document.getElementById('province').value;
var city = document.getElementById('city').value;
var countyOptions = '';
for (var i = 0; i < counties[province][city].length; i++) {
countyOptions += '<option value="' + counties[province][city][i] + '">' + counties[province][city][i] + '</option>';
}
document.getElementById('county').innerHTML = countyOptions;
}
function initPage() {
// 初始化省份下拉框
var provinceOptions = '<option value="">--请选择--</option>';
for (var province in cities) {
provinceOptions += '<option value="' + province + '">' + province + '</option>';
}
document.getElementById('province').innerHTML = provinceOptions;
// 绑定省份下拉框的change事件
document.getElementById('province').addEventListener('change', updateCity);
// 初始化城市下拉框
updateCity();
// 绑定城市下拉框的change事件
document.getElementById('city').addEventListener('change', updateCounty);
// 初始化区县下拉框
updateCounty();
}在updateCity函数中，我们添加了清空区县下拉框的代码，以确保每次更改城市时，区县下拉框都会被清空。
在updateCounty函数中，我们根据选择的省份和城市，动态生成区县下拉框的选项。
在initPage函数中，我们绑定了城市下拉框的change事件，并调用updateCounty函数初始化区县下拉框的选项。
最后，我们需要在JavaScript代码中定义counties变量，以存储每个城市对应的区县信息：
var counties = {
"北京市": {
"市辖区": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区"],
"县": ["密云县", "延庆县"]
},
"上海市": {
"市辖区": ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区"],
"县": ["崇明县"]
},
// 省略部分数据...
};接下来是第三个函数setDefaultValue()，用于初始化页面时设置默认值。在这个函数中，我们先根据省份的默认值设置省份下拉框的选中项，然后根据省份和城市的默认值，从数据中获取相应的区县数据，并设置区县下拉框的选项。
function setDefaultValue() {
// 设置省份下拉框默认选中项
var provinceSelect = document.getElementById("province");
for (var i = 0; i < provinceSelect.options.length; i++) {
if (provinceSelect.options[i].value === defaultProvince) {
provinceSelect.selectedIndex = i;
break;
}
}
// 根据省份和城市设置区县下拉框选项
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
var districtData = data[defaultProvince][defaultCity];
districtSelect.options.length = 0; // 清空区县下拉框
for (var i = 0; i < districtData.length; i++) {
var option = new Option(districtData[i], districtData[i]);
if (districtData[i] === defaultDistrict) {
option.selected = true; // 设置默认选中项
}
districtSelect.options.add(option);
}
}在这个函数中，我们首先获取省份下拉框的DOM元素，并通过循环找到选中项为默认省份的选项，并设置为选中状态。然后获取城市和区县的DOM元素，并从数据中获取对应的区县数据。最后根据区县数据动态创建选项，并设置默认选中项。注意，在设置区县下拉框的选项时，我们先要将下拉框的长度设为0，以清空之前的选项。同时，我们还需要为新创建的选项设置selected属性，以设置默认选中项。
以上就是一个简单的基于JavaScript和HTML DOM实现联动菜单的示例，可以根据具体的业务需求进行扩展和修改。
者开始学习Javascript的时候，对模块不太懂，不知道怎么导入模块，导出模块，就胡乱一通试
比如 import xx from 'test.js' 不起作用，就加个括号 import {xx} from 'test.js'
反正总是靠蒙，总有一种写法是对的，其实还是没有理解，还是不懂
尤其是在当初写 www.helloworld.net 网站的时候，一遇到这种问题，就懵逼了，尤其是引入第三方库的时候
这种情况下更多，此篇文章也是为了怕以后忘记，自查用的，也希望能帮助更多的朋友，此篇文章只是针对ES6的模块相关知识
我们知道，JS 模块导入导出，使用 import , export 这两个关键字
也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了
下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）
//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"
//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site) //输出： www.helloworld.net上面的例子是导出单个变量，那么如何导出多个变量呢
//a.js 中定义两个变量，并导出
var siteUrl="www.helloworld.net"
var siteName="helloworld开发者社区"
//将上面的变量导出
export { siteUrl ,siteName }
// b.js 中使用这两个变量
import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写
console.log(siteUrl) //输出： www.helloworld.net
console.log(siteName) //输出： helloworld开发者社区
导出函数和导出变量一样，需要添加{ }
//a.js 中定义并导出一个函数
function sum(a, b) {
return a + b
}
//将函数sum导出
export { sum }
//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10js中一切皆对象，所以对象一定是可以导出的，并且有两种写法
使用 export default 关键字导出，如下
//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
siteUrl:'www.helloworld.net',
siteName:'helloworld开发者社区'
}
//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区同样是使用export default 关键字，如下
//a.js 中定义对象，并在最后导出
var obj = {
siteUrl:'www.helloworld.net',
siteName:'helloworld开发者社区'
}
export default obj //导出对象obj
//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区
导出类与上面的导出对象类似，同样是用 export default 关键字，同样有两种写法
//a.js 中定义一个类并直接导出
export default class Person {
//类的属性
site = "www.helloworld.net"
//类的方法
show(){
console.log(this.site)
}
}
//b.js 中导入并使用
//导入类
import Person from './a.js'
//创建类的一个对象person
let person = new Person()
//调用类的方法
person.show() //输出：www.helloworld.net
//a.js 中定义一个类，最后导出
class Person {
//类的属性
site = "www.helloworld.net"
//类的方法
show(){
console.log(this.site)
}
}
//导出这个类
export default Person
//b.js 中导入并使用
//导入类
import Person from './a.js'
//创建类的一个对象person
let person = new Person()
//调用类的方法
person.show() //输出：www.helloworld.net
下面我们简单总结一下
export与export default的区别
对于 import ,export , export default ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看
最重要的还是要明白为什么要这么写，实在不明白记住就行了。
*请认真填写需求信息，我们会在24小时内与您取得联系。
