目录1、前端结构组织和文件命名规则HTML命名规则CSS命名规则JavaScript命名规则2、代码和性能优化1. HTML代码优化2. SEO优化3. CSS优化4. server服务器端优化5. JavaScript
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值只需突出关键点，关键关键词不要超过两次，且靠前不同的页面有不同的title，description可以高度概括页面内容，长度要合适，关键词不能堆积过多。 不同的页面有不同的描述。 keywords是列举重要关键词就能意义化的HTML代码，符合W3C标准。 语义化代码以使搜索引擎容易理解网页重要内容的HTML代码为开头。 搜索引擎抓取HTML的顺序是从上到下。 有些搜索引擎在抓取长度上有限制，保证一定能抓取到重要内容的重要内容不在js上输出：爬行动物不运行js不使用获取内容的iframe :搜索引擎抓取iframe内容的非装饰性图像需要加快速度：站点速度是搜索引擎排序的重要指标3. CSS优化CSS样式去除多余的样式，结构优化将样式表放在页面顶部，使用less scss表达式。 链接不可用。 如果引入@import样式来压缩css，则禁止使用gif图像的加载效果(减少CPU消耗、提高渲染性能)。 此外，使用CSS3代码代替JS动画可以最大限度地减少重画和重排。 对于一些小图标，使用base64位代码页头4 .通过优化4. server服务器端减少HTTP请求、合并文件、通过sprite map减少DNS查询、通过缓存减少Dom元素、使用CDN的ee 对http缓存的手段组件使用Gzip压缩以减少cookie的大小5 .在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托管、数据缓存和图像服务器6.web包优化代码
按需加载资源文件 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）代替图片使用SrcsetwebP优于JPGPNG8优于GIF图片不宽于640 10. 脚本优化 减少重绘和回流缓存Dom选择与计算尽量使用事件处理，避免批量绑定事件尽量使用ID选择器使用touchstart、touchend代替click 3、前端资源优化 Sprite 拼合图: CSS Sprite，中文也叫 CSS 精灵、雪碧图，是一种将零散的背景图合并成一张大图，再利用 CSS 的 background-position 属性进行背景的定位从而达到减少图片请求数量达到加快加载速度的网页应用处理方式。压缩：代码压缩、打包工具(压缩 JavaScript、压缩 CSS)预加载：预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。懒加载：首屏加载，技术上显示要用的技术就是图片懒加载，即到可视区域再加载。