第35节浏览器对象模型BOM-JavaScript

内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

BOM（Browser Object Model）浏览器对象模型；其提供了独立于内容而与浏览器窗口进行交互的对象；

没有BOM标准：不同的浏览器按照各自的想法实现及扩展BOM，于是，它们之间共有的对象成为了事实上的标准；近年来，W3C为了把浏览器中Javascript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。

BOM由一系列相关的对象构成；DOM中各对象之间是层次关系；window对象是整个BOM的核心，所有对象和集合都以某种方式回接到window对象；

window对象

window对象：

其是BOM的核心对象，也是顶级对象，表示浏览器的一个实例；

浏览器窗口对文档提供一个显示的容器，是每一个加载文档的父对象；window对象表示整个浏览器窗口，但不表示其中所包含的内容；可以用于移动或调整浏览器的大小，或者产生其他的影响；

全局作用域：

在浏览器中，window对象具有双重角色，即是通过Javascript访问浏览器的一个接口，又是ES中的Global对象；

既然window是Global对象，所以window对象是所有其他对象的顶级对象，在网页中定义的任何对象、变量和函数，window对象都有权访问；即所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法；因此window前缀可以省略；

var age = 18;
function sayAge(){
    alert(this.age);
}
alert(window.age);
sayAge();
window.sayAge();

定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以，如：

var age = 18;
window.color = "green";
console.log(delete window.age);  // false
console.log(delete window.color);  // true
console.log(window.age);  // 18
console.log(window.color);  // undefined

age属性的特性中的[[Configurable]]，值为false，因此其不能通过delete删除；

console.log(Object.getOwnPropertyDescriptor(window,"age"));
console.log(Object.getOwnPropertyDescriptor(window,"color"));

尝试访问未声明的变量会抛出错误，但通过查询window对象，可以知道某个可能未声明的变量是否存在，如：

var age = oldAge;  // 抛出错误
var age = window.oldAge;  // 不会抛出错误，因为这是一次属性查询

文档元素：

如果在HTML文档中用id属性来元素命名，并且如果window对象没有此名字的属性，window对象会赋予一个属性，它的名字是id属性的值，而它们的值指向表示文档元素的HTMLElement对象，这称为全局变量的隐式应用；

在实际场景中，很少使用这种方式来访问HTML元素，它是Web浏览器发展过程中遗留的一个现象，是现代浏览器向后兼容性的考虑，如：

<button id="okay">按钮</button>
<input id="myinput" value="input" />
<div id="mydiv">mydiv</div>
<script>
var ui = ["okay","myinput"];
ui.forEach(function(id){
    ui[id] = document.getElementById(id);
});
console.log(ui.okay);
console.log(ui.myinput);
 
// 定义一个更简单的方法
var $ = function(id){
    return document.getElementById(id);
};
$("mydiv").innerHTML = "零点网络";
console.log($("mydiv"));
</script>

窗口位置：

获取窗口(视口)的位置(即相对于屏幕左边和上边的位置)；各浏览器都实现了screenLeft和screenTop属性表示窗口的位置；但是之前的firefox并不支持，现代firefox返回-8；只有IE是文档区相对于主显示器屏幕的位置；

Firefox使用了screenX和screenY属性获取窗口位置信息；各浏览器也实现了这两个属性，但并不统一：

chrome与Opera实现了screenLeft、screenTop与screenX、screenY的统一；且最大化时，值为0；Firefox与IE实现了统一，但最大化时，值为-8；且Firefox中的screenLeft、screenTop与这两个属性实现了对应；但IE的screenLeft、screenTop与这两个属性并不对应；screenLeft、screenTop是文档区域的左上角的坐标，screenX、screenY是窗口的左上角坐标；

console.log(window.screenLeft);
console.log(window.screenTop);
console.log(window.screenX);
console.log(window.screenY);
 
// 为了兼容老的Firefox
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
console.log("leftPos:",leftPos, ",topPos:",topPos);

pageXOffset及pageXOffset：设置或返回当前页面相对于可视区域的左及上的位置；但貌似只有Chrome支持，同时，如果是设置的话，没有效果；

注：目前，无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值；如果在框架中使用，除了IE，其他浏览器的值都与以上统一；

移动浏览器窗口：

moveBy(dx,dy)：相对移动，dx,dy可以为负；
moveTo(x,y)：移动，x,y可以为负；

window.moveTo(50,100);
window.moveBy(100,200);
window.moveBy(-50,0);

