王卓文

来自CGTWiki
跳转至:导航搜索
Wzw.jpg

个人简历:


生于1997年12月2日,籍贯山东枣庄。

2015级  西安邮电大学  通信与信息工程学院          通信工程        本科生          CET6  495

2019级  北京邮电大学  信息光子学与光通信研究院    光学工程        硕士研究生

主要从事3D显示技术方面的研究和平台UI工程的实现。

Zhuowen Wang received her B.S. degree in communication engineering from Xi'an University of Posts and Telecommunications in 2019, and now is a Postgraduate Student in the Institute of Information Photonics and Optical Communications, School of Beijing University of Posts and Telecommunications. Her research interests include 3D display technologies, computer graphics and UI Programming.

Tel: 18810190537
Email: wangzhuowen1997@icloud.com

电脑配置:


操作系统 Windows 10 专业版 64位 ( 4.09.00.0904 )	
处理器	 英特尔 第四代酷睿 i7-4790 @ 3.60GHz 四核
主板	 技嘉 Z97X-Gaming 5 ( 英特尔 Haswell - Z97 芯片组 )
内存	 8 GB ( 金士顿 DDR3 1866MHz )
主硬盘	 金士顿 SA400S37240G ( 240 GB / 固态硬盘 )
显卡	 Nvidia GeForce GTX 970 ( 4 GB / Nvidia )
显示器	 三星 SAM0C1A S24E390 ( 23.5 英寸  )
声卡	 英特尔 英特尔 显示器音频 @ 英特尔 Haswell  高保真音频
网卡	 鈺硕 Killer E2200 Gigabit Ethernet Controller / 技嘉


更新日记

  • 6.04日更新了笔记 : 4.4 浏览器的缓存策略
  • 4.22日更新了笔记 : 4.3 JS笔记之this指向问题。
  • 4.15日更新了笔记 : 4.2 javascript中的原型与原型链
  • 4.09日更新了笔记 : 4.1 浏览器输入一个url到渲染的过程

笔记

  本笔记是在我学习浏览器和JavaScript的过程中,对重点知识点的整理总结。

浏览器输入一个url到渲染的过程

