前端优化方案

一http请求的优化
1 文件引入的方式
（1）内联
优点 减少http请求
缺点 1没办法复用
2是的HTML文件变大 加载时间变长
3代码都写到HTML文件中，不利于后期的维护
工程化的手段可以解决这个问题
源码到可以上线的代码
（2）外部引入
优点：
1很好的复用代码
有效利用浏览器的静态资源缓存
2代码分离，利于后期的维护
缺点：
增加了HTTP请求
结论：一般情况都是混用 也没有一定的说法
建议： 首屏的必备的css样式内联 其余的外部引入文件

2 文件放置问题
css文件放到head标签里面（较前）
js文件 越晚越好（DOM后面）假如放在DOM之前 会阻塞DOM的渲染
影响网站页面的显示

3 避免重复的资源请求
避免重复的引入文件 减少HTTP请求

4文件的压缩合并
使用工具 将代码中的注释 空格 全部去掉
将多个css文件合并在一起 假如太大了 就不适合
要知道取舍 可能是两三个文件合并 可能是4 5个不等

5 缓存
每一次跑一边代码
就要到服务器获取一次js css文件
到浏览器本地获取就会减少HTTP的请求

二图片的优化
一个网站的图片很大很多
（1）HTTP请求大
图片压缩处理（使用工具）
使用更高压缩格式的图片
webp
尽量减少使用图片
使用字体代替图片
CSS画图
（2）HTTP请求多
合理使用base64内嵌图片
合并静态资源图片
雪碧图
手动
图片的懒加载和预加载 （后面详细介绍）

避免空连接 a标签的href属性 img的src属性都不能空 script的src属性不能空
table标签是慢元素 最好不要使用

7 css选择器的优化
浏览器读取选择器的时候 从最右边到最左边
最少修饰 来获取精准的选择器
class起名需要注意
实际开发中不建议使用通配符标签

8 css属性和其他优化
将需要的公共的样式 同时写在n个标签下
合并一些可以合并的像素 比如margin paddintg 的四个值 font属性
在css最终不要用import属性引进文件 例如@import url(‘bass.css’)

三js的优化
1尽量减少DOM操作
2回流重绘
3懒加载
4防抖节流