注：一般很少用；这两个方法有可能会被浏览器禁用；这两个方法都不适用框架，只能对最外层的window对象使用；

窗口大小：

如果要获取浏览器窗口大小信息，各浏览器并不统一；但各浏览器都已实现了以下四个方法，但返回值并不一定相同：

innerWidth和innerHeight属性获取视口大小(注：包括body的margin)；
outerWidth和outerHeight属性获取浏览器窗口大小(无论是从最外层的window对象还是从某个框架访问)；

console.log(window.innerWidth);
console.log(window.innerHeight);
console.log(window.outerWidth);
console.log(window.outerHeight);

在各浏览器的实现中，可以通过使用DOM提供的页面视口的相关信息：

document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息；其返回值与innerWidth和innerHeight一致；

在低版本的IE中，必须通过document.body.clientWidth和document.body.clientHeight属性获取视口信息（实际上是实际内容的尺寸，但不包括border值），但不标准；

同时，document.body.offsetWidth和document.body.offsetHeight也能获取视口相关信息，同clientWidth和clientHeight类似，只不过其包括border的宽度；

跨浏览器取得页面视口的大小：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
    // 判断页面是否处于标准模式
    if(document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}
console.log(pageWidth);
console.log(pageHeight);

调整浏览器窗口的大小：

resizeBy(dw,dh)：相对缩放，dw,dh可以为负；
resizeTo(w,h)：缩放到, w,h不能为负；

注：一般很少用；也有可能被禁用，同移动窗口类似

window.resizeTo(400,300);
window.resizeBy(200,100);

滚动窗口（如果有滚动条）：

scrollBy(x, y)：按照指定的像素值相对来滚动的内容(第一个参数是滚动条向右滚动，第二个参数是滚动条向下滚动，方法执行重复执行，值会累加)；（可直接在控制台上演示）
scrollTo(x, y)：把内容滚动到指定的坐标；
scroll(x, y)：把内容滚动到指定的坐标；
scrollX及scrollY：

对话框：

window对象通过alert()、confirm()和prompt()三个方法可以调用系统对话框向用户显示消息；

系统对话框与在浏览器中显示的网页没有关系，也不包括HTML；它们的外观由操作系统或浏览器设置决定的，而不是由CSS决定的；此外，通过这几个方法打开的对话框都是同步和模态的，也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行；

一般来说，不会使用，都是自己实现一个效果；

警告对话框window.alert(string)：

警告对话框是一个带感叹图标的小窗口，通常用来输出一些简单的文本信息；该方法接受一个字符串并将其显示给用户，并包含一个OK或确定的按钮等待用户关闭对话框；

通过alert()生成的警告对话框，用户是无法控制的，比如，显示的消息内容，用户只能看完消息后关闭对话框；

确认对话框window.confirm(string)：

确认对话框也是向用户显示消息的对话框，但与警告对话框不同的是，其具有OK与Cancle按钮，根据用户的选择，该方法返回不同的值(true或false)；程序可以根据不同的值予以不同的响应，实现互动的效果；通常放在网页中，对用户进行询问并根据其选择而做不同的控制；

if(window.confirm("确定删除吗？")){
    alert("已经删除");
}else{
    alert("未删除");
}

输入对话框window.prompt()：

用于提示用户输入的对话框；

语法: window.prompt(提示信息，默认值)；// 要显示的文本提示和文本输入域的默认值，该默认值可以是一个空字符串；

prompt("请输入你的名字","王唯");

如果用户单击了OK，则prompt()返回文本域中的值，如果单击了Cancel或使用其他方式关闭对话框，则该方法返回null，如：

var result = prompt("请输入密码：","");
if(result == "8888"){
    alert("登录成功");
}
 
var result = prompt("请输入你的名字","王唯");
if(result !== null){
    document.write("欢迎你：" + result);
}else{
    alert("你没有输入任何内容");
}

综上所述，这些系统对话框很适合向用户显示消息并由用户作出决定；由于不涉及HTML、CSS或JS，因此它们是增强Web应用程序的一种便捷方式；

do{
    var name = prompt("输入你的名字：");
    var correct = confirm("你输入的是：" + name + ".\n" + "你可以单击确定或取消");
}while(!correct)
alert("你好，" + name);

在弹出对话框时，还有一个特性：如果当前脚本在执行过程中会打开两个或多个对话框，那么从第二个对话框开始，每个对话框中都会显示一个复选框，以便用户阻止后续的对话框显示，除非用户刷新页面；后续被阻止的对话框包括警告框、确认框和显示输入框；

