web前端面试（如何优化项目）

如何优化你的项目？

一、在书写html的时候做到结构语义化。
二、css，js文件数量及大小的优化
一般情况下建议css和js采用外联式。但是如果css非常多，尽量采用缩写，这样可以减少css文件的大小，减少http请求数，js同理。
三、背景图片数量及大小的优化
由于我们的背景图片数量比较多，这样的话，会给服务器带来影响，增加了http请求数，在我们的css定义背景的时候，可以将这些背景合并起来，这样即可减少http请求数。
背景图片保证不超过3个以上，
css文件不超过2个，js文件不超过3个。
css放到head中，js文件放到之前或者之后.
建议body中增加text-align:center
用 代替 @import
减少DOM访问
减小Cookie体积
favicon.ico要小而且可缓存
css优化
（1）打包css文件
（2）少用ID， !important，多用class
（3）样式用外部样式，最好不要用行间样式，内嵌样式
（4）选择器的层级最好不要超过4层，减少层级可减少渲染速度
（5）可读性：类名的命名规范
（6）公用的样式抽取，减少冗余的，重复的样式
（7）样式的引入放在头部
js优化
（1）打包js
（2）减少全局变量，全局方法的定义
（3）减少闭包的使用，避免多层循环的嵌套
（4）减少dom节点的事件绑定
（5）删除多余的代码，公用方法的抽取
（6）减少http请求次数
（7）js的引用放在底部
（8）js最好写在外部文件
h5的优化
（1）减少多余的dom节点嵌套
（2）标签的语义化使用，比如标题就用h1-h6，头部用 header，底部footer，导航nav，侧边菜单栏 aside，文章用article，模块用section等
（3）使用数据缓存，sessionStorage，localStorage，离线缓存
图片的优化
（1）减小图片的的大小，小图标使用svg,png，背景图片用jpg
（2）雪碧图的使用，减少对服务器的请求次数
（3）图片预加载
（4）字体图标的使用
用户体验的优化
（1）加载页面，请求接口的loading
（2）页面的平滑滚动，颜色的渐变，适当的动画
（3）减少操作次数，减少表单输入
（4）优化页面加载的速度，缓存的合理使用，预加载的使用