游览器机制

2020-10-22

游览器渲染页面过程

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM Tree + CSSOM –> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

游览器缓存

强缓存和协商缓存

浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器
当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源
强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器
当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据

more >>

展开全文 >>

深入继承

2020-10-21

原型与继承

关于js继承及其相关

小思考

Function.prototype是空函数:

先要知道为什么: Function.prototype.__proto__ === Object.prototype
- 一切的始祖为null，null创造了Object.prototype。之后Object.prototype创造了Function.prototype。之后和函数相关的让Function.prototype去干，而原型相关的由Object.prototype自己干。
- 如果函数还是对象那一套原型链，构造函数的原型链会不好处理。因此所有函数的原型都是Function.prototype，即空函数
  1
  2
  3
  4
  5
  String.__proto__
  Object.__proto__
  Number.__proto__
  Function.__proto__
  functionXX.__proto__
- 而所有对象就是正常的原型链
- Object.constructor就是Function.constructor，因此Object与Function互为对方的实例
组合继承:
- 借用构造函数实现实例属性继承
  
  在子类构造函数中:父构造函数.call(this, 传参)
  1
  2
  3
  function SubType(){
  Sup.apply(this, arguments)
  }
- 赋值父实例给子构造函数原型实现原型属性和方法继承
  1
  2
  SubType.prototype = new SuperType;
  SubType.prototype.constructor=SubType;
more >>

展开全文 >>

PC端小结

2020-01-30

游览器滚动条样式

设置滚动条样式

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
  width: 4px;
  height: 4px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #FFF;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #AAA;
}

隐藏滚动条

.noscrollbar {
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
.noscrollbar::-webkit-scrollbar { width: 0 !important;}

滚动条hover效果，移入时才显示

/* 定义一个鼠标移入才显示滚动条的类 */
.hover-scroll::-webkit-scrollbar,
.hover-scroll::-webkit-scrollbar-track,
.hover-scroll::-webkit-scrollbar-thumb {
  visibility: hidden;
}
.hover-scroll:hover::-webkit-scrollbar,
.hover-scroll:hover::-webkit-scrollbar-track,
.hover-scroll:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

文件上传

input文件上传过滤只显示文本相关文件，设置accept="application/*"

展开全文 >>