前端开发代码结构及性能优化大总结

Posted 2021-06-26 李猫er

目录

• 1、前端结构组织与文件命名规范
• • • HTML 命名规范
    • CSS 命名规范
    • JavaScript 命名规范
• 2、 代码及性能优化
• • • 1. HTML 代码优化
    • 2. SEO优化
    • 3. CSS优化
    • 4. server服务端优化
    • 5. JavaScript方面优化
    • 6.Webpack优化
    • 7. 加载优化：
    • 8. 页面渲染优化
    • 9. 图片优化
    • 10. 脚本优化
• 3、前端资源优化

1、前端结构组织与文件命名规范

前端结构组织具有如下原则：

• 同一项目中代码的组织结构要清晰
• 同类型文件归类到相同的文件夹中
• 文件命名规则须统一并且命名要有意义

html 命名规范

• HTML 代码所有的标签名和属性应该都为小写
• 属性值应该用引号括起来
• 元素的 id 与 class 按照特定规范命名
• 代码缩进 4 个空格
• 给 HTML 代码块添加必要注释

CSS 命名规范

• 尽量使用 class 选择器进行样式设定
• 类命名时取父元素的 class 名作为前缀，使用-连接
• 类名与样式之间以空格进行分割
• 添加 CSS 代码注释

javascript 命名规范

• 变量名区分大小写，第一个字符不允许是数字，不允许包含空格和其他标点符号
• 尽量使用有实际意义的命名
• 禁止使用 JavaScript 关键词、保留字全名
• 添加 JavaScript 代码注释

2、 代码及性能优化

1. HTML 代码优化

优化 HTML 代码的目的一方面是使网站对搜索引擎更友好，一个漂亮的前端网站是用户友好的，并且在各方面都进行了优化的网站是搜索引擎友好的，是理想的网站。另一方面也是对代码的维护提供便利。一个规范的网页的 HTML 代码应该尽可能满足如下的条件：

1. 正确闭合 HTML 标签，如 <div>盒子</div>。
2. HTML 代码层级间合理缩进，统一用两个或者四个空格缩进。
3. 属性值需要使用双引号，如<div id="mydiv">盒子</div>
4. 结构与样式进行有效的分离，即 HTML 和 CSS 文件的分离。
5. 结构与行为进行有效的分离，即 HTML 和 JS 文件的分离。
6. 使用语义化标签，如头部标签<header>。
7. 删除多余容器元素，代码层次少。
8. 避免使用 table 进行页面的布局，换成用 DIV+CSS。此外，还可以通过在线网站（http://validator.w3.org/）来对 HTML 代码进行格式化验证。

2. SEO优化

• 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同； description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
• 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用 js 输出：爬虫不会执行js获取内容
• 少用 iframe ：搜索引擎不会抓取 iframe 中的内容
• 非装饰性图片必须加 alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

3. CSS优化

• CSS 样式多余样式去除、结构优化
• 将样式表放在页面顶部
• 使用 less scss 表达式
• 使用 link 不适用 @import 引入样式
• 压缩 css
• 禁止使用 gif 图片实现 loading 效果（降低 CPU 消耗，提升渲染性能）
• 使用CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
• 对于一些小图标，可以使用 base64 位编码，以减少网络请求。
• 页面头部的

4. server服务端优化

• 减少 HTTP 请求，合并文件、雪碧图
• 减少 DNS 查询，使用缓存
• 减少 Dom 元素的数量
• 使用 CDN
• 配置 ETag ,http缓存的手段
• 对组件使用 Gzip 压缩
• 减少 cookie 的大小

5. JavaScript方面优化

• 代码与结构分离：即把 HTML 和 JavaScript 进行有效分离，这里有两种意义上的分离，一种是就在 HTML 中分离 JavaScript，另外一种是在JavaScript 中分离HTML。
• 样式与结构的分离：即把 CSS 和 HTML 进行有效分离，这里指在 JavaScript 中将CSS 和 HTML 进行分离。
• 数据与代码分离：也可以认为是前后端分离的表现。后台接口只负责返回json 格式的数据，不会返回带标签甚至是带样式或带 JavaScript 的组合数据。而且模拟数据可以用 json 文件或者相关插件如 mock。这样的好处就是将数据从代码中抽离出来，当数据变化时不能影响代码。
• JavaScript DOM 优化：尽可能减少重排和重绘；用 cssText 改变样式；批量修改 DOM；提升文件加载速度。
• 将脚本放到页面底部
• 将 js 外部引入
• 压缩 js
• 使用 Eslint 语法检测
• 减少 Dom 的操作
• 熟练使用设计模式
• 禁止使用 iframe （阻塞父文档 onload 事件）
• 页面中空的 href 和 src 会阻塞页面其他资源的加载
• 网页 gzip ， CDN 托管， data 缓存 ，图片服务器

6.Webpack优化

• 代码压缩插件 UglifyJsPlugin
• 服务器启用 gzip 压缩
• 按需加载资源文件 require.ensure
• 优化 devtool 中的 source-map
• 剥离 css 文件，单独打包
• 去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致
• 开发环境不做无意义的工作如提取 css 计算文件hash等
• 配置 devtool
• 优化构建时的搜索路径 指明需要构建目录及不需要构建目录

7. 加载优化：

• 合并CSS、JavaScript
• 合并小图片、使用精灵图
• 缓存一切可缓存的资源
• 使用外链式引用CSS、JavaScript
• 压缩HTML、CSS、JavaScript
• 启用GZip
• 使用首屏加载、按需加载、滚屏加载
• 通过Media Query加载
• 增加Loading进度条
• 减少Cookie
• 避免重定向
• 异步加载第三方资源

8. 页面渲染优化

• HTML 文档结构层次尽量少，最好不深于 6 层
• 脚本尽量放后边，避免组织页面加载
• 少量首屏样式可以放在便签内
• 样式结构层次尽量简单
• 脚本减少 DOM 操作，减少回流，尽量缓存访问 DOM 的样式信息
• 尽量减少 JS 修改样式，可以通过修改 class 名的方式解决
• 减少 DOM 查找，缓存 DOM 查找结果
• 动画在屏幕外或页面滚动时，尽量停止

9. 图片优化

• 使用智图
• 使用（CSS3、SVG、IconFont）代替图片
• 使用Srcset
• webP优于JPG
• PNG8优于GIF
• 图片不宽于640

10. 脚本优化

• 减少重绘和回流
• 缓存Dom选择与计算
• 尽量使用事件处理，避免批量绑定事件
• 尽量使用ID选择器
• 使用touchstart、touchend代替click

3、前端资源优化

• Sprite 拼合图: CSS Sprite，中文也叫 CSS 精灵、雪碧图，是一种将零散的背景图合并成一张大图，再利用 CSS 的 background-position 属性进行背景的定位从而达到减少图片请求数量达到加快加载速度的网页应用处理方式。
• 压缩：代码压缩、打包工具(压缩 JavaScript、压缩 CSS)
• 预加载：预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
• 懒加载：首屏加载，技术上显示要用的技术就是图片懒加载，即到可视区域再加载。