web前端开发编码规范及性能优化

H编程资料库

于 2024-05-15 02:50:37 发布

阅读量366

点赞数 5

分类专栏：程序员文章标签：前端性能优化

本文链接：https://blog.csdn.net/2201_75294326/article/details/138880818

版权

262 篇文章 0 订阅

订阅专栏

修改元素多个样式可以通过修改 className 完成,这样可以把多次 reflow 减少为一次 reflow;
修改元素多个样式可以分为三步：先隐藏(display:none), 再修改,最后显示。这样可以把多次 reflow 减少为两次次 reflow;
添加页面内容可以通过将所有内容写入 docuemnt fragment 元素后再一次性 append 到页面中;
添加页面内容可以通过将所有内容组成长字符串,再一次性编辑 innerHTML 加入到页面中;
css(style 标签和 link 标签) 放在 head 中,这样浏览器在加载数据时候可以直接通过 css tree 生成 render tree, 减少不必要的重新渲染;
在不影响视觉效果的情况下,尽量减少 js 动画精度;
div 布局优于 table 布局,因为后者中元素任意属性改名都会对整个表进行回流;

图片 img 标签的 src 不要空着,以免产生多余请求;
href, url()和 src 中的链接,用//代替http://,/content/a.jpg代替content/a.jpg, 被替代的后者会多发送一个 http 请求;
合理优化外链 css 和 JS 以利用缓存;
资源控制在25kB之内,否则移动端可能无法缓存;
减少不必要的 DOM 节点;
十六进制颜色优于 rgb/hsl 函数,图形转换优于动画,css 动画优于 js 动画,少用 hack 写法;
尽量避免 css 表达式;
不要重复加载相同代码;
利用事件委托减少事件定义;
利用变量保存多次用到的 DOM 查询结果,减少反复查找;
能用 !== 或 ===,就不要用 != 或 ==,减少不必要的隐式类型转换;
尽量使用现有的函数方法,比如数组所有元素求和,直接用 reduce 方法, 再考虑用 map 方法,接着考虑 forEach 方法,然后是 for…in, 最后是 for;
利用 {} 或 [] 定义对象或数组,比 new Object() 或 new Array() 效率高;
避免 String 类型隐式装箱（隐式调用 new String());
用 switch 代替过多的 if, 并按判断条件的可能性排序,以便尽早结束判断;
[].join() 动态生成字符串比字符串链接(+)性能更好;
nextSibling() 性能比 children 好；
cloneNode() 比 createElement() 效率高；
考虑在页面渲染完毕以后再动态加载辅助用的外部 js 脚本；

网络通信

SEO

综合优化

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

关注