提取码：45on
说到web前端开发高级，必须要掌握的是HTML和css代码的优化，前端优化很重要，这是成功你进阶的道路上需要重视的知识点，面对代码优化，首先我们要学习的就是前端命名规范，HTML代码优化，和css代码优化。
前端命名规范是很重要的，一直说很重要，当你用过别人的代码进行重构时，你会知道，如果你看到一长串代码，不了解之前的人是怎么写的，开局全靠猜，结局就是不断地浪费时间。
掌握前端优化目录的学习
前端命名规范，前端结构的组织，文件的命名规范，在一个项目中代码的组织结构要清晰易懂，同类型文件可以归类到到相同的文件夹中，文件命名规则需要统一且命名要有意义。这里要有意义是指命名要通俗易懂，英文单词可以写缩写，不必故步自封，写那么长的单词。
命名规范在前端领域，涉及HTML，css，JavaScript，在HTML代码所有的标签名和属性应该都为小写，属性值应该用引号括起来。元素的id和class都要按照规定命名，代码缩进时要缩进，进行格式化，让代码美观，有时可以给HTML代码添加必要注解。
对于css命名的规范，尽量使用class选择器进行样式的定义，类命名时取父元素的class名作为前缀，使用-符号进行连接。类名与样式之间以空格进行分割。
对于JavaScript命名规范，变量名是区分大小写，第一个字符是不允许为数字的，不允许是空格，不允许其他标签符号，尽量使用有意义的命名，不要使用JavaScript的关键词，或者是保留字。
进行前端代码的优化，优化HTML代码为了能够使网站更好的搜索，让用户更快速搜索到我们的网站，写好HTML代码使用正确的闭合HTML标签，进行HTML代码层级间的合理缩进，属性值需要使用双引号，结构与样式进行有效的分离，结构与行为进行有效的分离。
进行HTML语义化标签，HTML5提供的一些新的语义化元素来明确一个web页面的不同部分，有：
优化前端效果，可以删除多余容器元素，让代码层次少，避免使用table进行页面的布局，换成用div+css的样式布局。
css代码优化，在各个浏览器中，相同元素解析的结果不同，就需要手动重置一些样式。
去除标签的默认样式，如p，li，input等。
HTML5新标签设置为display:block。
重置一些元素的样式如超链接，字号等样式。
css样式选择器的优先级
对于css样式选择器，优先级高的会覆盖优先级低的。
第一，id选择器的权重为100，第二，类选择器的权重为10，第三，标签选择器的权重为1。
注意，css样式中尽量不要使用id选择器，会降低代码的复用性，尽量不要使用!important，会降低代码的复用性，尽量减少子选择器的层级。
css样式多余样式去除，和结构优化
定义简洁的css样式规则，合并相关css样式规则，定义简洁的属性值，合并相同的，删除无效的。
sprite拼合图
css sprite，也叫 css 精灵，雪碧图。
是一种将雪散的背景图合并成一张大图，再次利用css的background-position属性进行背景的定位从而达到减少图片请求数量达到加快加载速度的网页应用处理方式。
background属性
background-color，描述规定要使用的背景颜色 background-position，描述规定背景图片的位置 background-size，描述规定背景图片的尺寸 background-repeat，描述规定如何重复背景图像 background-origin，描述规定背景图片的定位区域 background-clip，描述规定背景的绘制区域 background-attachment，描述规定背景图片是否固定或者随着页面的其余部分滚动 background-image，描述规定要使用的背景图像 background-position属性
top，left，center，right，center等等，top表示垂直位置最头部，bottom表示垂直位置最底部，left表示水平位置最左边，center表示水平位置居中，right表示为水平位置最右边。
第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。 单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。
css sprite的制作工具
css sprite制作工具，photoshop和打包工具webpack来制作。
打包工具，现在流行的很多前端打包工具都有支持css sprite的集成，如
webpack中只要安装webpack-spritesmith依赖，然后在配置文件中引用依赖var SpritesmithPlugin = require('webpack-spritesmith'),最后在配置文件中添加代码。
代码压缩，打包工具
前端优化，压缩JavaScript和css是非常重要的。目前最常用的压缩JavaScript代码的工具之一有UglifyJS，它会分析JavaScript代码语法树，理解代码含义，从而能做到诸如去掉无效代码，去掉日志输出代码，缩短变量名等优化。
在webpack中接入UglifyJS需要通过插件的形式，UgllifyJsPlugin是比较常用的插件，通过在webpack的配置文件webpack.config.js中加入以下代码即可。
压缩css代码常用的是CSSNANO，是基于PostCSS的，可以让我们的代码达到提升加载速度和代码混淆的作用。
图片的预加载
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样需要用到时就可以直接从缓存中取资源了。
