本系列目录：【前端八股文】目录总结
是以《代码随想录》八股文为主的笔记。详情参考在文末。
代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主
性能优化，从以下几个方面来进行。
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个图需要两次并发。
优点：文章来源：https://www.toymoban.com/news/detail-418861.html
- 减少请求次数
- 减少服务器压力
- 减少并发
- 提高加载速度
参考
前端性能优化-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)文章来源地址https://www.toymoban.com/news/detail-418861.html
到了这里，关于【前端八股文】浏览器系列：性能优化——HTML、CSS、JS、渲染优化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
