前端性能优化
累了你就写会代码吧
越自律,越自由
展开
-
图片懒加载是怎么实现的?如何实现图片懒加载?
1、什么是懒加载将图片src先赋值为一张默认图片,当用户滚动滚动条到可视区域图片的时候,再去加载后续真正的图片2、为什么要引入懒加载懒加载(LazyLoad)是前端优化的一种有效方式,可以减轻服务器的压力,而且可以让加载好的页面更快地呈现在用户面前(用户体验好)3、加载实现的原理先将img标签中的src链接设置为空,将真正的图片链接放在自定义属性(data-src),当js监听到图片元素进入到可视窗口的时候,将自定义属性中的地址存储到src中,达到懒加载的效果。4、实现思路如果滚动的大小和屏幕原创 2020-12-12 14:58:44 · 5359 阅读 · 0 评论 -
什么是浏览器的回流和重绘,以及如何减少回流和重绘
浏览器渲染原理1.解析HTML,生成DOM树,解析CSS,生成CSSOM树2.将DOM树和CSSOM树结合,生成渲染树(Render Tree)回流:回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。重绘:重绘是由于节点的几何属性发生改变或者由于样式发生改变但不会影响布局。例如outline, visibility, c转载 2020-12-12 14:41:34 · 836 阅读 · 0 评论 -
前端性能优化有哪些方面
雅虎军规内容Make Fewer HTTP Requests:减少HTTP请求数Reduce DNS Lookups:减少DNS查询Avoid Redirects:避免重定向Make Ajax Cacheable:缓存AJAX请求Postload Components:延迟加载资源Preload Components:预加载资源Reduce The Number Of DOM Elements:减少DOM元素数量Split Components Across Domains:跨域拆分资原创 2020-12-05 15:52:54 · 76 阅读 · 0 评论