该特性最初是由Chrome实现了，后续其他浏览器也实现该特性；其工作原理就是使用了一个叫对话框计数器，可以跟踪对话框；但是浏览器没有就对话框是否显示向开发人员提供任何信息；

在实际的场景中，这三个方法是很少用的，因为它们显示的文本是纯文本，不是HTML格式的文本，只能使用空格、换行符和各种标点符号，所以往往满足不了页面设计需要，并且有可能会破坏用户的浏览体验；常见的就是使用alert()方法进行调试，用来查看某个变量的输出结果；

这三个方法都会产生阻塞，也就是说，在用户关掉它们之前，它们不会返回，后面的代码不会执行；如果当前载入文档，也会停止载入，直到用户要求的输入进行响应为止；

可以自定义一个对话框：

<style>
    #alert_box{
        position: absolute; display: none; width: 400px; height:300px; border-radius: 3px;
         box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    }
    #alert_box h1{
        margin:0; padding: 0; font-size: 1.5em; line-height: 60px;
        height: 60px;
        text-align: center; background-color: rgba(255,255,255,1);
    }
    #alert_box div{
        height: 240px;
        padding: 1em; line-height: 1.8em; background-color: rgba(255,255,255,.8);
    }
    #alert_box span{
        position: absolute; width: 30px; height: 30px;
        top:-15px; right:-15px; background-color:#000; border-radius: 50%;;
    }
    </style>
<script>
window.alert = function(title,info){
    var box = document.createElement("div");
    box.id = "alert_box";
    box.style.left = ((window.innerWidth - 400) / 2) + "px";
    box.style.top = ((window.innerHeight - 300) / 2) + "px";
 
    var h1 = document.createElement("h1");
    h1.innerText = title;
    box.appendChild(h1);
 
    var innerBox = document.createElement("div");
    innerBox.innerHTML = info;
    box.appendChild(innerBox);
 
    var closeSpan = document.createElement('span');
    box.appendChild(closeSpan);
    closeSpan.addEventListener("click",function(e){
        document.body.removeChild(box);
    },false);
 
    box.style.display = "block";
    document.body.appendChild(box);
};
window.alert("零点网络","哪些是这样的？");
</script>

Javascript还有两个工具性的对话框，即查找window.find()和打印window.print()；

这两个对话框都是异步显示的，能够将控制权立即交还给脚本；其与浏览器菜单中的查找和打印命令是相同的；

这两个方法同样不会就用户对对话框中的操作给出任何信息，因此它们的用处有限；另外，既然这两个对话框是异步显示的，对话框计数器就不会将它们计算在内，所以它们也不会受用户禁用后续对话框显示的影响；

状态栏：

浏览器的状态栏通常位于窗口的底部，用于显示一些任务状态信息等。在通常情况下，状态显示当前浏览器的工作状态或用户交互提示信息; 具有status和defaultStatus属性;

默认状态栏信息：

defaultStatus属性可以用来设置在状态栏中的默认文本，是一个可读写的字符串；

状态栏瞬间信息：

status属性，在默认情况下，将鼠标放在一个超链接上时，状态栏会显示该超链接的URL，此时的状态栏信息就是瞬间信息；当鼠标离开超链接时，状态栏就会显示默认的状态栏信息，瞬间信息消失。

浏览器已经关闭了状态栏的功能；这是出于安全的考虑，防止隐藏了超链接真正目的的钓鱼攻击；

Web前端开发之Javascript-零点程序员-王唯

篇文章给大家带来的内容是关于HTML5 Web Worker的介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

浏览器中的Web Worker

背景介绍

我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行，HTML5则提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。

进程与线程的区别

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位。

在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行。

兼容性

web worker是什么？

简单来说，其实就是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。

举个栗子

传统情况下，执行下面的代码后，整个页面都会被冻结，由于javascript是单线程处理，如下代码已经完全组塞了后续的执行

while(1){}

如果换一种方式，我们通过开启一个新的线程来执行这段代码，将他放在一个单独的worker.js文件中,在主线程执行以下代码，则可以避免这种情况。

var worker=new Worker("worker.js")

Web Worker的用法

判断当前浏览器是否支持web worker

