Recent Posts
JavaScript的诞生
JavaScript 的简介 JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。
历史 1995年,网景招募了布兰登·艾克,目标是把Scheme语言嵌入到Netscape Navigator浏览器当中。但更早之前,网景已经跟昇阳合作在Netscape Navigator中支持Java,这时网景内部产生激烈的争论。后来网景决定发明一种与Java搭配使用的辅助脚本语言并且语法上有些类似,这个决策导致排除了采用现有的语言,例如Perl、Python、Tcl或Scheme。为了在其他竞争提案中捍卫JavaScript这个想法,公司需要有一个可以运作的原型。艾克在1995年5月仅花了十天时间就把原型设计出来了。
最初命名为Mocha,1995年9月在Netscape Navigator 2.0的Beta版中改名为LiveScript,同年12月,Netscape Navigator 2.0 Beta 3中部署时被重命名为JavaScript,当时网景公司与昇阳电脑公司组成的开发联盟为了让这门语言搭上Java这个编程语言“热词”,因此将其临时改名为JavaScript,日后这成为大众对这门语言有诸多误解的原因之一。
微软采纳 JavaScript推出后在浏览器上大获成功,微软公司在不久后就为Internet Explorer 3浏览器推出了JScript,以与处于市场领导地位的网景产品同台竞争。JScript也是一种JavaScript实现,这两个JavaScript语言版本在浏览器端共存意味着语言标准化的缺失,发展初期,JavaScript的标准并未确定,同期有网景的JavaScript,微软的JScript双峰并峙。除此之外,微软也在网页技术上加入了不少专属对象,使不少网页使用非微软平台及浏览器无法正常显示,导致在浏览器大战期间网页设计者通常会把“用Netscape可达到最佳效果”或“用IE可达到最佳效果”的标志放在主页。随着Internet Explorer 4的发布,微软引入了动态HTML的概念,但语言实现和不同专有化的文档对象模型的差异仍然存在,成为网络上普及使用JavaScript的阻碍。
标准化 1996年11月,网景正式向ECMA(欧洲计算机制造商协会)提交语言标准。1997年6月,ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262。JavaScript成为了ECMAScript最著名的实现之一。
read more
Simple_url
URL的简单基础知识 URL 包含哪几部分 URL 全称是Union Resource Location,包括了:
协议 域名 端口 路径 查询参数 锚点 协议 网络协议是通信计算机双方必须共同遵从的一组约定,常用的有TCP/IP,基于此封装的上层协议有HTTP/HTTPS
域名 IP的别称
端口 一台机器提供的不同服务
路径 访问资源在服务器的地址路径
查询参数 访问资源的自定义选择参数
锚点 前端显示的资源定位,不传给服务器
DNS DNS 全称是Domain Name Server,域名解析服务,使用 nslookup 命令可以查到DNS记录的生存时间还可以指定使用哪个DNS服务器进行解释
IP 功能是
定位一台设备 封装数据报文,跟其他设备交流 域名 IP与域名的关系 一个域名可以对应不同的IP
负载均衡,防止一台机器扛不住
一个IP可以对应不同域名
共享主机,资源不足才这么使用
加了www的域名 www.域名和域名不是同一个域名,比如:com是顶级域名,域名.com是一级域名,www.域名.com 二级域名
read more
CSS知识篇
这篇主要介绍浏览器的渲染原理和CSS动画。
浏览器渲染原理 渲染树构建、布局及绘制 整个过程可以概括为根据 HTML 和 CSS 输入构建了 DOM 树和 CSSOM 树,再将CSSOM 树和 DOM 树合并成渲染树,然后用于计算每个可见元素的布局,并输出给绘制流程,将像素渲染到屏幕上。
简要概述了浏览器完成的步骤:
处理 HTML 标记并构建 DOM 树。 处理 CSS 标记并构建 CSSOM 树。 将 DOM 与 CSSOM 合并成一个渲染树。 根据渲染树来Layout布局(文档流、盒模型、计算大小和位置),以计算每个节点的几何信息。 Paint绘制(把边框颜色、文字颜色、阴影等画出来)。 Compose合成(根据层叠关系展示画面)到屏幕上。 关于DOM 和 CSSOM 合并成一个“渲染树”,浏览器大体上完成了下列工作: 从 DOM 树的根节点开始遍历每个可见节点。
某些节点不可见(例如脚本标记、元标记等),因为它们不会体现在渲染输出中,所以会被忽略。
某些节点通过 CSS 隐藏,因此在渲染树中也会被忽略。 对于每个可见节点,为其找到适配的 CSSOM 规则并应用它们。 发射可见节点,连同其内容和计算的样式。 关于“布局”阶段 合并成一个“渲染树”的过程是计算了哪些节点应该是可见的以及它们的计算样式,但我们尚未计算它们在设备视口内的确切位置和大小—这就是“布局”阶段,也称为“自动重排”。
布局流程的输出是一个“盒模型”,它会精确地捕获每个元素在视口内的确切位置和尺寸:所有相对测量值都转换为屏幕上的绝对像素。
关于“绘制”阶段 将渲染树中的每个节点转换成屏幕上的实际像素。这一步通常称为“绘制”或“栅格化”。
执行渲染树构建、布局和绘制所需的时间将取决于文档大小、应用的样式,以及运行文档的设备:文档越大,浏览器需要完成的工作就越多;样式越复杂,绘制需要的时间就越长(例如,单色的绘制开销“较小”,而阴影的计算和渲染开销则要“大得多”)。
注意点:
visibility: hidden 与 display: none 是不一样的。前者隐藏元素,但元素仍占据着布局空间(即将其渲染成一个空框),而后者 (display: none) 将元素从渲染树中完全移除,元素既不可见,也不是布局的组成部分。 渲染树只包含渲染网页所需的节点。 布局更新样式包含布局、绘制、合成,布局和绘制有可能被忽略。 CSS 动画 主要方式有三种:
read more