性能
文章平均质量分 81
鱼叔子
黑夜,留给我们想象的空间;白天,为之梦中幻想而奋斗。
展开
-
第五篇《描述下浏览器从输入网址到页面展现的整个过程》
对浏览器原理有过了解的一定不会陌生这篇神文《How Browsers Work》中文翻译:浏览器原理:新式网络浏览器幕后揭秘。另外还有一篇 《What really happens when you navigate to a URL》。大神写的东西很长很复杂,阅读成本虽然大,但能学到东西。所以,我也试着用自己的理解去写一写,算是做个巩固。里面有很多参考,如涉及版权,侵权删!表述有误,请指正!前端为什么要研究渲染原理?像素完美(Pixel Perfection)、分辨率无关(Resolution I.原创 2021-12-03 09:40:04 · 395 阅读 · 0 评论 -
第四篇《大量图片加载优化》
饿了么 App 中新零售项目主要是以图片展示为主,引导用户点击轮播广告栏或者店铺列表进入指定的商品页面,因此页面中包含了大量图片,如搜索框下面的轮播广告栏、中部的促销栏以及底部的店铺列表,这些区域中都有大量的展示图片。因此图片的加载速率直接影响页面的加载速度。下面将从图片加载存在的问题和原因、解决方案两个方面来阐述如何优化新零售图片的加载。本文所有数据及图片都是通过 Charles 模拟 256 kbps ISDN/DSL 网络环境获取到的。在本案例中只考虑位图,因此文本中提及的图片都是指位图而非矢量图。原创 2021-12-03 09:37:30 · 324 阅读 · 0 评论 -
第三篇《性能优化》
减少体积利用webpack等压缩工具(js压缩,css压缩,img压缩)提供公共方法,第三方库gzip压缩http2合理分配CDN资源和域名每个游览器的同一域名下的在相同时间段内有一个最大连接数合理分配不同的域名,可以让游览器更快的进行请求,不至于堵塞缓存网络资源,缓存,更快的进入页面对第一次进入页面美业影响,对第二次及为需要更新时,影响最为明显如果需要更新:进入页面时判断当前版本号是否与所需版本号一致,不一致进行更新还可以部分数据缓存,例如:localStorage对资原创 2021-12-03 09:32:44 · 408 阅读 · 0 评论 -
第二篇《重排(reflow)和重绘(repaint)》
页面生成的过程:1.HTML 被 HTML 解析器解析成 DOM 树;2.CSS 被 CSS 解析器解析成 CSSOM 树;3.结合 DOM 树和 CSSOM 树,生成一棵渲染树(Render Tree),这一过程称为 Attachment;4.生成布局(flow),浏览器在屏幕上“画”出渲染树中的所有节点;5.将布局绘制(paint)在屏幕上,显示出整个页面。第四步和第五步是最耗时的部分,这两步合起来,就是我们通常所说的渲染。渲染:在页面的生命周期中,网页生成的时候,至少会渲染一次。在用原创 2021-12-03 09:30:50 · 923 阅读 · 0 评论 -
第一篇《白屏》
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念、重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践。一、概念白屏时间:即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间。白屏时间的长短将直接影响用户对该网站的第一印象。二、白屏时间的重要性当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时,就开始等待页面的展示。页面渲染的时间越短,用户等待的时间就越短,用户感知到页面的速度就越快。这样可以极大的提升用户的原创 2021-12-03 09:27:47 · 97 阅读 · 0 评论