zoukankan      html  css  js  c++  java
  • 浏览器

    浏览器的核心

    • 渲染引擎:将网页代码渲染为用户视觉可以感知的平面文档
    • JavaScript解释器(又称JavaScript引擎):读取网页中的 JavaScript 代码,对其处理后运行

    渲染引擎

    网页处理,通常分成四个阶段:(并非严格按顺序执行)

    • 解析代码:HTML 代码解析为 DOM,CSS 代码解析为 CSSOM(CSS Object Model)
    • 对象合成:将 DOM 和 CSSOM 合成一棵渲染树(render tree)
    • 布局:计算出渲染树的布局(layout)
    • 绘制:将渲染树绘制到屏幕

    其中,渲染树转换为网页布局,称为“布局流”(flow);布局显示到页面的过程,称为“绘制”(paint)。两者均有阻塞效应。

    注意,重流(reflow)和重绘(repaint)不一定一起发生,重流必然导致重绘,重绘不一定需要重流。

    优化技巧

    • 使用documentFragment操作DOM
    • 缓存 DOM 信息
    • 使用 CSS class 一次性改变样式
    • 使用window.requestAnimationFrame(),因为它可以把代码推迟到下一次重流时执行,而不是立即要求页面重流
    • 使用虚拟DOM(virtual DOM)库

    window

    关于window对象的几条恒等式

    window.window === window
    window.self === window
    window.open().opener === window
    frames === window
    window.frames === window
    

    Cookie

    服务器保存在浏览器的一小段文本信息,每个Cookie的大小一般不能超过4KB

    • 分辨两个请求是否来自同一个浏览器
    • 保存状态信息:用户偏好,记录和分析用户行为
    • 对话(session)管理:保存登录信息等

    Cookie包含如下信息

    • Cookie 的名字
    • Cookie 的值(数据信息)
    • 到期时间
    • 所属域名(默认是当前一级域名)当前发送Cookie的域名的一部分
    • 生效的路径(默认是当前网址)必须为绝对路径

    浏览器的同源政策规定,两个网址只要域名相同和端口相同,就可以共享 Cookie。

    Cookie由HTTP协议生成,供HTTP协议使用

    • HTTP 回应:Cookie 生成
    • HTTP 请求:Cookie 发送

    浏览器向服务器发送Cookie时,Cookie字段是使用一行将所有Cookie全部发送;服务器向浏览器设置Cookie时,Set-Cookie字段是一行只设置一个Cookie。

    HttpOnly

    该属性指定该Cookie无法通过JavaScript脚本拿到,以下均不可:

    • Document.cookie属性
    • XMLHttpRequest对象
    • Request API

    Session

    Session是基于Cookie的持久化机制的一种会话机制。

    • Cookie由服务器设置,浏览器保存
    • 防篡改机制:Cookie添加签名
    • 安全起见,Cookie中只设置Session Id,具体的Session信息保存在服务器

    参考:Cookie/Session的机制与安全

    浏览器数据库

    客户端储存应该使用 Web storage API 和 IndexedDB

    Web Storage

    Storage接口用于脚本在浏览器保存数据。

    • 键值对:字符串
    • 文本格式
    • 限制大小2.5-10M

    遍历所有的键

    for (var i = 0; i < window.localStorage.length; i++) {
      console.log(localStorage.key(i));
    }
    

    注意,Storage事件在导致数据变化的当前页面的同一个域名的其他窗口触发。  

    IndexedDB

    浏览器提供的网页数据本地数据库 。

    • 键值对:对象仓库
    • 支持索引、事务
    • 存储空间大,支持二进制存储
    • 异步
    • 同域限制

    几个重要的对象

    • IDBRequest / IDBOpenDBRequest:数据库连接
    • IDBDatabase:数据库
    • IDBObjectStore:仓库对象,由 transaction().objectStore() 返回 
    • IDBTransaction:事务对象,异步操作数据库事务,所有的读写操作都要通过这个对象进行
    • IDBIndex:数据库索引

    注意,事务的执行顺序是按照创建的顺序,而不是发出请求的顺序。只有监听到事务的complete事件,才能保证事务操作成功。

    关于详细信息,请参见:IndexDB - 浏览器端数据库

    同源限制

    Same-origin policy,浏览器安全的基石。 

    • 保证用户信息安全,避免Cookie共享,防止恶意网站窃取数据

    非同源会有以下问题

    • 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
    • 无法接触非同源网页的 DOM
    • 无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)
    • 父窗口与子窗口无法通信

    对于完全不同源的网站,目前有两种方法,可以解决跨域窗口的通信问题

    • 片段识别符(fragment identifier)
    • 跨文档通信API(Cross-document messaging)

    [1]fragment identifier

    方法:破解

    window.onhashchange = checkMessage;
    function checkMessage() {
      var message = window.location.hash; /// 获取识别符
    }
    

    [2]. window.postMessage()  

    跨文档通信 API(Cross-document messaging),支持跨窗口通信。

    父窗口和子窗口都可以通过message事件,监听对方的消息:

    message事件的参数是事件对象event,提供以下三个属性。

    • event.source:发送消息的窗口
    • event.origin:消息发向的网址
    • event.data::消息内容
  • 相关阅读:
    Eclipse 插件Maven在使用 add dependency,找不到包,解决办法
    SimpleDateFormat是线程不安全的,切忌切忌!
    JNative 传递参数bug
    oracle存储过程递归调用
    oracle调用DLL
    telnet和Netstat使用
    notepad++搭配dev配置运行C++
    ubuntu第一次安装登陆密码不正确问题
    区分形参和实参
    爬虫2
  • 原文地址:https://www.cnblogs.com/wjcx-sqh/p/9222335.html
Copyright © 2011-2022 走看看