性能优化
减少HTTP请求次数
CSS Sprits
- 对CSS或JS文件进行合并压缩(
webpack
、服务器开启资源文件gzip
压缩) - 采用JSON格式进行客户端与服务器端数据传输
- 良好的编码习惯(内存泄漏、减少对
DOM
操作) - 图片懒加载,在页面开始加载时,不请求真实的图片地址,使用默认图占位(减少页面首次加载
HTTP
请求次数) audio
或video
标签设置preload=none
(页面加载时,音视频数据不加载,播放时再加载),(preload=auto
)、(preload=metadata
页面首次加载时就把音视频资源的头部信息进行加载)- 更多地使用异步编程(
Ajax
数据请求,一般都使用异步编程)(基于promise
设计模式进行管理)(使用fetch
、vue-axios
等插件进行Ajax
请求处理) - 避免一次性循环过多数据(循环操作是同步编程)
- CSS选择器优化
- 减少标签选择器的使用
- 少使用ID选择器,多使用类选择器(通用性强)
- 减少使用选择器的限定(
.header .nav .left a {}
选择器从右向左查找) - 避免使用CSS表达式
- 减少代码冗余,提高重用率(低耦合,高内聚)
- CSS放在
head
中,JS放在body
尾部 - 不经常更新数据使用浏览器304缓存
- 不使用
eval
- 减少使用闭包(占内存、内存泄漏)
DOM
事件操作,避免使用事件绑定(冒泡机制:绑定外层容器,内部事件触发,外层容器相关也会被触发),使用性能更高的事件委托(事件代理)- 使用字体图标代替位图(图片),方便适配以及更轻量,减少HTTP请求次数
- 使用CSS3动画代替JS动画(CSS3动画开启硬件加速,性能更好)
- 使用JS设计模式构建代码
- 减少CSS滤镜的使用,不使用flash
- 使用CDN加速
SEO优化
1、避免出现死链接(404页面),用户输入错误页面,跳转到404提示页面
2、避免浏览器中异常错误抛出
3、增加页面关键词优化
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。