从今天起,我们重新认识浏览器(下)

来源 :中国信息技术教育 | 被引量 : 0次 | 上传用户:wk8954642
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  编者按:当今世界,信息技术日新月异,互联网正在改变社会和生活的方方面面,引领了社会产生新变革,创造了人类生活新空间。上网,已经像吃饭一样,成为人们每天不可或缺的“必修课”。当我们已经习惯了打开浏览器,输入网址就能轻松连接世界的时候,是否有过疑惑:这个小小的浏览器是如何将我们“带”到世界的各个角落?浏览器的运行机制是什么?浏览器还有哪些新玩法?相信会有很多读者也会对此感兴趣,本期我们继续带领大家重新认识浏览器。
  主持人:
  倪俊杰 浙江省桐乡市凤鸣高级中学
  嘉 宾:
  刘宗凡 广东省肇庆市四会中学
  邱元阳 河南省安阳县职业中专
  杨 磊 天津市第五中学
  虞颖健 浙江省海宁市第一中学
  徐小波 浙江省玉环市环山小学
  在上一期中,我们介绍了浏览器的发展历史以及内核、缓存、开发语言等内容,让读者对浏览器有了更多的认识。本期,我们将继续深度揭秘。
  浏览器的工作原理
  倪俊杰:上期我们介绍了浏览器的组成结构,但未对浏览器的工作原理展开说明,先请各位嘉宾就此为读者做个介绍。
  徐小波:浏览器的主要工作是与Web服务器沟通,从Web服务器上不仅获取网页和各种类型的资源(文本、图片或其他类型的资源),最后还要在浏览器中显示。比如,当你要访问百度网站,需要在浏览器地址栏中输入网址(www.baidu.com),浏览器先从DNS服务器(是进行域名和与之相对应的IP地址转换的服务器)上查询到百度网站的IP地址(115.239.211.112),有了IP地址,你的浏览器会打开一个TCP连接到百度服务器,服务器返回IP地址对应的网页,最后浏览器会将网页渲染到屏幕上(如图1)。
  刘宗凡:现今网页设计思路是把网页分成三个层次:结构层(HTML超文本标记语言)、表示层(CSS层叠样式表)、行为层(JavaScript脚本语言)。浏览器从服务器上获取的文件包括HTML文件、CSS文件、JavaScript文件以及各种类型的媒体资源(图片、视频、音频等)。其中,HTML决定网页的结构和内容,CSS设定网页的表现样式,JavaScript控制网页的行为。其实浏览器先会渲染不含内容的HTML基本框架;然后会检查HTML标签,发出GET请求以获取页面上的额外元素,如图片、CSS样式表、JavaScript文件等,这些静态文件会被浏览器缓存,因而当你下次访问这个页面时,浏览器不需要再次请求;最終,网页出现在你的浏览器里。
  邱元阳:既然谈到了浏览器的工作原理,我们也不妨了解一下浏览器的开发者工具。每一款现代网络浏览器都包含一套强大的开发者工具套件。开发者工具是一套内置在浏览器中的Web开发和调试工具。使用开发者工具可以重演、调试和剖析网站。这套工具可以检查当前加载的HTML、CSS和JavaScript,显示每个资源页面的请求以及载入所花费的时间。它不仅是Web前端工程师用来调试网页代码的利器,也是我们获取网页资源的“瑞士军刀”。
  开发者工具内置在浏览器的子窗口中,在Chrome浏览器中有三种方式可以打开它:一是快捷键,F12;二是右键菜单,在网页中“右键单击”,并从弹出的菜单中选择“检查”;三是菜单栏,“菜单”“更多工具”“开发者工具”(如图2)。在打开的开发者工具中包含以下标签:Elements(元素面板)、Console(控制台面板)、Sources(源代码面板)、Network(网络面板)、Timeline(时间轴面板)、Profiles(分析面板)、Application(资源面板)、Security(安全面板)、Audits(监察面板)。
  倪俊杰:看样子开发者工具的功能是很强大的,那我们可以如何使用呢?
  徐小波:确实,利用好开发者工具,可以获取很多有价值的信息。接下来,我以Sources和Network这两个面板为例做个介绍。
  1.利用“Sources”面板,禁用JavaScript,获取文本信息
  JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。网站开发者编写JavaScript脚本,给用户获取网页上的文本信息造成障碍,集中体现在以下两个方面:①禁止复制文本信息。比如,百度文库禁止用户直接复制网页文本,可以通过开发者工具“Sources”面板,禁用网页JavaScript事件,就可以复制自己想要的文本信息。②复制文本追加文字。比如,CSDN博客会在用户复制网页文本后追加“作者、来源、原文链接、版权声明”等文本信息,你只要在开发者工具“Sources”面板禁用网页JavaScript事件,就可以自由复制文本信息。禁用网页JavaScript事件的具体方法如下:首先,在浏览器中打开开发者工具(F12),在“Sources”面板中找到“Settings”选项,在“Preferences”找到“Debugger”,最后在“Disable JavaScript”选项前打上勾,刷新页面后就可以复制文本信息(如图3)。
  2.使用“Network”面板,获取多媒体资源
  除了文本信息,网页上的音频、视频等资源也可以用开发者工具“Network”面板获取。比如,音视频资源获取的具体方法如下:首先,在浏览器中打开开发者工具(F12),打开“Network”面板,重新刷新页面后,在“Requests Table”(请求列表)就会列出页面上所有的资源信息(等到音视频完整缓存后),在“Filters”(过滤器)中选择“Media”,在“Requests Table”中只列出音频和视频等媒体资源,双击“Name”列的文件名,在新标签网页中预览媒体文件,确认无误后“右键”“另存为”即可保存(如图4)。(注:有些网站做了加密,用此方法无效。)   浏览器插件
  倪俊杰:在网络上下载音视频是很多一线老师的需求,通过开发者工具面板的确能达到目的,但方法未免有些烦琐。各位嘉宾还有其他方法吗?
  刘宗凡:使用浏览器插件也可以很方便地下载音视频。Chrome作为市场占有率很高的浏览器,以极速启动、简洁大方、浏览速度快、稳定性好、功能强大等优点深受大众喜爱。不过第一次打开浏览器时,更多的人是一脸茫然:几乎一片空白的页面,让人无所适从。其实,Chrome浏览器最大的优势,在于它的海量插件。为了扩展它的功能,很多公司或个人开发了很多插件,来实现普通浏览器实现不了的功能。单击Chrome右上角三个点按钮,选择“设置”,然后在左上角单击三个短横线按钮,找到“扩展程序”,就可以在上边的“搜索扩展程序”栏中输入想要实现的功能,找到相应插件。打开扩展程序页面的第二个方法是在浏览器地址栏输入“chrome://extensions”,然后回车就可以了。如果我们无法访问谷歌服务器,还可以在国内网站下载、离线安装。目前国内很多网站都提供了大量插件。
  第一种安装方法:下载好的插件扩展名是“crx”。我们先打开Chrome“扩展程序”页面,从资源管理器将crx文件直接拖到这个页面,左下角将出现一个警告窗口(如图5)。单击“继续”,一般来说就可以正常安装好了。
  但是,也有些插件在安装时出现如上页图6的提示,说明用这种办法安装是失败了。
  第二种安装方法:如果第一种安装方法失败了,我们可以通过修改参数来安装。打开“chrome://flags/#extensions-on-chrome-urls”页面,将最上面的“Extensions on chrome://URLs”项后面的“Disabled”改为“Enabled”,重启浏览器,再用第一种方法来安装,如著名的“油猴”插件,只要点击“添加扩展程序”按钮(如图7),就可以正常安装了。但是用这种方法安装的插件有可能不能正常使用,如广告拦截插件“Adblock Plus”。
  第三种安装方法:如果第二种方法仍然失败了,那我们还可以尝试一下开发者模式来安装。下载的插件扩展名为.crx,我们将其改为.zip。如果看不到扩展名,在资料管理器的“组织-文件夹”和“搜索选项-查看”中,将“隐藏已知文件类型的扩展名”前选项去掉就可以修改了。修改后将有一个警告窗口,点击“是”,再用解压缩软件将其解压缩到某个文件夹中。
  打开“扩展程序”页面,单击右上角“开发者模式”开关,左上角将出现三个选项(如图8)。点击“加载已解压的扩展程序”,选中刚才解压缩的文件夹,再单击“确定”,一般插件都可以安装好了。
  杨磊:Chrome浏览器有很多有用的插件,比较典型的有广告拦截类、多媒体下载类、超级插件类。
  广告拦截类。Adblock Plus(用第三种方法安装)是一款著名的广告拦截插件,效果非常好。正常安装以后就能帮你拦截广告了。当然,我们单击“Adblock Plus”图标再单击“设置”,可以让“Adblock Plus”更好地为我们服务(如图9)。类似插件还有uBlock Origin、AdBlock(和Adblock Plus不是同一个插件)等。
  多媒体下载类。现在因为国内版权意识觉醒,想在网上下载一首歌变得不是那么容易了。“音视频下载”是国内开发的一款下载插件,当我们在网上听一首歌时,只要点击它的图标,就可以自动将其下载好,目前支持主流的音乐网站,如QQ音乐、网易云音乐、酷狗音乐等。除了可以下载音乐,这个插件也能下载大多数网站的视频,是我们下载音视频的利器。类似的插件还有猫抓(视频下载神器)、Video download helper等。
  超级插件类。油猴(Tampermonkey)不是一个普通插件,它是一个用户脚本管理器,更像是一个容器。安装了油猴以后,它并没有什么功能,必须有相应的脚本才能起作用。我们下载相应的油猴脚本,点击浏览器上的油猴按钮,然后再打开“实用工具”页面,根据下载的脚本类型,在“压缩包”或“文件”下选择“导入”后面的“选择文件”按钮,将其导入,这个脚本就开始起作用了(如上页图10),如百度网盘直接下载、破解VIP会员视频限制直接播放、解除网页限制、百度广告彻底清除、网易云音乐高音质支持、下载、斗鱼熊猫工具箱等,它极大地方便了我们获取网络上的资源。
  邱元阳:Chrome浏览器之所以在全球最受人们追捧,市场占有率一直在60%左右,最关键的就是它有良好的生态圈,丰富的插件满足了绝大多数人的需要,从抓图、翻译、PDF格式转换、网盘加速、在线视频去广告、购物比价、看图搜片等,只有我们想不到的,没有插件办不到的事。以上几个插件只是让我们了解了插件的强悍功能,要完成更多的任務,可以去找相应的插件。
  当然,如果你嫌Chrome插件离线安装麻烦,也可以使用国内Chrome核心的浏览器,如360极速浏览器、猎豹浏览器、搜狗高速浏览器等,它们均可以像Chrome那样离线安装所有Chrome插件,更重要的是它们都提供了插件市场,可以在线安装,操作非常简便,更有一些符合国情的功能,当然丰富性和Chrome是不能相提并论的。作为另一个市场占有率非常高的浏览器Firefox,插件同样琳琅满目。浏览器作为一个平台,甚至可以起到操作系统的作用,曾经有厂商就出产了基于Firefox的手机,可见浏览器厂商的野心。
  用Python开发浏览器
  倪俊杰:浏览器的技术虽然复杂,但并不是高不可攀。我们自己也可以开发一个简易浏览器。
  虞颖健:PyQt是跨平台的C 图形用户界面应用程序开发框架Qt的Python封装,通过PyQt能够编写Python代码来开发基于Qt的图形化用户界面应用程序。在PyQt5的QtWebEngineWidgets名称空间下有一个QwebEngineView组件,使用它可以用来浏览网页。QwebEngineView组件基于Google的Chromium项目,其采用的浏览器引擎是WebKit。   如果仅仅是想使用QWebEngineView组件来浏览网页,可以使用如下的代码:
  from PyQt5.QtWebEngineWidgets import QWebEngineView
  browser = QWebEngineView()
  browser.load(QUrl("https://www.baidu.com"))
  browser.show()
  第1行代码从QtWebEngineWidgets名称空间导入QWebEngineView,第2行代码初始化一个QWebEngineView的实例,第3行代码使用QWebEngineView实例上的load方法加载百度首页,第4行代码显示QWebEngineView的浏览器。
  运行界面如上页图11所示。
  这种方式可以查看网页,但是只能采用编码的方式来打开指定地址的网页,没有一般浏览器的地址栏输入网址浏览网页功能,也没有前进、后退、刷新等功能。接下来我们使用QwebEngineView来实现一个简单的浏览器。PyQt5的布局代码如下:
  btn_prev = QPushButton(’前进’) #前进按钮
  btn_next = QPushButton(’后退’) #后退按钮
  btn_reload = QPushButton(’刷新’) #刷新按钮
  btn_go = QPushButton(’转到’) #转到按钮
  url_address = QLineEdit() #地址栏
  hbox = QHBoxLayout() #水平布局添加上面的控件
  hbox.addWidget(btn_prev)
  hbox.addWidget(btn_next)
  hbox.addWidget(btn_reload)
  hbox.addWidget(url_address)
  hbox.addWidget(btn_go)
  vbox = QVBoxLayout() #垂直布局
  vbox.addLayout(hbox) #上面是按钮和地址栏
  browser = QWebEngineView()
  vbox.addWidget(browser) #下面是浏览器
  main_win = QWidget()
  main_win.setLayout(vbox)
  main_win.show()
  运行程序,可以看到如上页图12所示的界面,浏览器已经嵌入到应用程序中,但目前这些按钮还是无效的。下面我们为浏览器加入转到地址栏输入的代码:
  def goto():
  browser.load(QUrl(url_address.text()))
  btn_go.clicked.connect(goto)
  我们定义了一个函数goto,这个函数调用了QwebEngineView的load方法,然后“转到”按钮的点击信号绑定到了goto函数上。这样,当点击这个“转到”按钮时,就会打开地址栏中的网址。
  我们再依次添加前进、后退、刷新的代码:
  def reload():
  browser.reload()
  btn_prev.clicked.connect(goto)
  def prev():
  browser.forward()
  btn_reload.clicked.connect(prev)
  def next():
  browser.back()
  btn_next.clicked.connect(next)
  QwebEngineView上的reload、forward、back方法分别实现了浏览器的刷新、前进、后退的功能。最后我们再加上这一句:
  url_address.returnPressed.connect(goto)
  当地址栏输入网址以后按回车,就能直接访问地址栏中的页面,大功告成!我们的简易浏覽器已经能够使用了。
  展望未来
  倪俊杰:在我们刚刚接触互联网的时候,使用的浏览器是微软的IE。但现在IE浏览器经常被人们嫌弃,很少人会用了。时过境迁,互联网发展的速度已经超过我们的想象。那么,以后的浏览器会怎么样呢?我们可以畅想一下。
  杨磊:我觉得未来浏览器将更加关注安全性能,更多主打网络安全的浏览器品牌将不断涌现。AI工具箱将成为未来浏览器的重要组成部分,如腾讯QQ浏览器,加入了识别植物花草、汽车、红球等功能,扩展了传统浏览器的浏览功能,为用户带来很好的上网体验。除了基本的浏览功能,更大的发展空间是游戏平台,未来游戏的主流平台将会以浏览器为基础,并且它的运行和加载速度比你想象的还要快。其实通过浏览器玩游戏并不是什么新鲜的概念。在最早期的时候,在互联网上就已经出现了简单的网页版Flash游戏。通过Flash技术我们可以实现那些经典的老街机游戏,像吃豆人、Pong、Tron等。后来,腾讯社交元素的加入增加了此类游戏对消磨时间的作用,像开心农场、抢车位这样的游戏虽然简单,但也是风靡一时。谷歌公司也在积极地推动基于Chrome新技术的各种实验计划。
  邱元阳:浏览器和Web应用发展迅速,它们或将成为移动操作系统的未来,而原生应用程序逐步消亡,Web应用和浏览器可以轻易地实现几乎所有我们想要完成的功能。随着中国移动互联网的蓬勃发展,本土的手机浏览器已经实现了弯道超车,在这方面,QQ手机浏览器正在逐步完善自身的生态闭环,将资讯、阅读、游戏、视频、微信热文、生活服务等几乎所有主流领域内容进行全部覆盖,从而将自身打造成为一个优质的内容聚合平台和内容消费的超级入口。UC浏览器则以“阿里大文娱”板块为依托,在应用分发、搜索、游戏、小说等方面形成了完整的布局,并趁势做起内容分发。布局更广的是搜狗手机浏览器。搜狗手机浏览器不仅整合了搜索、新闻资讯、小说、影视、直播等内容,还推出了智能翻译功能,以期成为内容消费和功能服务的超级入口。在其最近的“智能翻译”宣传稿件里,搜狗手机浏览器反复提及一句话:“无需额外下载其他APP,就可满足生活中的英文使用、小说阅读、娱乐休闲等各种需求。”目前来看,手机浏览器一定程度上已经担负起人工智能孵化器的角色。需要指出的是,这样的结合还停留在初级阶段,手机浏览器并不会因此发生质的改变。但我们也应该意识到,万里长征总需要迈出第一步。尽管手机浏览器距离“超级入口”还有一定的距离,但人工智能技术的发展已经实现了以流媒体形式在手机上直接浏览内容,搜狗手机浏览器的探索更是标志着手机浏览器与APP趋向融合……
  或许,我们已经站在了未来的新起点上:未来的手机上或许只有一个浏览器,但却更精彩!
