web性能优化
南麟剑首
前端开发
展开
-
web页面性能优化系列(1)懒加载和预加载
优化前要了解web基础知识:web本质是一个基于B/S架构的GUI软件当我们通过网络进行访问:是一个动态的,增量的加载静态资源的过程浏览器的一个请求到返回都经历了什么?整个过程有哪些可以优化的点?1,dns是否可以通过缓存减少dns的查询时间2,网络请求能否走最近的网络环境3,相同的静态资源能否缓存能否减少http请求的大小4,减少http请求次数5,服务端渲染html,c...原创 2018-11-17 01:05:51 · 289 阅读 · 0 评论 -
web页面性能优化系列(附录)其他必会的基础知识
001:即建立TCP链接1,根据域名解析IP获取IP地址2,TCP|IP三次握手1,根据域名解析IP获取IP地址—发生在互联层DNS解析IPA:浏览器会先解析我们输入的url地址,浏览器会先搜索自身的DNS缓存,看自身的缓存中是否有对应的条目,而且没有过期,如果有且没有过期则解析到此结束。B:如果浏览器自身的缓存里面没有找到对应的条目,那么Chrome会搜索操作系统自身的DNS缓存,如...原创 2018-11-17 02:17:16 · 293 阅读 · 0 评论 -
web页面性能优化系列(3)浏览器存储-包含PWA基础方案
客户端浏览器存储技术涉及到几个点分别是localstorage、cookie、sessionstorage、indexdb,service worker ,PWAcookie:1,存储数据4KB左右2,需要设置过期时间3,httponly应用场景1,用于与服务器发生交互场景cookie解决最重要的一个问题就是HTTP的无状态请求,即通过cookie让服务器识别访问者是谁以此...原创 2018-12-20 01:20:09 · 523 阅读 · 1 评论 -
web页面性能优化系列(2)页面重绘和回流
浏览器渲染线程互斥的概念问题:css渲染会影响js渲染性能嘛?答:会的,原因是在浏览器渲染过程渲染css和渲染js各开启一个线程去工作但是这两个线程是互斥的,当渲染css在工作,渲染js的线程将会停止工作,则如果页面css频繁进行重绘势必会降低js的渲染速度回流的概念当rander tree中的一部分或者全部因为元素的规模尺寸,布局,隐藏等改变而需要重新构建render tree 这个过程...原创 2018-12-19 01:39:19 · 435 阅读 · 0 评论 -
web页面性能优化系列(4)缓存优化
自动化缓存策略-处理大规模缓存的方案http-Header(协议头部):基于http-Request(请求头部)和http-Response(响应头)来实现的缓存策略缓存策略(一)cache-control属性:max-age:指定缓存的有效时间s-maxage:只能指定Public类型的缓存,优先级高于max-ageprivate:私有缓存,如果个人计算机上的缓存public:...原创 2019-02-27 00:31:03 · 540 阅读 · 0 评论 -
web性能优化系列(5)react-ssr
vue渲染面临的问题:1、脚本依赖,加载耗时蓝色(Loading):网络通信和HTML解析黄色(Scripting):JavaScript执行紫色(Rendering):样式计算和布局,即重排绿色(Painting):重绘灰色(other):其它事件花费的时间白色(Idle):空闲时间事件总结:Loading事件事件描述Parse HTML浏览器执行HTML解析Fini...原创 2019-03-12 01:29:14 · 474 阅读 · 0 评论 -
浏览器解析js的机制
浏览器解析JS机制浏览器解析JS机制一、浏览器的运行机制 浏览器是多进程的,其中包含了: 1)GPU进程 2)第三方插件进程 3)浏览器渲染进程 4)Browser进程 这里面的进程很好理解,浏览器本身,第三方插件扩容,浏览器渲染,GPU。其中,浏览器渲染JS就是通过浏览器渲染进程进行的。 浏览器渲染引擎是多线程的,其中包括以下线程: 1)GUI渲染线程 --...原创 2019-07-31 13:35:20 · 572 阅读 · 0 评论