浏览器环境概述

• 参考资料
  • 浏览器环境概述

JS嵌入网页的方法

• <script>标签：代码嵌入网页
• <script>标签：加载外部脚本
• 事件属性：代码写入HTML元素的事件处理属性，比如onclick或者onmouseover
• URL协议：URL支持以javascript:协议的方式，执行JavaScript代码

网页加载流程

• 浏览器一边下载HTML网页，一边开始解析
• 解析过程中，发现<script>标签
• 暂停解析，网页渲染的控制权转交给JavaScript引擎
• 如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行
• 执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

阻塞效应

• 如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。
• 为了避免这种情况，较好的做法是将<script>标签都放在页面底部。这样即使遇到脚本失去响应，网页主体的渲染也已经完成了，用户至少可以看到内容，而不是面对一张空白的页面。
• 如果某些脚本代码非常重要，一定要放在页面头部的话，最好直接将代码嵌入页面，而不是连接外部脚本文件，这样能缩短加载时间。

动态加载脚本

['a.js', 'b.js'].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});
//or
(function() {
  var scripts = document.getElementsByTagName('script')[0];
  function load(url) {
    var script = document.createElement('script');
    script.async = true;
    script.src = url;
    scripts.parentNode.insertBefore(script, scripts);
  }
  load('//apis.google.com/js/plusone.js');
  load('//platform.twitter.com/widgets.js');
  load('//s.thirdpartywidget.com/widget.js');
}());

渲染引擎

• 渲染引擎
• 重流和重绘

window对象

• 在浏览器中，window对象指当前的浏览器窗口, 也是所有对象的顶层对象。
• JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。
• window对象属性
• window对象方法

window对象属性

• window.location 返回一个location对象，用于获取窗口当前的URL信息
• window.frames 返回一个类似数组的对象，成员为页面内所有框架窗口，包括frame元素和iframe元素。
• window.innerWidth 返回当前窗口中可见部分的宽度
• window.outerWidth 返回浏览器窗口的宽度，包括浏览器菜单和边框
• window.screenX 返回浏览器窗口左上角相对于当前屏幕左上角的水平距离
• window.pageXOffset 返回页面的水平滚动距离

window对象属性

• window.moveTo() 移动浏览器窗口到指定位置
• window.moveBy() 将窗口移动到一个相对位置
• window.scrollTo() 将网页的指定位置，滚动到浏览器左上角
• window.scrollBy() 将网页移动指定距离
• window.open() 新建浏览器窗口
• window.close() 关闭窗口
• window.print() 调出打印菜单

navigator对象

• window对象的navigator属性，指向一个包含浏览器信息的对象。
• navigator属性
• navigator方法

history对象

• 浏览器窗口有一个history对象，用来保存浏览历史。
• history属性
  • length
• history方法
  • back()：移动到上一个访问页面，等同于浏览器的后退键。
  • forward()：移动到下一个访问页面，等同于浏览器的前进键。
  • go()：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。
  • history.pushState() 用来在浏览历史中添加记录
  • history.replaceState() 修改浏览历史中当前纪录

URLSearchParams API

• has()：返回一个布尔值，表示是否具有某个参数
• get()：返回指定参数的第一个值
• getAll()：返回一个数组，成员是指定参数的所有值
• set()：设置指定参数
• delete()：删除指定参数
• append()：在查询字符串之中，追加一个键值对
• toString()：返回整个查询字符串
• keys()：遍历所有参数名
• values()：遍历所有参数值
• entries()：遍历所有参数的键值对

Cookie

• 服务器保存在浏览器的一小段文本信息

//JS操作cookies方法!  

//写cookies  
function setCookie(c_name, value, expiredays){  
    var exdate=new Date();  
    exdate.setDate(exdate.getDate() + expiredays);  
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
}  

//读取cookies  
function getCookie(name)  
{  
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");  
    if(arr=document.cookie.match(reg))  
        return (arr[2]);  
    else  
        return null;  
}  

//删除cookies  
function delCookie(name)  
{  
    var exp = new Date();  
    exp.setTime(exp.getTime() - 1);  
    var cval=getCookie(name);  
    if(cval!=null)  
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();  
}  
//使用示例  
setCookie('username','Darren',30)   
alert(getCookie("username"));

Web Storage

• 浏览器端数据储存机制
  • sessionStorage 保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空。
  • localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
• 操作方法
  • 存入/读取数据
  • 清除数据
  • 遍历操作
• storage事件

案例练习