qq_38560742的博客

优化前要了解web基础知识： web本质是一个基于B/S架构的GUI软件 当我们通过网络进行访问：是一个动态的，增量的加载静态资源的过程 浏览器的一个请求到返回都经历了什么？ 整个过程有哪些可以优化的点？ 1，dns是否可以通过缓存减少dns的查询时间 2，网络请求能否走最近的网络环境 3，相同的静态资源能否缓存能否减少http请求的大小 4，减少http请求次数 5，服务端渲染 html,c...

001：即建立TCP链接 1，根据域名解析IP获取IP地址 2，TCP|IP三次握手 1,根据域名解析IP获取IP地址—发生在互联层 DNS解析IP A:浏览器会先解析我们输入的url地址，浏览器会先搜索自身的DNS缓存，看自身的缓存中是否有对应的条目，而且没有过期，如果有且没有过期则解析到此结束。 B:如果浏览器自身的缓存里面没有找到对应的条目，那么Chrome会搜索操作系统自身的DNS缓存,如...

客户端浏览器存储技术涉及到几个点分别是 localstorage、cookie、sessionstorage、indexdb，service worker ，PWA cookie： 1，存储数据4KB左右 2，需要设置过期时间 3，httponly 应用场景 1，用于与服务器发生交互场景 cookie解决最重要的一个问题就是HTTP的无状态请求，即通过cookie让服务器识别访问者是谁以此...

浏览器渲染线程互斥的概念 问题：css渲染会影响js渲染性能嘛？ 答：会的，原因是在浏览器渲染过程渲染css和渲染js各开启一个线程去工作但是这两个线程是互斥的，当渲染css在工作，渲染js的线程将会停止工作，则如果页面css频繁进行重绘势必会降低js的渲染速度 回流的概念 当rander tree中的一部分或者全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建render tree 这个过程...

自动化缓存策略-处理大规模缓存的方案 http-Header（协议头部）:基于http-Request（请求头部）和http-Response（响应头）来实现的缓存策略 缓存策略（一）cache-control 属性： max-age:指定缓存的有效时间 s-maxage:只能指定Public类型的缓存，优先级高于max-age private:私有缓存，如果个人计算机上的缓存 public:...

vue渲染面临的问题： 1、脚本依赖，加载耗时 蓝色(Loading)：网络通信和HTML解析 黄色(Scripting)：JavaScript执行 紫色(Rendering)：样式计算和布局，即重排 绿色(Painting)：重绘 灰色(other)：其它事件花费的时间 白色(Idle)：空闲时间 事件总结： Loading事件 事件描述 Parse HTML浏览器执行HTML解析 Fini...

浏览器解析JS机制 浏览器解析JS机制 一、浏览器的运行机制 浏览器是多进程的，其中包含了： 1）GPU进程 2）第三方插件进程 3）浏览器渲染进程 4）Browser进程 这里面的进程很好理解，浏览器本身，第三方插件扩容，浏览器渲染，GPU。其中，浏览器渲染JS就是通过浏览器渲染进程进行的。 浏览器渲染引擎是多线程的，其中包括以下线程： 1）GUI渲染线程 --...