前端零散知识点整理(四)

答案：CDN（Content Delivery Network，内容分发网络）是一种通过在网络各处部署节点服务器来提高用户访问速度和质量的网络技术。

• 工作原理：

  当用户发起一个请求时，首先会经过DNS解析，以获取目标服务器的IP地址。

  在使用CDN后，DNS解析过程中，CDN会作为一个中间人角色出现。它不会直接返回目标服务器的IP地址，而是返回一个CNAME别名记录，这个记录指向CDN的负载均衡系统。

  本地DNS会向CDN的全局负载均衡系统进行智能调度，调度过程会基于以下几点综合判定：

  用户IP地址：查表得知地理位置，找到相对最近的边缘节点。

  运营商网络：找相同网络的边缘节点。

  负载情况：找到负载较轻的节点。

  其他因素：节点的“健康状况”、服务能力、带宽等。

• 作用：

  通过将内容缓存到多个地理位置分散的边缘节点上，CDN可以显著减少用户到服务器的距离，从而加快内容加载速度。

  CDN还可以减轻源服务器的负载，提高网站的可用性和稳定性。

答案：前端优化是提高网页加载速度和用户体验的重要手段，以下是一些常见的优化方法：

• 减少HTTP请求：

  合并CSS和JavaScript文件，减少请求次数。

  使用CSS Sprites技术，将多个小图片合并成一个大图片，减少图片请求。

• 使用HTTP/2：

  HTTP/2支持多路复用，可以在一个TCP连接上同时发送多个请求和响应，减少连接建立的时间。

  HTTP/2还支持头部压缩，可以显著减少请求头的大小，提高传输效率。

• 使用服务端渲染：

  服务端渲染（SSR）可以在服务器端生成完整的HTML页面，然后将页面发送给客户端，减少客户端的渲染时间。

  SSR还可以利用服务器的计算能力，处理一些复杂的逻辑和数据。

• 合理放置静态资源：

  将静态资源（如CSS、JavaScript、图片等）放置在CDN上，可以加快资源的加载速度。

  静态资源应该尽量放在页面的底部，以便在页面内容加载完成后再加载这些资源，避免阻塞页面的渲染。

• 引入iconfont代替图片资源：

  使用iconfont可以将多个图标合并成一个字体文件，通过CSS控制图标的显示，减少图片请求的数量。

  iconfont还可以实现图标的缩放和颜色变化，提高图标的灵活性和可维护性。

• 善于使用缓存：

  利用浏览器的缓存机制，将常用的资源缓存到本地，减少重复请求的次数。

  可以通过设置HTTP响应头中的Cache-Control和Expires等字段来控制缓存的策略。

• 文件压缩和图片优化：

  对CSS、JavaScript等文件进行压缩，减少文件的大小，提高加载速度。

  对图片进行压缩和优化，如使用适当的图片格式、调整图片的尺寸和质量等。

• 减少重绘和重排：

  重绘（Repaint）是指当元素的颜色、背景、阴影等不影响布局的属性发生变化时，浏览器会重新绘制这部分元素。

  重排（Reflow）是指当元素的尺寸、位置或布局发生变化时，浏览器需要重新计算元素的布局，并重新绘制整个页面或页面的部分区域。

  可以通过优化CSS选择器的写法、避免频繁操作DOM、使用CSS3硬件加速等技术来减少重绘和重排的次数。

• 优化CSS选择器写法：

  避免使用通配符选择器（*）和深层嵌套的选择器，这些选择器会匹配大量的元素，导致性能下降。

  优先使用ID选择器（#id）和类选择器（.class），这些选择器的匹配效率较高。

  使用后代选择器（element element）和子选择器（element>element）时，要注意选择器的范围，避免匹配过多的元素。

答案：WebSocket是一种在单个TCP连接上进行全双工通信的协议，它可以在客户端和服务器之间建立一个持久的连接，允许双方随时开始发送数据。以下是WebSocket建连的过程：

• 客户端发起HTTP请求：

  客户端向WebSocket服务端发起一个HTTP请求，请求头中包含一些特殊的字段，用于协商升级协议。

  这些字段包括：

  Connection: Upgrade：表示要升级协议。

  Upgrade: websocket：表示要升级到WebSocket协议。

  Sec-WebSocket-Version: 13：表示WebSocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Version头，里面包含服务端支持的版本号。

  Sec-WebSocket-Key：一个由客户端随机生成的Base64编码的值，用于与服务端的Sec-WebSocket-Accept进行配对，提供基本的防护。

• 服务端响应协议升级：

  服务端收到客户端的请求后，如果同意升级协议，会返回一个HTTP响应，响应状态码为101 Switching Protocols。

  响应头中包含以下字段：

  Connection: Upgrade：表示协议已经升级。

  Upgrade: websocket：表示升级到WebSocket协议。

  Sec-WebSocket-Accept：服务端根据客户端的Sec-WebSocket-Key计算出的一个值，用于与客户端的Sec-WebSocket-Key进行配对验证。

• 后续数据交互：

  协议升级成功后，客户端和服务端就可以通过WebSocket连接进行全双工通信了。

  双方可以随时开始发送数据，数据以帧（Frame）的形式传输，每个帧包含一些元数据（如操作码、掩码等）和实际的负载数据。

答案：重绘（Repaint）和回流（Reflow）是浏览器渲染页面时的两个重要过程，它们会影响页面的性能和用户体验。以下是引发重绘和回流的一些常见手段：

• 引发回流的手段：

  添加或删除可见的DOM元素：这会导致页面的布局发生变化，从而触发回流。

  元素的位置发生变化：如通过CSS改变元素的margin、padding、border等属性，或者通过JavaScript改变元素的left、top等样式属性。

  元素的尺寸发生变化：包括外边距、内边框、边框大小、高度和宽度等属性的变化。

  内容发生变化：如文本内容的变化或图片被另一个不同尺寸的图片所替代。

  页面一开始渲染的时候：这是无法避免的，因为浏览器需要计算整个页面的布局。

  浏览器的窗口尺寸变化：因为回流是根据视口的大小来计算元素的位置和大小的。

  注意：回流必然会触发重绘，但重绘不一定需要回流。

• 触发重绘的的场景：

  颜色的修改：如改变元素的背景颜色、文字颜色等。

  文本方向的修改：如改变文字的书写方向或对齐方式等。

  阴影的修改：如改变元素的盒子阴影或文本阴影等。

• 触发BFC（Block Formatting Context）的方式：

  BFC是一个独立的渲染区域，只有属于同一个BFC的元素才会互相影响。触发BFC可以避免一些布局上的问题，如清除浮动、防止外边距合并等。

  触发BFC的方式包括：

  根元素，即HTML元素。

  浮动元素：float值为left或right。

  overflow值不为visible，为auto、scroll、hidden。

  display的值为inline-block、inline-table、table-cell、table、flex、inline-flex、grid、inline-grid。

  position的值为absolute或fixed。

通过了解这些前端零散知识点，可以更好地优化网页的性能和用户体验。