【前端八股文】浏览器系列：性能优化——HTML、CSS、JS、渲染优化

时间：2021-11-24 01:11:02

文章目录

本系列目录：【前端八股文】目录总结
是以《代码随想录》八股文为主的笔记。详情参考在文末。
代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主

性能优化，从以下几个方面来进行。

【前端八股文】浏览器系列：性能优化——HTML、CSS、JS、渲染优化

HTML

  • 避免HTML中直接写CSS
  • viewport加速页面渲染
  • 使用语义化标签
  • 减少标签的使用：DOM解析是一个大量遍历的过程
  • 避免src空值
  • 减少DNS查询数

避免HTML中直接写CSS

  • 对浏览器来说，样式文件是一个单独的文件，可以在本地建立一个缓存，有利于加快访问网页。
  • 对服务器来说，如果样式文件浏览器减少加载，就可以减少此网络请求，可以节约服务器带宽。

viewport加速页面渲染

<meta name="viewport" content="width=device-width, initial-scale=1">

使用语义化标签

语义化标签，如p表示段落paragraphs，h表示标题head

使用语义化标签有利于搜索引擎优化（SEO）。

减少标签的使用

DOM解析是一个大量遍历的过程，减少不必要的标签，就能降低遍历的次数。

避免src空值

src用于替换当前元素。它指向外部资源，指向的内容会嵌入到文档中标签的位置。请求src资源时会阻塞其他资源的下载和处理。即，src是先加载再运行后面的代码。

避免src空值可以缩减浏览器首屏渲染的时间。 原因：浏览器在渲染过程中会把src属性中的空内容进行加载，直至加载失败，影响DOMContentLoaded与Loaded事件之间的资源准备过程，拉长了首屏渲染的事件。

减少DNS查询数

在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响。

减少DNS查询次数：需要减少来自不同domain的请求的数量，如尽量将外部域的对象下载到本地服务器上等。

CSS

  • 避免后代选择符
  • link代替@import
  • 减少回流与重绘
  • CSS放head中
  • 压缩CSS，开启gzip压缩
  • 骨架屏+loading
  • 避免选择器过多嵌套

避免后代选择符

一般来说开发中HTML和CSS是分开的。使用后代选择符会严重依赖于HTML代码，当HTML修改后CSS也要修改。

如：

div ul li{
}

link代替@import

使用@import引入CSS会影响浏览器的并行下载。 用@import引用的CSS文件只有在此文件下载解析结束后，浏览器才会知道还有别的CSS要下载。这会导致浏览器无法并行下载样式文件。

多个@import可能会导致下载顺序紊乱。 在IE中，排列在@import后面的js文件会先于@import下载，会打乱甚至破坏@import自身的并行下载。

减少回流与重绘

回流会导致浏览器重新构建渲染树，降低浏览器渲染速度。以下操作会触发回流与重绘，我们要尽量避免以下操作：

  • 改变font-size和font-family
  • 改变元素内外边距
  • 通过JS改变CSS类
  • 通过JS获取DOM元素的位置相关属性（如width/height/left等）
  • CSS伪类激活
  • 改变窗口大小

css放head中

css放在head中，先加载css，构建css规则树，同时构建DOM树，都构建完成后就构建render树，进行计算布局网页。

css放在body底部，在DOM树构建完成后开始构建render树（这里的render树中的css规则是浏览器默认样式），计算布局绘制网页，在css加载完之后，开始构建css规则树，然后再构建render树，再进行计算布局和绘制。

也就是说，css放在body底部会比在head中多构建一次render树，在性能方面不够好。同时，放在body底部网页会闪现 默认样式的DOM结构，用户体验不好。

压缩CSS，开启gzip压缩

gzip主要用于压缩html、css、js等静态文本文件，压缩后的体积可以达到原来的30%左右。

骨架屏+loading

当资源加载耗时较长时，页面会显示为白屏。而骨架屏就是在页面显示出来之前的、与页面内容类似的屏幕。它只需要CSS支持，不需要网络请求，可以减少白屏的时间，提升用户体验。

避免选择器过多嵌套

浏览器解析选择器会逐级匹配，嵌套过多会产生性能问题。实际上，css选择器是从右往左解析的。也就是说，如：

div ul li{
}

先找到所有的li，再留下有祖先节点ul的li，最后留下有祖先节点div的ul的li。显然，过多的嵌套会影响性能。

相关方法：

  • 避免使用通配符：通配符可以匹配HTML的任何元素（即，遍历DOM），增加解析复杂度
  • 使用class和id选择器：降低选择器的嵌套层数，减少解析的复杂度
  • 避免使用后代选择器

CSS加载会造成阻塞吗

  • CSS加载不会阻塞DOM树解析
  • CSS加载会阻塞DOM树渲染
  • CSS加载会阻塞后面JS的执行

相关解释：

