【前端开发】代码结构及性能优化大总结
目录
- 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 代码应该尽可能满足如下的条件：
- 正确闭合 HTML 标签，如
<div>盒子</div>。 - HTML 代码层级间合理缩进，统一用两个或者四个空格缩进。
- 属性值需要使用双引号，如
<div id="mydiv">盒子</div> - 结构与样式进行有效的分离，即 HTML 和 CSS 文件的分离。
- 结构与行为进行有效的分离，即 HTML 和 JS 文件的分离。
- 使用语义化标签，如头部标签
<header>。 - 删除多余容器元素，代码层次少。
- 避免使用 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)
- 预加载：预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
- 懒加载：首屏加载，技术上显示要用的技术就是图片懒加载，即到可视区域再加载。
【前端开发】代码结构及性能优化大总结相关推荐
- 前端面试被问到性能优化该肿么办！
性能优化1 前端面试被问到性能优化该肿么办! 1.1 页面重构怎么操作? 网站重构:在不改变外部行为的前提下,简化结构.添加可读性,而在网站前端保持一致的行为. 也就是说是在不改变UI的情况下,对网站 ...
- WebView开发(三)：WebView性能优化
一.Android WebView开发(一):基础应用 二.Android WebView开发(二):WebView与Native交互 三.Android WebView开发(三):WebView性能 ...
- vin-slam中调用ceres库内部代码分析与性能优化
vin-slam中调用ceres库内部代码分析与性能优化 1,vin-slam中后端参数优化调用流程代码 2,ceres内部的求解流程(未完待续) 首先,很抱歉前几次上传的关于一些图像算法代码不全,主 ...
- Android开发性能优化大总结
有时间了,我会不段更新! 一.Android相关 1. 采用硬件加速,在androidmanifest.xml中application添加android:hardwareAccelerated=&qu ...
- 「前端那些事儿」② 极限性能优化
前言 前端的工作并不仅仅是实现「视觉&交互稿」,想要开发一个高性能易维护的「完美」站点并未易事,针对前端的性能优化贯穿着项目开发的始终,绝不是交互口中的「拖拽工人」! 然而前端优化策略却是一件 ...
- Web前端开发代码规范（基础）
一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...
- android app性能优化大汇总（UI渲染性能优化）
UI性能测试 性能优化都需要有一个目标,UI的性能优化也是一样.你可能会觉得"我的app加载很快"很重要,但我们还需要了解终端用户的期望,是否可以去量化这些期望呢?我们可以从人机交 ...
- android app性能优化大汇总（内存性能优化）
内存简介: RAM(random access memory)随机存取存储器.说白了就是内存. 一般Java在内存分配时会涉及到以下区域: 寄存器(Registers):速度最快的存储场所,因为寄存器 ...
- 将chart放入panel中出现滚动条_聊天场景在web前端开发中的体验与优化
在日常工作中,如下图的聊天场景是不是很熟悉,没错就是我们再熟悉不过的 QQ 和微信,一个正常的聊天界面大致上是长这个样子的: 这种聊天窗口的消息流有两个明显的特点: 最新的消息和滚动条初始位置需要在列 ...
- iOS开发中常见的性能优化技巧
性能问题的主要原因是什么,原因有相同的,也有不同的,但归根到底,不外乎内存使用.代码效率.合适的策略逻辑.代码质量.安装包体积这一类问题. 但从用户体验的角度去思考,当我们置身处地得把自己当做用户去玩 ...
最新文章
- 面试 | 22道机器学习常见面试题目
- 将图像转换为8位单通道_数字图像存储
- 进程间通信-system-v
- [BTS]使用BizTalk开发应用系统，就是这么简单！
- 无空头的链表代码：学生管理系统
- _M_invoke(_Index_tuple_Indices...)
- 缓冲文件系统(fopen/fread/fwrite)和非缓冲文件系统(open/read/write)
- 可以伸缩的查询面板 （searchBar）
- 【C语言】C语言学习整理-putchar,printf，getchar，scanf定义及区别
- SQL Server-【知识与实战VII】存储过程（下）
- 企业借力OA系统打造数字档案馆，提高档案管理、查阅效率
- PS实现照片水彩画效果
- 人人都可以成为记忆高手--罗马室记忆法则
- 看理想：3万辆交付意味着什么？
- 【转】为什么火线有电压，零线没有电压呢
- 21 C++ 长度单位转换
- 数据挖掘 顶级期刊_数据挖掘顶级期刊简介_47209.doc
- 【Vue 问题】文件流导出为excel无法打开
- #649 (Div. 2)D. Ehab‘s Last Corollary
- 厘米换算英尺英寸 (15 分)如果已知英制长度的英尺foot和英寸inch的值，那么对应的米是(foot+inch/12)×0.3048。现在，如果用户输入的是厘米数，那么对应英制长度的英尺和英寸是?