if (typeof (Worker) !="undefined") { //浏览器支持web worker

if (typeof (w)=="undefined") { //w是未定义的,还没有开始计数

w=new Worker("webworker.js"); //创建一个Worker对象,利用Worker的构造函数

}

//onmessage是Worker对象的properties

w.onmessage=function (event) { //事件处理函数,用来处理后端的web worker传递过来的消息

// do something

};

}

else { // 浏览器不支持web worker

// do something

}

API

①创建新的Worker

var worker=new Worker("worker.js")

②传递参数

worker.postMessage()

③接收消息

worker.onMessage=function(msg){}

④异常处理

worker.onerror=function(err){}

⑤结束worker

worker.terminate()

⑥载入工具类函数

importScripts()

Worker作用域

当我们创建一个新的worker时，该代码会运行在一个全新的javascript的环境中（WorkerGlobalScope）运行,是完全和创建worker的脚本隔离，这时我们可以吧创建新worker的脚本叫做主线程，而被创建的新的worker叫做子线程。

WorkerGlobalScope是worker的全局对象，所以它包含所有核心javascript全局对象拥有的属性如JSON等，window的一些属性，也拥有类似于XMLHttpRequest()等。

但是我们所开启的新的worker也就是子线程，并不支持操作页面的DOM。

线程间的通讯是传值而不是传地址

主线程与子线程数据通信方式有多种，通信内容，可以是文本，也可以是对象。需要注意的是，这种通信是拷贝关系，即是传值而不是地址，子线程对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给子线程，后者再将它还原。

JavaScript中的数据类型存放原理以及传递规则

共享线程（SharedWorker）

共享线程是为了避免线程的重复创建和销毁过程，降低了系统性能的消耗，

共享线程SharedWorker可以同时有多个页面的线程链接。

使用SharedWorker创建共享线程，也需要提供一个javascript脚本文件的URL地址或Blob,该脚本文件中包含了我们在线程中需要执行的代码，如下：

var worker=new SharedWorker("sharedworker.js");

共享线程也使用了message事件监听线程消息，但使用SharedWorker对象的port属性与线程通信如下:

worker.port.onmessage=function(msg){};

同时我们也可以使用SharedWorker对象的port属性向共享线程发送消息如下：

worker.port.postMessage(msg);

运行原理

生命周期

①当一个web worker的文档列表不为空的时候，这个web worker会被称之为许可线程。

②当一个web worker的文档列表中的任何一个对象都是处于完全活动状态的时候，这个web worker会被称之为需要激活线程。

③当一个web worker是许可线程并且拥有计数器或者拥有数据库事务或者拥有网络连接或者它的web worker列表不为空的时候，这个web worker会被称之为受保护的线程。

④当一个web worker是一个非需要激活线程同时又是一个许可线程的时候，这个web worker会被称之为可挂起线程。

以webKit为例加载并执行worker的过程

应用

可以做什么：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

不可以做什么：

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性

以上就是HTML5 Web Worker的介绍（附示例）的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

起HTML标签，前端工程师会非常的有发言权，因为在平时开发中一定会用到，可以说是前端的入门必备知识。但往往在意更多的是页面的渲染效果及交互方式，也就是页面可见的部分，比如导航栏，菜单栏，列表，图文等。

其实还有一些页面上没有呈现出来却非常重要的标签，这些标签大部分在页面的头部head标签内，虽然在页面上看不见摸不着，但如果在特定的场景下，会产生意想不到的效果。下面我将从交互优化，性能优化，搜索优化三个方面并结合场景来聊聊被“忽视”的HTML标签。

交互优化

meta 标签：自动跳转/刷新

假设要实现一个类似自动播放的页面，首先我们第一反应会想到用js定时器控制页面跳转来完成。但是其实有更加简便的方法，通过meta标签的refresh功能来实现。

<meta http-equiv="refresh" content="10; url=view2.html">

上面的代码会在 10s 之后自动跳转到同域下的 view2.html 页面。我们要实现自动播放的功能，只需要在每个页面的 meta 标签内设置好下一个页面的地址即可。

如果要实现定时刷新的功能，只要去除后面url即可：

<meta http-equiv="refresh" content="10">

注意，用meta标签实现刷新/跳转的过程是不可取消的，所以需要手动取消的还是得老老实实使用js的定时器，但是对于简单的定时刷新或跳转，还是可以去亲自实践meta的用法。

title 标签：消息提醒

消息提醒功能实现在HTML5标准发布之前，浏览器还没有开放图标闪烁、音频播放，弹出系统消息之类的api，只能借助其他非常规的手段，比如修改title 标签来达到类似的效果。

