进行HTML语义化标签，HTML5提供的一些新的语义化元素来明确一个web页面的不同部分，有：

优化前端效果，可以删除多余容器元素，让代码层次少，避免使用table进行页面的布局，换成用div+css的样式布局。
css代码优化，在各个浏览器中，相同元素解析的结果不同，就需要手动重置一些样式。
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表示为水平位置最右边。
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的，可以让我们的代码达到提升加载速度和代码混淆的作用。
图片的预加载
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样需要用到时就可以直接从缓存中取资源了。
图片的懒加载
首屏的加载，就是用图片懒加载技术，即是到可视区域再加载。
图片懒加载，使用jquery.lazyload.js，该js是一个基于Jquery的懒加载插件，里面封装了懒加载用到的方法以及实现，第二种是echo.js，它是一款非常简单实用轻量级的图片延时加载插件。