首页 > 作文

web前端如何优化自己的代码

更新时间:2023-04-06 09:11:31 阅读: 评论:0

前端的性能优化主要分为三部分:

html优化

避免 ht教师资格证准考证打印ml 中书写 css 代码,因为这样难以维护。

使用viewport加速页面的渲染。

使用语义化标签,减少 css 代码,增加可读性和 o。

减少标签的使用,dom解析是一个大量遍历的过程,减少不必要的标签,能降低遍历的次数。

避免 src、href等的值为空,因为即时它们为空,浏览器也会发起 http 请求。

减少 dns 查询的次数。

css优化

优化选择器路径:使用 .c {} 而不是 .a .b .c {}。

选择器合并:共同的属性内容提起出来,压缩空间和资源开销。

精准样式:使用padding-left: 10px 而不是 padding: 0 0 0 10px。

雪碧图:将小的图标合并到一助理工程师申请书张图中,这样所有的图片只需要请求一次。

避免通配符:.a .b * {} 这样的选择器,根据从右到左的解析顺序在解析过程中遇到通配符奥秘的近义词 * {} 会遍历整个dom,性能大大损耗。

少用承德避暑山庄天气 float:float 在渲染时计算量比法学硕士论文较大,可以使用 flex布局。

为 0 值去单位:增加兼容性。

压缩文件大小,减少资源下载负担。

javascript优化

尽可能把 <script> 标签放在 body 之后,避免js 的执行卡住 dom 的渲染,最大程度保证页面尽快地展示出来。

尽可能合并 js代码:提取公共方法,进行面向对象设计等……

css 能做的事情,尽量不用js 来做,毕竟 js 的解析执行比较粗暴,而css 效率更高。

尽可能逐条操作 dom,并预定好 css 样式,从而减少 reflow 或者 repaint的次数。

尽可能少地创建 dom,而是在html 和 css中使用 display: none 来隐藏,按需显示。

压缩文件大小,减少资源下载负担。

本文发布于:2023-04-06 09:11:29,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/a2699f00bef515abf97401f1442b5834.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:web前端如何优化自己的代码.doc

本文 PDF 下载地址:web前端如何优化自己的代码.pdf

标签:遍历   标签   通配符   文件大小
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图