2024年Web前端最新web前端开发编码规范及性能优化，2024年五面蚂蚁

最后更多分享：前端字节跳动真题解析

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

• 

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

网络通信

---

减少通信链接次数

• css spirit 将多次请求变为1次请求;

• 设置 http头的属性：connection: keep-alive,使得链接为长连接,减少频繁的握手挥手过程;

• 设置合适的 http头的属性：expires, cache-control 和 max-age

• 合理利用浏览器本地缓存,路由缓存,使得一些数据不需要从服务器获取;

• 去除不必要的重定向;

• 合并文件 如 css js脚本;

• 保存(缓存)必要的 Ajax 请求数据;

减少数据传输距离和数据大小

• 压缩代码;

• 使用内容分发网络(cdn), 如 Akamai, Limelight等;

• 使用 Gzip 压缩;

• 使用新的图片格式或矢量图,如 .apng, .webp 和 .svg;

• 必要时, 减小 cookie, 以减少 http 请求中的数据量;

• 尽量用缩写的 css 样式;

• 合理利用服务器缓存,cdn缓存;

• 尽量少用或不用 ETag,一般情况下 Expires 头已经够用了;

合理利用服务器资源

• 使用负载均衡技术,如硬件技术：Alteon, F5和软件技术：Nginx, LVS;

• 减少 DNS 查找时间(控制在20ms~100ms);

• 设置图片服务器;

• 增加 TTL 时长,建议为24hours(引自Steve Souders的《High Performance Web Sites》)

SEO

---

• 完善 meta 标签,discription 简洁明了,keywords 清晰;

• 重要内容不要用 js 或后端语言加载;

• 合理利用 h标签,尤其 h1 标签,有很高权重;

• 图片写上合理的 alt 值;

• URI 控制在 256KB 之内;

• 不要使用 iframe;

• 语义化标签的使用;

综合优化

• 用多个域名存储网站资源(减小cookie, 节约主域名连接数,突破浏览器并发限制,优化cdn缓存)
• 使用 base64 Encode 图片,减小链接数量和传输大小。

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总

linux

前端资料汇总