随笔分类 - 性能优化
摘要：js - 大文件上传下载 大文件上传-分片上传 分片上传的好处是将一个大请求分成多个小请求来执行，这样当其中一些请求失败后，不需要重新上传整个文件，而只需要上传失败的分片就可以了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
阅读全文
摘要：性能优化 - 重排和重绘 重排 & 重绘 DOM的变化影响了元素的几何属性，浏览器需要重新计算元素的几何属性，同时其他元素的几何属性和位置也会受到影响，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树，这个过程是重排，浏览器会重新绘制受到影响的部分到屏幕，这个过程叫重绘。 重排(Reflow)
阅读全文
摘要：优化高度限制 预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
阅读全文
摘要：react 图片懒加载 预览 import React from 'react'; import LazyLoad from 'react-lazyload'; export default class App extends React.Component { constructor(props)
阅读全文
摘要：1.原生JS实现图片懒加载（考虑不重复加载以及节流） 知识点：视口位置判断，懒加载实现（data-set），节流等 1.Element.getBoundingClientRect() 该方法返回元素的大小及其相对于视口的位置, 具体解释及用法参考 MDN. 通过 Element.getBoundin
阅读全文
摘要：https://www.cnblogs.com/soyxiaobi/p/9963019.html https://www.imooc.com/article/45936 优化思路（减少dom操作、替换高性能api、暂存引用、减少重排、开启硬件加速等）。 重绘不一定需要重排（比如颜色的改变），重排必然
阅读全文
摘要：性能优化 CSS性能优化 CSS性能优化的8个技巧 内联首屏关键CSS 减少页面的首要内容出现在屏幕上的时间 大家应该都习惯于通过link标签引用外部CSS文件。但需要知道的是，将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用
阅读全文
摘要：js优化 当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，将控制权移交给 JavaScript 引擎；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建。 这也就是为什么我们需要将script tag放在页面的底部。 /React APP一般会如
阅读全文
摘要：css优化 根据上面的内容我们知道了，想要渲染页面必须有render tree，而render tree是由DOM tree以及CSSOM tree组成的。 默认下，CSS会阻塞渲染页面 我们通过@media等，可以让CSS标记为不阻塞渲染 不论是否阻塞渲染，浏览器都会将CSS资源下载到客户端 所以
阅读全文
摘要：性能优化 1.css优化 前端优化的目的是什么 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。 总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利
阅读全文