下面的代码通过定时修改title标签的内容，实现了消息提醒的功能，可以让用户在浏览其他页面时候，及时发现服务端返回的消息。

let messageNum=1; // 消息条数
let count=0; // 计数器
const msgInterval=setInterval(()=> {
  count=(count + 1) % 2;
if(messageNum===0) {
// 通过DOM修改title
document.title +=`当前页面`;
    clearInterval(msgInterval);
return;
  }
const pre=count % 2 ? `新消息(${msgNum})` : '';
document.title=`${pre}当前页面`;
}, 1000);

当然，动态修改title标签的用途不仅仅是消息提醒，还可以显示一些异步进行的任务，比如下载进度，上传进度等。

性能优化

script 标签：调整加载顺序提升渲染速度

不知道你们有没有过这样的体验：当在浏览器打开某个页面时，发现页面一直在loading转圈，或者等了好长的时间页面才有响应。这一现象，除了网络网速的原因外，大多数都是由于页面结构设计不合理导致加载时间过长。因此，如果想要提升页面的渲染速度，就需要了解浏览器页面的渲染过程是怎样的，从根本上来解决问题。

浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起，等执行完 JavaScript 的脚本程序后又会切换 GUI 线程继续渲染页面。

所以我们可以知道页面渲染过程中包含了请求脚本文件以及执行脚本文件的时间，但页面的首次渲染可能并不需要执行完全部的文件，这些请求和执行文件的动作反而延长了用户看到页面的时间，从而降低了用户体验。

为了快速将内容呈现给用户，减少用户等待时间，可以借助script标签的3个属性来实现：

async：表示立即请求脚本文件，但不阻塞 GUI 渲染引擎，而是文件加载完毕后阻塞 GUI 渲染引擎并立即执行文件内容。

defer。立即请求脚本脚本，但不阻塞 GUI 渲染引擎，等到解析完 HTML 之后再执行文件内容。

HTML5 标准 type，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行。

所以可以得知，采用defer 属性以及 type="module" 情况下能保证渲染引擎的优先执行，从而减少执行文件内容消耗的时间，让用户更快地看见页面（即使这些页面内容可能并没有完全地显示）。除此外还要知道，当渲染引擎解析 HTML 遇到 script 标签引入文件时，会立即进行一次渲染，这就是为什么会把引用JavaScript 代码的 script 标签放入到 body 标签底部。

link 标签：通过预处理提升渲染速度

在我们对中大型项目进行性能优化时，往往会对资源做减法（gzip压缩，缓存等）或除法（按需打包，按需加载），可是如果能想到 link 标签的 rel 属性值来进行预加载，也能加快页面的渲染速度。

dns-prefetch。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程（DNS查询），从而减少时间损耗。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）

preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）

prefetch/preload。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。

prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）

搜索优化

你所写的前端代码，除了要让浏览器更好执行，有时候也要考虑更方便其他程序（如搜索引擎）理解。合理地使用 meta 标签和 link 标签，恰好能让搜索引擎更好地理解和收录我们的页面。

meta 标签：提取关键信息

通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果。

例如，在百度中搜索“淘宝”，就会发现网站的描述信息，这些描述信息就是通过 meta 标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。

为了让搜索引擎更好地识别页面，除了描述信息description之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容，也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如 Google 引擎就会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索到的权重）。

当我们搜索关键字“安全购物”的时候搜索结果会显示淘宝网的信息，虽然显示的搜索内容上并没有看到“安全购物”字样，这就是因为淘宝网页面中设置了这个关键字。

对应代码如下：

<meta content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" name="keywords">

在实际工作中，推荐使用一些关键字工具来挑选，比如

Google Trends
https://trends.google.com/trends

站长工具
https://data.chinaz.com/keyword/

link 标签：减少重复

有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面，比如：

- https://baidu.com/a.html

- https://baidu.com/detail?id=abcd

那么在这些页面中可以这样设置：

<link href="https://baidu.com/a.html" rel="canonical">

这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域。

当然，要合并网址还有其他的方式，比如使用站点地图，或者在 HTTP 请求响应头部添加 rel="canonical"。

在线咨询

上一篇：IT兄弟连 HTML5教程 HTML5文字版面和编辑
下一篇：基于帝国CMS7.5版本编辑器代码高亮设置

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

第35节 浏览器对象模型BOM-JavaScript

您的项目需求

第35节浏览器对象模型BOM-JavaScript