其他文献
摘要:翻转课堂、高效课堂、特色课堂是近年来一线教师越来越关注的教学模式,怎样让特色课堂更具有个性和实效,是教师们一直思考的问题。本文结合“力行·立美”的办学理念,建构了“美”的文化主题资源,以悦漫E学为例阐述了如何构建特色课堂教学模式,提高教学质量。并且特色课堂与学科的整合,也开阔了学生的眼界和思路,提高了他们学习信息技术的健康素养和审美情趣,从而促进他们向素质教育多元化发展。  关键词:悦漫E学
摘 要:当前科学技术不断变革,中学的教学方式也要不断改革与创新,不断应用现代技术。地理教学中充分利用现代教育技术,有利于对地理知识进行更加生动详细的讲述。本文阐述了应用现代教育技术的优势,分析了当前地理教学中应用现代教育技术存在的问题,提出了具体的完善现代教育技术应用的措施,为完善目前的地理教学指出了新的思路。  关键词:现代教育技术 初中 地理教学 应用 措施  中图分类号:G632 文献标识码
在信息技术教育中,只强调技术能力而忽视艺术设计,影响了学生完整的信息素养的发展,因此中学信息技术教育理念必须提升到艺术设计层面。站在艺术设计视角,信息技术教育将有质的升华——从单纯的信息技能训练走向整体的信息素养积淀。我们必须在培养学生信息技术能力的同时,提高学生的设计意识,培养学生的创新能力。  北京景山学校信息技术教研组在新课标指引下,根据组内教师的特点,开设了“数字艺术家”特色课程,致力于探
电脑艺术设计是全国中小学电脑制作活动高中组和中职组的比赛项目之一。电脑艺术设计是运用图形图像处理软件、用电脑设计制作完成的原创作品,具体包括商标及符号标志设计、企业形象设计、产品包装设计、书籍装帧设计、展示艺术设计和工业产品设计。指导学生进行电脑艺术设计的应用软件有很多种,如CAD、Adobe Photoshop、Adobe Illustrator和CorelDRAW等。经实践发现,在电脑艺术设计
摘要:本文从霍尔三维结构的系统工程角度出发,构建工程造价软件课程信息化教学的三维结构,将整个复杂的信息化教学过程从时间维、逻辑维、知识维三个维度分阶段分步骤进行实施。研究实践提升了师生的信息化应用能力与专业技能水平,研究成果对相同相近专业具有一定的推广价值与借鉴意义。  关键词:三维结构;工程造价;信息化;教学  中图分类号:G434 文献标识码:A 论文编号:1674-2117(2018)15/
摘要:本文阐述了作者所在学校的健康制造虚拟仿真实训中心利用虚拟现实技术、云计算技术、网络技术等多元化信息技术,构建了虚实结合的实训教学环境,通过自主开发和技术引进相结合建设了丰富的虚拟仿真实训教学资源,深入探索了“以培养食品药品类职业技能人才为目标,支持实训教学、创新实践教学和探索教育规律为主线”的VR技术应用模式,为食品药品类学校实训教学和企业职业技能培训提供了良好支持,促进了学习者职业能力和职
不久前,内蒙古师范大学有位硕士生问我:“一般‘导学案’翻转课堂,都是给学生习题,微课程教学法为什么强调一定要给出问题?”这个问题问到了点子上。  用“导学案”给学生布置习题,让学生通过自主学习去尝试完成习题,是培养学生自主学习能力的最初尝试,美其名曰:先学后教。它曾经一改传统教学“满堂灌”之沉闷,给教育界吹来一阵清风。  但是,最初的尝试并不等于理想的境界。随着翻转课堂进入我国基础教育,人们发现,
信息鉴别是高中信息技术学科的重要教学内容,无论是2003年颁发的信息技术课程标准,还是2017年颁布的新课标,对其都有明确要求。2017年版课标指出,“信息意识是指个体对信息的敏感度和对信息价值的判断力”,具备信息意识的学生能够“采用有效策略对信息来源的可靠性、内容的准确性、指向的目的性作出合理判断”,即具有信息鉴别的能力。所谓信息鉴别就是对信息的识别与判定,指信息的接收者从一定的目的出发,运用已
近几年信息技术发展最为迅猛的,无疑是“手机”“平板电脑”和“无线网络”了。随着“移动终端 无线网络技术”的迅速普及,整个社会几乎以百米赛跑的速度进入了移动互联网时代。  无论是手机还是平板电脑,都充当了“万能数码设备”的角色,它们可以录音、拍照、录像、安装各种程序(APP),当然也可以录制微课。本期专栏,我们就重点探讨如何采用移动终端进行微课录制。  手机录制  手机,无疑是我们最常用的视频拍摄工
新技术与教育的不断融合,使得任何一位教师在适应新课程标准时都会面临一些挑战,而教师需要怎样的知识来应对这些挑战呢?关于这个问题,不同的时代有不同的回答。19世纪,研究者普遍认为教师拥有强大的内容知识是解决该挑战的关键。到了20世纪初,研究者开始转变自己的想法,不仅认为内容知识是重要的,同时也意识到了教学法的重要性。而到了20世纪末,他们提出了教师对教学的认识,不仅要关注教学内容和教学法,也要关注两