随笔分类 - 前端性能优化成神之路
摘要：什么是预加载和为什么要用预加载 资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。 预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。提升用户体验 为什么要用预加载：在网页全部加载之前，对一些主要内容进行加载，
阅读全文
摘要：首先来看一下前端性能优化所涉及的层面有如下四个：网络层面，构建层面，浏览器渲染层面，服务端层面 具体的优化点有：资源合并与压缩，图片编码原理和类型的选择，浏览器的渲染机制，懒加载与预加载，浏览器存储，缓存机制，PWA，Vue-SSR等等 首先来了解一下web前端的本质 web前端的本质是一种GUI软
阅读全文
摘要：前述 对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟
阅读全文
摘要：什么是HTTP压缩 HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法。 HTTP采用通用的压缩算法，比如gzip来压缩HTML,Javascript, CSS文件。 能大大减少网络传输的数据量，提高了用户显示网页的速度。当然，同时会增加一点点服务器的开销。 本文从HTTP协议
阅读全文
摘要：图片PNG8/PNG24/PNG32之间的区别 PNG8——256色 + 支持透明 PNG24——2^24色 + 不支持透明 PNG32——2^24色 + 支持透明 不同格式的图片常用的业务场景 jpg有损压缩，压缩率高，不支持透明，大部分不需要透明图片的业务场景 png支持透明，浏览器兼容好，大部
阅读全文
摘要：浏览器的一个请求从发送到返回都经历了什么 下面是一个请求的一个流程图 用户首先在浏览器输入请求的url地址，浏览器内部的核心代码会将这个url进行拆分解析，最终将domain发送到DNS服务器上，DNS服务器会根据domain去查询相关对于的ip地址，从而将IP地址返回给浏览器，浏览器持有ip地址后
阅读全文
摘要：浏览器渲染的工作流程 浏览器的工作原理。以Webkit引擎的工作流程为例，浏览器加载一个HTML页面后进行如下操作 解析HTML【遇到<img>标签加载图片】 —> 构建DOM树 加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树 加载javascript —> 执行javas
阅读全文
摘要：反对告诉对方
阅读全文
摘要：资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。 这些通信和服务的开销都很
阅读全文
摘要：图片懒加载（当然不仅限于图片，还可以有视频，flash）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载所有的图片，从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法，就是你不想看就不给你看，我也懒得加载出来，懒得去请求。通俗的说就是你不要就不给你，怎
阅读全文
摘要：浏览器渲染阻塞与优化 什么是阻塞：在页面中我们通常会引用外部文件，而浏览器在解析HTML页面是从上到下依次解析、渲染，如果<head>中引用了一个a.js文件，而这个文件很大或者有问题，需要2秒加载，那么浏览器会停止渲染页面（此时是白屏显示，就是页面啥都没有），2秒后加载完成才会继续渲染，这个就是阻
阅读全文
摘要：1 Cookie的解释 2 Session的解释 3 Session与Cookie的区别 Cookie的数据保存在客户端浏览器，Session保存在服务器 服务端保存状态机制需要在客户端做标记，所以Session可能借助Cookie机制 Cookie通常用于客户端保存用户的登录状态
阅读全文
