基本问题
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>部分而不会对其余部分的页面代码造成影响.
2148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
