前端性能优化

最新推荐文章于 2024-08-22 08:50:27 发布

BYE＆

最新推荐文章于 2024-08-22 08:50:27 发布

阅读量131

点赞数

分类专栏：总结

原文链接：https://www.jianshu.com/p/2e69e9891c67

版权

总结专栏收录该内容

17 篇文章 0 订阅

订阅专栏

基本问题

在这里插入图片描述
http层面的优化

DNS预解析：
DNS实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。每次DNS解析在200ms以下，一般采用DNS Prefetch的一种DNS预解析技术，当浏览网页时，会在加载网页的过程中对域名进行解析缓存，这样在单击当前页面中的i链接时就无需进行DNS解析，减少用户等待时间，提高用户体验

 <LInk rel="dns-prefetch" href="www.baidu.com" />
 //只有部分浏览器支持

TCP连接
采用http2，可以复用tcp通道，采用二进制格式而非文本格式，使用报头压缩，http2降低了开销，支持cache push
浏览器并发
基于端口跟线程切换开销，浏览器不可能无限的并发请求，chrom的并发是6，超过限制数目的请求就会被阻塞；
对于某些静态资源，图片等等，我们对url分散处理，不同的资源域名
http请求次数
减少http请求次数，将多个请求合并成同一个http的开销
webpack
充分利用webpack提供给我们的能力，利用DllPlugins等插件，对代码进行优化，文件的分割和合并，公共代码的提取，长缓存等策略
http压缩
采用Czip压缩：HTTP压缩就是缩小体积为目的，对http内容进行重新编码的过程，原理是找出一些重负出现的字符串，临时替换他们，从而让整个文件变小，文件中代码的重复率越高，那么压缩的效率越高

缓存

浏览器缓存

强缓存和协商缓存

https://blog.csdn.net/qq_44786519/article/details/108691437

在这里插入图片描述

CDN缓存

CDN缓存由网站管理员自己部署，为了让他们的网站更容易扩展并获取得更好的性能。通常情况下，浏览器先向CDN网关发起Web请求，网关服务器后面对应着一台或多台负载均衡服务器，会跟据他们的负载请求，动态将请求转发到合适的原服务器上。从浏览器角度来看，整个CDN就是一个源服务器，从这个层面来说，浏览器和服务器中间的缓存机制，在这种架构下仍然适用

应用缓存

Coolies:同一个域名下的所有请求，都会携带Cooike，大小4kb
Session Storage：用来存储生命周期和它同步的会话级别的信息，关闭浏览器就不存在。
Local Stoage：持续化缓存
Service Worker缓存：
pwa,会拦截http请求，对资源进行离线请求，消息推送，无法直接访问dom

浏览器渲染

浏览器渲染机制

DOM树：
解析 HTML 以创建的是DOM树：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为内容树
CSSOM树：
解析 CSS （包括外部CSS文件和样式元素）创建的是CSSOM树。CSSOM的解析过程与DOM的解析过程是并行的
渲染树
CSSOM与DOM结合之后我们得到的就是渲染树
布局渲染树
从跟节点递归调用，计算每一个元素的大小，位置等，给每个节点所应该出现在屏幕上的精确坐标，我们便得到了基于渲染树的布局渲染树（Layout of the render tree）。
绘制渲染树：
遍历渲染树，每个节目将使用UI后端层来绘制。整个过程叫做渲染树（Painting the render tree）。

阻塞

普通模式,js会阻塞浏览器,浏览器必须等待 index.js 加载和执行完毕才能去做其他事情.一般会将此类js放在<body>标签的底部,减少对整个页面下载的影响.
async 模式:js不会阻塞浏览器做任何其他的事情.它的加载时异步的,当它加载结束,js脚本会立即执行.
defer模式:js的加载是异步的,执行是被推迟的.整个文档解析完成DOMContentLoaded事件即将被触发时,defer模式的js文件才会开始依次执行
一般不参与dom操作会用异步,如果有dom操作会defer.
动态加载脚本:
此文件当元素添加到页面之后立刻开始下载.无论在何处启动下载,文件的下载个运行都不会阻塞其他页面处理过程.甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响.