前端性能优化、首页白屏优化前端性能优化、首页白屏优化..................................

首页白屏优化

www.dandelioncloud.cn/article/det…

PC性能优化

代码优化

减少DOM结点：DOM结点太多会影响页面的渲染。

不要反复去获取相同的dom节点，查找节点是非常消耗性能的

如何减少dom操作：

1、对dom查询做缓存，

2、多个操作尽量合并在一起执行

3、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

4、避免全局查询

优化高频事件：搜索框、move事件用防抖限制，scroll、touch、高频点击等事件使用节流限制。

少用全局变量

慎用闭包,防止内存泄漏

loading加载状态

骨架屏

减少不必要的嵌套，避免代码纵深层次过深，尽量扁平化，因为当浏览器遇到一个开始标签时就会寻找它的结束标签，直到匹配上才会显示它的内容，所以当嵌套很多时打开页面就会特别慢。

代码要结构化、语义化，因为这样可以增加代码的可读性，比如说使用header、footer、section等标签

尽量使用css3动画：合理使用requestAnimationFrame动画代替setTimeout。

用hash-table来优化查找

用setTimeout来避免页面失去响应

避免全局查询

避免使用with(with会创建自己的作用域，会增加作用域链长度)

服务端渲染ssr

(伪)服务端渲染

把js移到HTML后加载，因为JS会阻塞后面的页面的显示。

减少iframe的使用，因为iframe会增加一条http请求。

避免图片和iframe等的空Src。空Src会重新加载当前页面，影响速度和效率。

文件命名规则须统一且要有意义，同类型文件归类到相同的文件夹中。

css优化

加载性能：

（1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。

（2）css 单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0 ；但margin-bottom:bottom;margin-left:left;执行效率会更高。

（3）减少使用@import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能： （1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。

（4）属性值为 0 时，不加单位。

（5）属性值为浮动小数 0.xx，可以省略小数点之前的0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import 前缀，它会影响 css 的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

（10）正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。 171

（11）不滥用 web 字体。对于中文网站来说WebFonts 可能很陌生，国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载webfonts 时会阻塞页面渲染损伤性能。可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过class 在页面中进行使用，提高 css 的可维护性。

（2）样式与内容分离：将 css 代码定义到外部css 中。

图片优化

图片懒加载和预加载

blog.csdn.net/qq_48959471…

雪碧图(精灵图)

把每个小图标都整合到一张大图上面，极大的减轻http请求数，同时能够让图片快速加载进来

图像格式的选择

尽可能的使用PNG格式的图片，它相对来说体积较小

在一些对颜色要求不高的地方, 可以用 gif 格式

打包工具压缩图片

字体图标代替大量小图标
图像尽量避免使用DataURL：DataURL图像没有使用图像压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长。

请求优化

去掉不必要的请求, 控制首页以外的请求按需请求

合并样式和脚本，使用css精灵图片和字体图标，初始首屏之外的图片资源按需加载，静态资源延迟加载。

减少不必要的Cookie, Cookie存储在客户端，伴随着HTTP请求在浏览器和服务器之间传递，由于cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器，从而会影响加载速度，所以尽量减少不必要的Cookie。

异步加载第三方资源：第三方资源不可控，会影响页面加载，所以要异步加载第三方资源
开启 HTTP2
网址后加斜杠（如 www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）
并发请求

缓存优化

设置http缓存: 强缓存、协商缓存

强缓存请求响应头

Expires

响应头，代表该资源的过期时间。

Cache-Control

请求/响应头，缓存控制字段，精确控制缓存策略。

协商缓存请求响应头

If-Modified-Since

请求头，资源最近修改时间，由浏览器告诉服务器。

Last-Modified

响应头，资源最近修改时间，由服务器告诉浏览器。

Etag

响应头，资源标识，由服务器告诉浏览器。

If-None-Match

请求头，缓存资源标识，由浏览器告诉服务器。

使用CDN
使用外部js和css文件以便缓存
keep-alive

打包优化

使用webpack、gulp等打包工具, 合并文件, 压缩代码, 减少代码体积

进一步打包优化: cdn、Gzip压缩代码、图片压缩、抽离公共代码、组件库按需引入

juejin.cn/post/719473…

资源加载

头部内联的样式和脚本会阻塞页面的渲染，一般我们会把css样式表文件放到文件的头部使用link引入，这样可以让CSS样式表尽早地完成下载。

对应js脚本文件，一般我们把脚本放在尾部并使用异步方式加载，这样可以尽最大限度的减少样式和脚本对页面的阻塞。

控制资源加载顺序 prefetch, preload, dns-prefetch, defer, async可以实现资源的预加载和懒加载 ,异步加载

www.cnblogs.com/zhoulixue/p…

组件懒加载预加载

blog.csdn.net/make_progre…
按需异步载入js

动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）
预加载

在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞onload事件，可以使用以下代码开启预加载预加载可以⼀定程度上降低首屏的加载时间，因为可以将⼀些不影响首屏但重要的文件延后加载，唯⼀缺点就是兼容性不好。

预渲染

可以通过预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染预渲染虽然可以提高页面的加载速度，但是要确保该页面大概率会被用户在之后打开，否则就是白白浪费资源去渲染。

懒执行

懒执⾏就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执⾏。懒执⾏需要唤醒，⼀般可以通过定时器或者事件的调用来唤醒。

懒加载

懒加载就是将不关键的资源延后加载。懒加载的原理就是只加载自定义区域 ( 通常是可视区域，但也可以是即将进⼊可视区域)内需要加载的东⻄。对于图片来说，先设置图片标签的 src 属性为⼀张占位图，将真实的图片资源放⼊⼀个自定义属性中，当进⼊自定义区域时，就将自定义属性替换为src属性，这样图片就会去下载资源，实现了图片懒加载。懒加载不仅可以用于图片，也可以使用在别的资源上。比如进⼊可视区域才开始播放视频等等。

移动端性能优化

尽量使用css3动画，开启硬件加速。

适当使用touch事件代替click事件。

可以用transform: translateZ(0)来开启硬件加速。

CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加

PC端的在移动端同样适用

前端性能优化、首页白屏优化