前端知识点

 

. 常见图片格式，及其应用场景

图片格式 ----- 压缩方式 ------ 透明度 --------- 动画 ---------- 使用场景
JPG ----------- 有损压缩 ------ 不支持---------- 不支持-------- 照片，文章配图，广告图
PNG ----------- 无损压缩 ------ 支持 ------------ 不支持-------- 透明度，图标，简单背景
GIF ------------ 无损压缩 --------支持 ------------ 支持------------ 图标，小动画，表情包

有损压缩和无损压缩：

      有损压缩是对图像数据进行处理，去掉那些图像上会被人忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息对的数据量，又不会影响图像的还原效果。
      无损压缩原理是先判断图像上哪些颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空只需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。这里的无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。
      注意：PNG可以细分为三种格式:PNG8，PNG24，PNG32。
后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。
      另外，最新的一种图片格式webpg格式，这是谷歌（google）开发的一种旨在加快图片加载速度的太古拍你格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的而服务器宽带资源和数据空间。Facebook Ebay等知名网站开始测试并使用webp格式。但webP是一种有损压缩。相较编码JPEG文件，编码同样质量的webP文件需要占用更多的额计算资源。

. <b>和<strong>标签有什么区别

      <b>这个标签对应bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式/风格需求；
      <strong>这个标签意思是加强，表示该文本比较重要，提醒读者/终端注意。
总结：<b>为了加粗而加粗，<strong>为了表明重点而加粗。

. css隐藏属性及其特点

• display:none
  元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
• visibility:hidden
  和display:none的区别在于，元素在页面消失后其占据的空间依旧会保留着，所以它会导致浏览器重绘而不会重排。适用于那些元素隐藏后不希望页面布局会发生变化的场景。
• opacity:0
  将元素的透明度设置为0后，在我们用户眼中，这算是一种隐藏元素的诶办法。
  和visibility:hidden的一个共同点是元素依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
• 其他方法
  设置元素的position的left,top,bottom,right等，将元素移出至屏幕外。
  设置元素的position与z-index，将z-index设置成尽量小的负数。

浏览器渲染规则

浏览器渲染的整个流程：

 

image.png

 

浏览器的整个流程如上图所示：
1、首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。
2、然后浏览器的HTML解析器会将这个文件解析，并且构建成一颗DOM树。
3、在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就将控制权转让给JS解析器或者CSS解析器。
4、JS解析器或者CSS解析器解析完这个元素的时候，HTML又继续解析下一个元素，直到整棵DOM树构建完成。
5、DOM树构建完成之后，浏览器把DOM树种的一些不可视元素去掉，然后与CSSOM合成一颗渲染树（render）。
6、接着浏览器根据这颗渲染树（render）计算出各个节点（元素）在屏幕的位置。这个过程叫做布局（layout），输出的是一颗layout树。
7、最后浏览器根据这颗layout树，将页面渲染到屏幕上去。

WebGL概述

WebGL（全写 Web Graphhics Library）是一种3D图形协议，这种绘图技术标准允许把JavaScript和OpenGL ES2.0结合在一起，通过增加OpenGL ES2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据可视化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有3D结构的网站页面，甚至可以用来设计3D网页游戏等。
      WebGL完美地解决了现有的web交互三维动画的三个问题：第一，它通过HTML脚本本身实现web交互三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是统一的、标准的跨平台的OpenGL接口实现的。

JS的数据存储方式(sessionStorage、localStorage和cookie)

JavaScript有三种数据存储方式，分别是：
sessionStorage
localStorage
cookie
相同点：都保存在浏览器端，同源的
不同点：

• 传递方式不同

cookie数据始终保存在同源的http请求中携带(即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地存储。

• 数据大小不同

cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次HTTP请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。
sessionStorage和localStorage虽然也有存储大小，但比cookie大得多i，可以达到5M或更大。

• 数据有限期不同

sessionStorage:仅在当前浏览器窗口关闭之前有效，自然也就不可能持久保持。
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
*##### 作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面。
localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。

web Storage支持时间通知机制，可以将数据更新的通知发送给监听者。
web Storage的api接口使用更方便。

CDN加速原理

CDN的全称是Content Delivery NetWork，即内容分发网站。
CDN是一个经策略性部署的整体系统，从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均而产生的用户访问网站相应速度慢的根本原因。
CDN目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需内容，解决Internet网络拥塞状况，提高用户相应速度。

HTTP2.0相比较HTTP1.x有哪些变化？

• 二进制分帧层

二分制分帧层，是HTTP2.0性能增强的核心。
HTTP1.x在应用层已纯文本的形式进行通信，而HTTP2.0将所有的传输信息分割为更小的消息和帧，并对它们采用二进制格式编码。这样，客户端和服务端都需要引入新的二进制编码和解码机制。HTTP2.0并没有改变HTTP1.x的语义，只是在应用层使用了二进制分帧方式传输。

• 多路复用

在HTTP1.x中，如果客户端想发送多个并行的请求以及改进的性能，那么必须使用多个TCP连接，而且存在队首阻塞问题，严重影响数据的额传输效率。在HTTP2.0中，二进制分帧机制突破了这些限制，实现了多向请求和响应，客户端和服务器可以把HTTP消息分解为互不依赖的帧，然后乱序发送，然后在接收端重新组装，这样就可以完成了消息的传输。即只使用一个连接即可并行发送多个请求和响应。

• 服务器推送

HTTP2.0新增了一个强大的功能，就是它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。

• 头部压缩

HTTP1.x每一次通信（请求/响应）都会携带首部信息用于描述资源属性。HTTP2.0在客户端和服务端之间使用“首部表”来跟踪和存储之前发送的键-值对。首部表在连接过程中始终存在，新增的键-值对会更新到队尾，因此不需要每次通信都需要再携带首部。
HTTP2.0使用了首部压缩技术，压缩算法使用HPACK，可以让报头更紧凑，更快速传输，有利于移动网络环境。
HPACK基本原理：客户端和服务端分别缓存一份索引表，如果头部存在于索引表，则用对应的索引值；否则进行哈夫曼树编码，并加入索引表。