wordpress 招聘网站,厦门淘宝网站设计公司,舆情分析报告怎么写,设计本和游戏本区别一、提升页面性能的方法有哪些#xff1f;
1. 资源压缩合并#xff0c;减少HTTP请求
图片、视频、js、css等资源压缩合并#xff0c;开启HTTP压缩#xff0c;把资源文件变小
2. 非核心代码异步加载 →异步加载的方式 → 异步加载的区别
异步加载的方式 ① 动态脚本加载…一、提升页面性能的方法有哪些
1. 资源压缩合并减少HTTP请求
图片、视频、js、css等资源压缩合并开启HTTP压缩把资源文件变小
2. 非核心代码异步加载 →异步加载的方式 → 异步加载的区别
异步加载的方式 ① 动态脚本加载 使用document.createElement(‘script’)创建script标签最后把这个标签加载页面上 ②defer defer作用是文档加载完毕了再执行脚本这样回避免找不到对象的问题
script defer
function document.body.onload() { alert(document.body.offsetHeight);
}
/script③async 2. 异步加载的区别 ① defer是在HTML解析完之后才会执行如果是多个按照加载的顺序依次执行
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script src./defer1.js defer/scripttitleDocument/title
/head
body
scriptconsole.log(write)
/script
script typetext/javascriptfor(var i 0; i 20000; i) {if (i % 2000 0) {console.log(i)}}
/script
/body
/html②async是在加载完之后立即执行如果是多个执行顺序和加载顺序无关
3. 利用浏览器缓存 →缓存的分类 → 缓存的原理
缓存的原理 是指资源文件再浏览器中备份比如请求服务端一个图片然后把图片缓存到了本地浏览器下次请求时直接在电脑磁盘中读取无需再次请求缓存的分类 1-1 强缓存: 不会向服务器发送请求,直接从缓存中读取资源 Expires 过期时间服务器的绝对时间
// 拿客户端的本地时间与服务器的时间进行比较如果小于服务器时间直接取缓存缺点本地时间可以与服务器时间不一致原因是本地时间可以修改
Expires: Thu,21 Jan 2017 23:39:02 GMTCache-Control 过期时间相对时间
// 客户端的相对时间3600秒之内我不会请求服务器直接在浏览器取缓存Cache-Control:max-age 3600PS当这两个时间都下发了 以Cache-Control 相对时间为准
1-2 协商缓存向服务器发送请求,服务器会告诉你是否使用缓存 Last-Modified 上次修改的时间 If-Modified-Since 上次修改的时间 Last-Modified 是由服务器发送给客户端的HTTP请求头标签 If-Modified-Since 则是由客户端发送给服务器的HTTP请求头标签 Etag 哈希值 If-None-Match
详细解析文章
4. 使用CDN ☆
CDN: 内容分发网络把主体网站的资源静态资源js、css、图片、视频等分发到各个CDN服务商根据用户所在区域从最近的CDN服务商获取资源。 例子 某个广州的用户打开了淘宝页面杭州服务器就根据区域重定向到广州CDN服务商获取页面资源节约了用户打开页面的时间提升了用户体验尤其是页面第一次打开的时候使用CDN效果明显 作用减少路由次数提升下载速度缩短传输时间提升用户使用体验
5. DNS预解析
DNS域名系统每一个域名都对应一个唯一的IP地址DNS 就是管理域名和IP地址映射关系的分布式数据库 通过域名查找到对应的IP地址的过程叫作域名解析 DNS预解析是浏览器试图在用户访问链接之前解析域名减少用户点击当链接的相应时间 例子当我们打开淘宝网时把所有的a标签跳转的链接抓取出来提前做这些链接的域名解析当用户点击这些链接时响应就很快。 参考文章
// http开头的页面默认打开A标签的预解析
// 如果页面是https开头的默认关闭A标签的预解析 x-dns-prefetch-control 强制打开A标签的预解析
meta http-equivex-dns-prefetch-control contenton
// dns-prefetch 指定特定域名进行预读取
link reldns-prefetch href//host_name_to_prefetch.com