DOM树解析与CSS无关，与HTML有关，因此CSS加载不会阻塞DOM树解析。
CSS加载会阻塞DOM树渲染，因为CSS会改变样式布局，若边加载CSS边渲染DOM树，一旦布局发生变化就会引起回流和重绘。
CSS加载会阻塞后面JS的执行。因为JS可以动态修改CSS，若不阻塞的话，结果会不可预估。

JavaScript

  • 避免循环操作DOM
  • 把script放在body后
  • 事件委托

对于把script放在body后，可以详看：【前端】JS异步加载

省流：

JS会操作DOM元素，若把script放在body前，JS会阻塞HTML的解析。

对于事件委托：绑定事件时，不绑定在目标元素上，而是绑定到其祖先元素上。这样：

  • 监听事件少
  • 新增节点时，无需增加事件绑定

原理是事件捕获和事件冒泡：终于弄懂了事件冒泡和事件捕获！

关于阻止事件冒泡：

有两种方式来阻止事件冒泡：

  • event.stopPropagation()：只阻止事件冒泡。
$('#div1').mousedown(function(event)){
	event.stopPropagation();
}
  • return false：不仅阻止事件冒泡，还阻止事件本身。
$('#div1').mousedown(function(event)){
	return false;
}

渲染优化

  • 懒执行
  • 懒加载
  • 防抖节流
  • 雪碧图

懒执行

将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化。

对于某些耗时逻辑且不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒：一般可以通过定时器或者事件的调用来唤醒。

懒加载

将不关键的资源延后加载——只加载用户正浏览或即将浏览的图片

只加载自定义区域（通常是可视区域，或即将进入可视区域）内需要加载的东西。对图片来说，先设置图片标签的src属性为一张占位图，真实的图片资源放入自定义属性data-src中，当进入自定义区域时，将自定义属性替换为src属性，这样就会下载图片资源。

防抖节流

防抖

n秒后再执行该事件，若在n秒内被重复触发，则重新计数。
也可以理解为：单位时间内多此触发，只执行最后的那一次。
原理：延迟执行，期间但凡有新的触发就重置定时器。

节流

n秒内只触发一次，若在n秒内重复触发，只有一次生效。
原理：上锁，只有满足一定价格时间才能执行。

应用场景

防抖场景：

  • 搜索框搜索输入。只需用户最后一次输入完，再发送请求。
  • 手机号、邮箱验证输入检测。输入完后再检测。
  • 窗口大小resize。窗口调整完毕后再进行渲染。防止重复渲染。

节流场景：

  • 滚动加载，滚动到底部加载更多。不用一滚动就监听，可以n秒内监听一次。
  • 监听搜索框，搜索联想功能。n秒内联想一次即可，不用时时联想。

雪碧图

若页面有10个图，则需要10次网络请求。若把10个图拼成一个大图，则只需要一次网络请求。
且同源域名有最大并发限制，如Chrome为6个，则要加载10个图需要两次并发。

优点：

  • 减少请求次数
  • 减少服务器压力
  • 减少并发
  • 提高加载速度

参考

前端性能优化-DNS解析优化_dns缓存时间_红目香薰的博客-CSDN博客
为什么前端优化时要避免空的src_祝大余的博客-CSDN博客
关于空href和src对渲染影响的验证和思考_总一把烂牌的博客-CSDN博客
浏览器加载、渲染以及优化页面的顺序和方法_关于页面加载解析渲染过程的顺序正确的是_谁是听故事的人的博客-CSDN博客
前端面试（1）-页面渲染-性能优化_王小七七的博客-CSDN博客
页面渲染机制和性能优化总结 - 掘金 (juejin.cn)
css行内样式为什么尽量不要使用-css教程-PHP中文网
web前端性能优化（全汇总） - 掘金 (juejin.cn)
针对CSS、HTML、JavaScript如何进行性能优化_html加载的css与js较多怎么提高效率_努力做一只合格的前端攻城狮的博客-CSDN博客
css面试题（7）CSS优化、提高性能的方法有哪些？_学至分享的博客-CSDN博客
前端面试题-CSS选择器性能优化 - 前端の进行时 - SegmentFault 思否
CSS性能优化 - 掘金 (juejin.cn)
CSS性能优化的8个技巧 - 掘金 (juejin.cn)
CSS性能优化的几个技巧 - 掘金 (juejin.cn)
CSS样式为什么放在head中，而不放在body底部_css 在head 和body的区别_小蛮牧码者的博客-CSDN博客
前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)_gzip压缩图片_Ashley的成长之路的博客-CSDN博客
web性能优化之页面加载体验（骨架屏） - 桔子桑 - 博客园 (cnblogs.com)
vue首屏优化之骨架屏_骨架屏为什么可以优化白屏时长_云之彼端灬约定之所的博客-CSDN博客
浏览器解析CSS选择器 - 简书 (jianshu.com)
css的选择器嵌套过多带来的影响 - 掘金 (juejin.cn)
css加载会造成阻塞吗？ - 知乎 (zhihu.com)
前端性能优化——渲染优化 - 掘金 (juejin.cn)

标签：

相关文章