网站开发员需要什么素质,网站如何做下一页,免费下载模板ppt,如何刷网站排名目录 浏览器概述
主流浏览器#xff1a;IE、Chrome、Firefox、Safari
Chrome
Firefox
IE
Safari
浏览器内核
核心职责
主流浏览器内核
JavaScript引擎
主流的JavaScript引擎
浏览器兼容性
浏览器渲染
渲染引擎的基本流程
DOM和render树构建
html解析
DOM
渲染…目录 浏览器概述
主流浏览器IE、Chrome、Firefox、Safari
Chrome
Firefox
IE
Safari
浏览器内核
核心职责
主流浏览器内核
JavaScript引擎
主流的JavaScript引擎
浏览器兼容性
浏览器渲染
渲染引擎的基本流程
DOM和render树构建
html解析
DOM
渲染树与DOM树的关系
布局
绘制
浏览器缓存
静态资源缓存-相关概念
静态资源缓存-影响因素
控制静态缓存
方式1html中的缓存配置
方式2容器缓存配置
缓存规划
LocalStorage
LocalStorageAPI
SessionStorage
比较LocalStorage和SessionStorage
Cookies 浏览器概述
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容并且让用户与这些文件交互的软件。
主流浏览器IE、Chrome、Firefox、Safari
Chrome
Chrome是一款由Google公司开发的网页浏览器该浏览器基于其他开源软件撰写目标是提升稳定性、速度和安全性并创造出简单且有效率的使用者界面。
Firefox
Mozilla Firefox中文俗称“火狐”正式缩写为Fx或fx非正式缩写为MF是一个自由及开放源代码的网页浏览器使用Gecko排版引擎支持多种操作系统如Windows、Mac OS X及GNU/Linux等。
IE
微软公司推出的一款网页浏览器。原称IE(6版本以前)和IE(7、8、9、10、11版本)简称IE。
Safari
Safari是苹果计算机的操作系统Mac OS中的浏览器使用了KDE的KHTML作为浏览器的运算核心。
浏览器内核
浏览器内核排版引擎、渲染引擎是浏览器的核心模块负责将网页代码转换成用户可见的页面。
核心职责
解析HTML/CSS ——构建DOM树和CSSOM树——合并成渲染树布局——计算每个元素的位置和大小绘制——将元素绘制到屏幕处理JavaScript部分内核包含独立 JS引擎
主流浏览器内核
内核是否开源 插件支持应用浏览器支持操作系统Trident否提供接口调用ActiveXIEwindowsGecko是多种协议授权发行包括MPL、GPL、LGPLNPAPIFirefoxwindowsMacLinux/BSDBlink是NPAPIChrome、OperawindowsMacLinux/BSDWebkit是遵循LGPL协议NPAPIChrome、SafariwindowsMacLinux/BSD JavaScript引擎
JavaScript引擎就是用来执行JS代码的。
主流的JavaScript引擎
V8引擎是一个JavaScript引擎。JavaScript程序在V8引擎运行速度媲美二进制程序。
V8引擎支持众多操作系统如windows、Linux、Android等。
浏览器兼容性
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题指网页在各种浏览器上显示效果可能不一致而产生浏览器和网页间兼容问题。
产生原因
网页浏览标准只规定了接口并没有接口实现的详细规范是的各浏览器对相同的功能使用了不同的实现方法。
浏览器版本实现上的差异老版本浏览器不支持新的技术。
浏览器渲染
渲染引擎的基本流程
解析生成DOM树渲染布局绘制
DOM和render树构建
html解析
词法解析将输入内容分割成大量标记的过程。可以理解为讲一段话分割成一个个的单词。
语法分析是应用语言的语法规则的过程。
DOM
解析器的输出“解析树”是由DOM元素和属性节点构成的树结构。
DOM是HTML文档的对象表示同时也是外部内容与HTML元素之间的接口。解析树的根节点是“Document”对象。
DOM与标记之间几乎是一一对应的关系。
渲染树与DOM树的关系
在WebKit中解析样式和创建呈现器的过程称为“附加”每个DOM节点都有一个attach方法附加是同步进行的将节点插入DOM树需要调用新的节点attach方法。
处理html和body标记就会构建呈现树根节点。这个根节点呈现对象对应于css规范中所说的容器block这是最上层的block包含了其他所有block。它的尺寸就是视口即浏览器窗口显示区域的尺寸。Firefox称之为ViewportFrame而WebKit称之为RenderView这就是文档所指向的呈现对象。呈现树的其余部分以DOM树节点插入的形式来构建。
布局
呈现器在创建完成并添加到呈现树时并不包含位置和大小信息。计算这些值的过程称为布局或重排。
布局是一个递归的过程。他从根呈现器开始然后递归遍历部分或所有的框架层次结构为每一个需要计算的呈现器计算几何信息。
绘制
在绘制阶段系统会遍历呈现树并调用呈现器的paint方法将呈现器的内容显示在屏幕上。绘制工作使用用户界面基础组件完成的。
和布局一样绘制也分为全局和增量两种。在增量绘制中部分呈现器发生了更改但是不会影响整个树。
浏览器缓存
缓存把数据或者内容放到能够更快访问的位置。
静态资源缓存-相关概念
概念浏览器把静态文件保留在本地的一种行为
内容包括html、JS、css、图片等文件
作用实现对静态资源更快的访问
静态资源缓存-影响因素
Expires用于设置静态资源的过期时间
Last-Modified/If-Modified-Since标示这个相应资源的最后修改时间
Etag/If-None-Matchweb服务器响应请求时告诉浏览器当前资源在服务器的唯一标识
控制静态缓存
方式1html中的缓存配置
meta http-equivexpires contentMon,16 July 2025 00:00:00 GMT /用于这顶网页的到期时间一但过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式。
meta http-equivPragma contentno-cache /用于设定禁止浏览器从本地机的缓存中调阅页面内容设定后一但离开网页就无法重新从Cache中调出。
方式2容器缓存配置
以nginx为例进行配置配置文件地址nginx\conf\nginx.conf 缓存规划
资源类型是否缓存缓存时间html是协商缓存自研js是30天自研css是30天图片是30天第三方js、css是180天
HTML做成协商缓存即每次都去服务端咨询是否有更新。
所有外联的JS、css都增加文件hash戳当文件内容变化时此文件后缀也变化变化后的文件总是从服务端重新读取。
LocalStorage
LocalStorage时HTML5的一种本地缓存方案。主要用于储存一些体积较大的数据。
LocalStorage有大小限制各个浏览器限制不同子啊2-5M之间
LocalStorageAPI
增加/修改LocalStorage.setItemkeyvalue获取LocalStorage.getItemkey删除LocalStorage.removeItemkey清空LocalStorage.clear
SessionStorage
SessionStorage是HTML5的一种本地缓存方案。
与LocalStorage相似唯一的区别在于只对当前Session生效。
API与LocalStorage相同。
比较LocalStorage和SessionStorage
Web Storage生命周期作用域储存大小数据同步适用场景LocalStorage永久存储同源跨标签页共享通常在5MB-10MB同源窗口实时同步1.长期存储用户的偏好 2.登录状态等SessionStorage会话级存储仅限当前标签页通常在5MB-10MB不共享1.临时储存表单数据 2.单页应用状态等 Cookies
Cookies式网站为了辨别用户身份或Session跟踪而储存在用户浏览器端的数据。Cookies信息一般会通过HTTP请求发送到服务器端。
一条Cookies记录主要有键、值、域、过期时间、大小组成。一般用于保存用户的网站认证信息。
Cookies的最大长度为4KB
属性作用域说明name必需Cookie 的键名区分大小写value必需Cookie 的值需 URL 编码expires可选绝对过期时间Max-Age可选相对过期时间优先级高于expiresdomain可选控制 Cookie 的作用域名path可选限制 Cookie 的路径范围
