博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web前端性能优化汇总
阅读量:5115 次
发布时间:2019-06-13

本文共 582 字,大约阅读时间需要 1 分钟。

一、概述

web前端性能优化主要点为:减少HTTP请求,减小请求文件大小、其他优化

二、优化细节

1、减少HTTP请求

(1)使用缓存

(2)雪碧图

(3)合并文件

(4)将javascript和css从外部引入

(5)图片base64编码

 

2、减小请求文件大小

(1)压缩html/css/js/图片文件大小

(2)减少DOM数量

(3)减小cookie大小

 

3、其他优化

(1)按需加载:lazyload、滚屏加载、Media Query加载

(2)预加载:loading、提前加载下一页

(3)css、js放在正确的位置

(4)适度使用cdn

 

更新2019.1.4

(1)资源压缩合并、减少http请求

(2)非核心代码异步加载(包括添加动态script,defer,async)

(3)缓存

(4)CDN

静态资源尽量使用 CDN 加载,由于浏览器对于单个域名有并发请求上限,可以考虑使用多个 CDN 域名。对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同,否则每次请求都会带上主站的 Cookie。

(5)预解析DNS

如:<link rel="dns-prefetch" href="//img20.360buyimg.com">

转载于:https://www.cnblogs.com/mengfangui/p/8390640.html

你可能感兴趣的文章
入手腾龙SP AF90mm MACRO
查看>>
Window7上搭建symfony开发环境(PEAR)
查看>>
Linux内核态、用户态简介与IntelCPU特权级别--Ring0-3
查看>>
第23月第24天 git命令 .git-credentials git rm --cached git stash clear
查看>>
java SE :标准输入/输出
查看>>
一些方便系统诊断的bash函数
查看>>
jquery中ajax返回值无法传递到上层函数
查看>>
css3之transform-origin
查看>>
[转]JavaScript快速检测浏览器对CSS3特性的支持
查看>>
Master选举原理
查看>>
[ JAVA编程 ] double类型计算精度丢失问题及解决方法
查看>>
小别离
查看>>
微信小程序-发起 HTTPS 请求
查看>>
WPF动画设置1(转)
查看>>
基于node/mongo的App Docker化测试环境搭建
查看>>
秒杀9种排序算法(JavaScript版)
查看>>
struts.convention.classes.reload配置为true,tomcat启动报错
查看>>
MySQL的并行复制多线程复制MTS(Multi-Threaded Slaves)
查看>>
好玩的-记最近玩的几个经典ipad ios游戏
查看>>
PyQt5--EventSender
查看>>