常州网站建设公司市场,宠物食品 中企动力提供网站建设,网页设计与制作教程题库,建设网站网上银行登录文章目录HTMLCSSCSS加载会造成阻塞吗JavaScript渲染优化参考本系列目录#xff1a;【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主
性能优化#xff0c;从以下几个方…
文章目录HTMLCSSCSS加载会造成阻塞吗JavaScript渲染优化参考本系列目录【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主
性能优化从以下几个方面来进行。 HTML
避免HTML中直接写CSSviewport加速页面渲染使用语义化标签减少标签的使用DOM解析是一个大量遍历的过程避免src空值减少DNS查询数
避免HTML中直接写CSS
对浏览器来说样式文件是一个单独的文件可以在本地建立一个缓存有利于加快访问网页。对服务器来说如果样式文件浏览器减少加载就可以减少此网络请求可以节约服务器带宽。
viewport加速页面渲染
meta nameviewport contentwidthdevice-width, initial-scale1使用语义化标签 语义化标签如p表示段落paragraphsh表示标题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面试题7CSS优化、提高性能的方法有哪些_学至分享的博客-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)