浏览器输入一个url到渲染的过程

  1. 首先进行DNS解析: 解析获取相应的IP地址
  2. 浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。
  3. 握手成功后,浏览器向服务器发送http请求。
  4. 服务器处理请求并返回 HTTP 报文(HTTP响应报文,包含一些状态码
  5. 浏览器解析渲染页面
  6. 断开连接:TCP 四次挥手


URL 到底是啥
Uniform Resource Locator。统一资源定位符,用于定位互联网上资源,俗称网址。

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。常见的协议有 http、https、ftp、file,其中最常见的类型是 http,而 https 则是进行加密的网络传输。

host - 主机名(http 的默认主机是 www)

domain - 定义因特网域名,比如 http://w3school.com.cn

port - 定义主机上的端口号(http 的默认端口号是 80)

path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

filename - 定义文档/资源的名称。

为什么要进行域名解析?

因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。

IP地址是纯数字的,相比域名,方便计算机处理,但不方便用户的输入和记忆等,所以,DNS 服务应运而生

什么是域名解析?

DNS 协议提供通过域名查找 IP 地址,或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器,我们的域名解析简单来说就是在 DNS 上记录一条信息记录。 浏览器如何通过域名去查询 URL 对应的 IP 呢?

  • 浏览器搜索自己的DNS缓存;
  • 若没有,则搜索操作系统中的DNS缓存;
  • 若没有,继续搜索路由器缓存
  • 若上述均失败,继续向ISP搜索DNS缓存(ISP 有专门的 DNS 服务器应对 DNS 查询请求。)
  • ISP 的 DNS 服务器还找不到的话,它就会向根服务器发出请求,进行递归查询。(DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址,然后再问.baidu 域名服务器,依次类推)

浏览器如何解析渲染页面?

1. 根据 HTML 解析出 DOM 树

      根据 HTML 的内容,将标签按照结构解析成为 DOM 树,DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点,再构建下一个兄弟节点。
      在读取 HTML 文档,构建 DOM 树的过程中,若遇到 script 标签,则 DOM 树的构建会暂停,直至脚本执行完毕。(脚本阻塞浏览器解析)

2. 根据 CSS 解析生成 CSS 规则树

    解析 CSS 规则树时 js 执行将暂停,直至 CSS 规则树就绪。
    浏览器在 CSS 规则树生成之前不会进行渲染。

3. 结合 DOM 树和 CSS 规则树,生成渲染树

    DOM 树和 CSS 规则树全部准备好了以后,浏览器才会开始构建渲染树。(防止css规则不 断改变,避免了重复的构建)
    精简 CSS 并可以加快 CSS 规则树的构建,从而加快页面相应速度。

4. 布局渲染树

    布局:通过渲染树中渲染对象的信息,计算出每一个渲染对象的位置和尺寸
    回流:在布局完成后,发现了某个部分发生了变化影响了布局,那就需要倒回去重新渲染。

5. 根据计算好的信息绘制页面

绘制页面像素信息

javascript中的原型与原型链

  • 什么是原型?

每一个javascript对象(除null外)创建的时候,都会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。


  • prototype

在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象。

所谓的prototype其实就是对象与对象的原型相关联的属性。

  • __proto__

这是每个对象(除null外)都会有的属性,叫做__proto__,这个属性会指向该对象的原型。

__proto__是实例指向原型的属性;

prototype是对象或者构造函数指向原型的属性;

  • constructor

每个原型都有一个constructor属性,指向该关联的构造函数。

实例cat1.constructor === Animal 也是 true。因为每一个对象都会从原型中“继承”属性。cat1中并没有属性constructor ,但是它的原型cat1.__proto__ 指向的是Animal.prototype,然而Animal.prototype原型中是有属性constructor的,于是cat1的constructor属性继承与原型中的constructor属性。

  • 原型链

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。这样就形成了原型链。

将原型的实例赋值给另一个对象,另一个对象再赋值给其他的对象,在实际的代码中对对象不同的赋值,就会形成一条原型链。

我们用去访问一个对象的属性的时候,这个属性既有可能来自对象本身,也有可能来自这个对象的prototype属性指向的原型。如何判断这个对象的来源呢?

  • hasOwnProperty方法
  可以判断一个属性是否来自对象本身

p1.hasOwnProperty("sex")》》存在则返回true,代表这个属性是实例自身的(也不似乎构造函数的) 通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的,但是不能判断是否存在于原型中,因为有可能这个属性不存在。

也即是说,在原型中的属性和不存在的属性都会返回fasle。

如何判断一个属性是否存在于原型中呢?

  • in 操作符

只要对象和原型中有一个地方存在这个属性,就返回true

alert("sex" in p1);

回到前面的问题,如果判断一个属性是否存在于原型中:

如果一个属性存在,但是没有在对象本身中,则一定存在于原型中。

  • 组合原型模型

原型模型适合封装方法,构造函数模式适合封装属性,综合两种模式的优点就有了组合模式。

原型模型创建对象的缺陷

原型中的所有的属性都是共享的。也就是说,用同一个构造函数创建的对象去访问原型中的属性的时候,大家都是访问的同一个对象,如果一个对象对原型的属性进行了修改,则会反映到所有的对象上面。

但是在实际使用中,每个对象的属性一般是不同的。》》适合封装方法,不适合属性


构造函数模型创建对象的缺陷

方法(属性值是函数的属性)

在构造函数中添加的方法,每个实例都有自己独有的一份,大家不会共享

这个特性对属性比较合适,但是对方法又不太合适。因为对所有对象来说,他们的方法应该是一份就够了,没有必要每人一份,造成内存的浪费和性能的低下。


  function Person() {
           this.name = "李四";
           this.age = 20;
           this.eat = function() {
               alert("吃完东西");
           }
       }
       var p1 = new Person();
       var p2 = new Person();
       //每个对象都会有不同的方法
       alert(p1.eat === p2.eat); //fasle 

所以在构造函数中封装属性,在原型对象中封装方法



JS笔记之this指向问题

全方位解读this

1. 全局对象中的this

全局对象中的this 指向他本身。也就是全局对象。

2. 函数中的this

在于两点:函数的调用者 和 区分是否独立调用

  • 如果函数被独立调用,则该函数内部的this,则指向undefined。但是在非严格模式中,当this指向undefined时,它会被自动指向全局对象。
  • 如果调用者函数,被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。


  function fn() {
   'use strict';
   console.log(this);
  }

  fn();  // fn是调用者,独立调用 指向undefined
  window.fn();  // fn是调用者,被window所拥有


3. 构造函数上的this

var p1 = new Person('Nick', 20);

当new操作符调用构造函数时,this其实指向的是这个新创建的对象,最后又将新的对象返回出来,被实例对象p1接收。因此,我们可以说,这个时候,构造函数的this,指向了新的实例对象,p1。

  通过new操作符调用构造函数,会经历以下4个阶段。 
  1. 创建一个新的对象;
  2. 将构造函数的this指向这个新对象;
  3. 执行构造函数的代码,为这个对象添加属性,方法等;
  4. 返回新对象

浏览器缓存

WEB缓存主要可以分为下面几类:

  • 客户端缓存
  • 服务端缓存 CDN缓存 代理服务器缓存
  • 数据库缓存

也可以分为两类:共享缓存和私有缓存。 共享缓存能够被多个用户使用,而私有缓存只能用于单个用户。浏览器缓存只存在于每个单独的客户端,因此它是私有缓存。

浏览器缓存一般指HTTP缓存,但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开 发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器(只有IE)可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。


其他浏览器缓存:cookie LocalStorage SessionStorage


HTTP缓存:强缓存、协商缓存


流程:浏览器发送请求前,会根据cache-control和expires判断是否过期,是否命中强缓存,如果命中,则直接从缓存中读取资源,不会发送请求到服务器。 当强缓存没有命中时,浏览器一定会向服务器发起请求。服务器会根据 Request Header 中的一些字段来判断是否命中协商缓存。如果命中,服务器会返回 304 响应,但是不会携带任何响应实体,只是告诉浏览器可以直接从浏览器缓存中获取这个资源。如果本地缓存和协商缓存都没有命中,则从直接从服务器加载资源。


615

615任务移交

交接人:刘彤彤

视频及文字资料已上传至百度网盘(永久有效)

提取链接:https://pan.baidu.com/s/1eB9-_j9f9dYspy0_wUL6Lg

提取码:lixi




王卓文:
标书任务要求:

  1.能够实现本机基本飞行任务人机交互界面的显示;
2.具备基本飞行任务人机交互界面与多任务人机交互界面的叠加显示,任务包括本机的机场起降、本机使用雷达探测任务;
3.提供多模式协同控制接口(多点触控、语音控制、视场变化等),并与人机交互界面关联

具体任务:

  1.在平台界面上新增一个飞行任务模块,在这个模块中设计交互界面(时间:三周)
【针对任务一,设计交互界面需考虑的任务有:任务荷载规划、本机的机场起降、飞行信息显示画面、航线规划画面、雷达信息显示画面】
【显示单元软件模块,需考虑:加载机场模型;提供飞机、坦克、船只、指挥所、基地三维模型;提供作战地形、自然环境、地形地貌的三维可视化显示和实时调度;多种切换】
2.在场景树那块新增一个任务列表项,保存相关的任务条目,并且条目支持打开功能,打开之后显示详细的任务信息(时间:一周)
3.任务信息的保存功能(时间:一周)




下周任务:

2020-08-17

1.复现WPF界面。(3—4天,叶韵菲和王宇测试)

2.视频替换算法的专利。(1-2天)

2020-08-25

1.视频替换算法的专利。(1-2天)

周报:


12.11号周报
1.完成开题报告。
2.在地球的全屏界面加入触控的功能键,绑定触发事件
6152.png
修复 全屏后,在任意处点击,悬浮界面会被覆盖的问题。
6151.png


11.02号周报
1.搭建开发环境,用CEF3实现了一个最简单的浏览器。
浏览器.png
2.学习CEF3开发。

3.通过解决报错,对教程: windows下CEF3开发环境搭建(上)的一些补充:

  • Cmake 生成时 选×64位。
  • 在工程上右键-》属性-》c/c++ -》代码生成 -》运行库改为(debug为MTD,release为MT)
  • 将cmake生成的libcef_dll_wrapper.lib拷进CEF3
  • 生成后事件的命令行

按教程配置后期事件时,报错。显示manifest 文件没有成功嵌入到exe内部
命令行报错.png
解决:.exe的路径改为绝对路径


10.26号周报
1.在平台添加“添加任务”分组,目前只有一个“航线规划”任务。将“航线规划”信息显示在场景树中,并实现读写xml功能。
添加任务.png

2.“航线规划”添加删除、重命名功能。
场景树显示.png

3.修复任务重命名后没有写入xml和 命名重复 报错的问题。
重命名.png

4.更换“航线规划”的图标。
修复路径问题(打开图片的属性,将“复制到输出目录”选中“始终复制”,将“生成操作”选择为“内容”,这样编译后,才会在debug目录下生成这个图标)。
路径报错.png
图片属性.png

5.尝试调用awesomium库仍未跑通。
无法解析.png


10.12号周报
1.调整数据可视化的图表
2.修改专利
3.了解615项目,添加了航线规划属性框(不用,等谭丞鸣先实现基本功能),和黄冠瑞初步设计了人机交互界面。
4.新增任务列表项,保存相关的任务条目,并且条目支持打开功能,打开之后显示详细的任务信息;点击保存按钮,弹出保存成功,并自动关闭。(还未实现保存功能)


9.07号周报
将悬浮界面嵌入平台


8.31号周报

  • 完善悬浮界面(背景图因美工出差还未完成)。
悬浮界面.png











  • 阅读并整理三维视频融合的文献。


8.23周报

复现WPF界面


8.16周报

整理了一部分平台常用的代码片段。


3.9周报
继续学习C++视频

3.15周报
1.调研主流的WebGL技术
文件:对WebGL 的调研.pptx
2.学习WVVM框架
3.继续解决时间控制的界面

3.22周报
1.配合谭丞鸣,完成时间控制的属性框。
2.学习WebGL和wvvm模式。

3.29周报
1.实现cesium 加载数字瓦片。

2.学习HTML。


4.06周报
1.时间控制输入框加入滑块。
2.在W3school平台,学完了HTML基础教程。
文件:HTML笔记.docx


4.12周报


4.20周报

  • 阅读了论文《基于WebGIS无线视频监控系统研究》,准备组会分享。

学习笔记:文件:基于WebGIS无线视频监控系统研究.pptx


4.21周报


5.06周报

cesium视频遇到的问题:npm报错和欧拉角初始度问题

百度云链接:https://pan.baidu.com/s/12OtpvRwKTHK3GC03-BykhQ

提取码:i92i

附npm安装教程

两月计划:

1.完成实验室任务。根据具体任务进行具体学习和扩展。

2.学完前端基础知识(html 、css、javascript)

3.读论文,学习论文写作,研究小论文的方向。



2020年度总结:

工作总结:

1.根据平台SVN,配置SVN-VS插件,添加禁止提交和更新目录。(3月)

2.调研主流的WebGL技术。(3月)

3.搭建RTSP流媒体服务器。(6月)

4.调整数据可视化的WPF界面,并将其嵌入三维平台。(7月)

5.创建WPF悬浮界面,并将界面嵌入三维信息平台(8、9月)

6.在连云港出差的20天中,完成了一篇专利《视频与三维场景融合的方法、装置、电子设备和存储介质》。(9月)

7.参与615项目:为平台添加“航线规划”属性框,将“航线规划”信息显示在场景树中,并实现读写xml,删除重命名功能(10月);在全屏界面添加触控的功能键(12月)

8.用CEF3实现了一个简单的浏览器。(11月)

9.实现基于OpenGL渲染CEF浏览器。(12月)

10.基于OSG渲染CEF到纹理。(进行中)

占用资源:

1.一个学硕名额

2.一个实验室工位

3.一台台式机

自我评价:

1.功劳和苦劳约等于占用实验室资源。

2.上半年在家工作效率较低;下半年在老师的提点下,逐渐意识到了自己的学习和沟通的主动性不够,正在努力调整。


2019年度总结:

(1)解决启动界面的二次闪动问题。

解决闪动代码
  • 有效代码:25行

(2)实现WPF内嵌unity,并实现两者的通信。方法是嵌入unity生成的exe程序,替换原有的UnityWebPlayer插件。

嵌入位置
WPF与unity通信的代码
winform内嵌unity.exe
  • 有效代码:227行