2024年前端最全web前端开发编码规范及性能优化，最新web前端面试合集答案

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 合理注释,比如 div 关闭的地方表明配对的 div;

• HTML,CSS,JS 分离,方便维护;

• 避免使用 iframe, 否则会阻塞父文档 onload;

• 样式继承,不要重复;

• 不要乱用 href 和 onclick, 他们本质不同,href 偏向资源加载,而 onclick 仅仅是点击;其次 click 事件在 href 之前执行;

• css伪类选择器不宜太多,防止选择器过载;

• 不要让样式难以覆盖,少用!improtant;

• 善于利用样式继承(注意继承和层叠是不一样的概念);

• 不要保留过时的浏览器前缀和兼容性写法;

JavaScript

---

• 标识符简短清晰,不用 1 和 0 代替 true 和 false,合理编写注释,提高代码可读性;

• 定义变量一定写 var,以免污染全局,同时,new Function() 和 eval() 也会污染全局;

• 长字符串用字符串链接写法,而非跨行。在兼容的情况下,用 ES6 中的多行字符串也更好;

• 不要在 if 和 for 中定义函数,前置没有意义,破坏分支;后者易出现循环参数拖尾的情况;

• 在此法作用域开始处声明变量,提高可读性;

• var Name = function Name(){}; 有利于堆栈跟踪(注意变量名一致性);

• 位运算不要大于32位;

• 不要随意重写已有原型,可以用其实例化对象代替,实现实例继承;

• 对象方法尽量返回 this 以便链式调用;

• 函数的放入同名文件夹中,定义 noConflict 方法导出前一版本并返回当然版本;

• 设计封装(类,闭包,模块)时,尽量使用严格模式;

• 在内容为 js 的 script 标签上和内容为 css 的 link 标签上省略 type 属性和 lang 属性;

• 注意变量名不要使用保留字和系统全局变量(方法)一样;

• 以下行为污染全局: setTimeout 和 setInterval 的首参传入字符串; eval()函数; new Function() 构造函数。

性能优化

====

页面渲染

---

减少页面 reflow

• 修改元素多个样式可以通过修改 className 完成,这样可以把多次 reflow 减少为一次 reflow;

• 修改元素多个样式可以分为三步：先隐藏(display:none), 再修改,最后显示。这样可以把多次 reflow 减少为两次次 reflow;

• 添加页面内容可以通过将所有内容写入 docuemnt fragment 元素后再一次性 append 到页面中;

• 添加页面内容可以通过将所有内容组成长字符串,再一次性编辑 innerHTML 加入到页面中;

• css(style 标签和 link 标签) 放在 head 中,这样浏览器在加载数据时候可以直接通过 css tree 生成 render tree, 减少不必要的重新渲染;

• 在不影响视觉效果的情况下,尽量减少 js 动画精度;

• div 布局优于 table 布局,因为后者中元素任意属性改名都会对整个表进行回流;

优化用户体验

• 使用懒加载技术,保证首屏优先加载;

• 使用异步脚步,不阻塞主页面渲染;

• 先渲染界面,在不影响首屏情况下,使用 js 脚本动态加载后续数据;

• 将不影响渲染的脚本后置(放在 body 之后),优先渲染;

• 添加自定义的错误页面（如404 not found 页面）;

• 利用 GPU 加速;

代码优化

• 图片 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 脚本；

网络通信

---

减少通信链接次数

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

mg.cn/img_convert/41a409bca685b4ea0e0aa1a5589c3e09.png)

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。