分类 大前端 下的文章

W3C_Preload


![]C4V[7X~JQIHR36YZ`MV7.png]1# preload简介

一种资源预加载的方式。用于提高性能,方便开发人员控制资源加载。

preload 指示浏览器预先请求当前页面接下来会需要用到的资源。

在chrome中,采用 preload 预加载资源后,后续没有在对资源进行请求(3s),控制台会提示说是否有必要预加载该资源。


处理bootstrap4不支持远程静态框问题


起步

我就是喜欢用新的,况且 bs4 出来也很久了,用了一段时间后发现它并不支持远程静态框了,查了一下这部分已经被移除了。

20180713114837.png

所以,以前的 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> 这种写法就没法用了,因此这部分要手动处理下。


JS异步下载按序执行


前言

前端优化有个原则,叫资源懒加载。

对于某些js资源,我们在页面load前并不需要用到,加载反而会影响到首屏速度。

把这些js放到 load 后进行加载,我们称之为js异步加载。


响应式图片srcset属性学习笔记


介绍

以下参考了MDN,并添加了一些细节和自己的测试结论

<img/>的属性,设置srcset之后不同屏幕密度加载不同图片。

其值为:以逗号分隔的一个或多个字符串列表表明不同User Agent可能设置的图像资源。

每一个字符串由以下组成:

  1. 一个图像的 URL
  2. 可选的描述符,空格后跟以下的其一:
    • 一个宽度(w)描述符,这是一个正整数,后面紧跟 'w' 符号。该整数宽度=sizes属性给出的资源(source)大小*像素密度。该值需配合sizes使用。
    • 一个像素密度描述符,这是一个正浮点数,后面紧跟 'x' 符号。该值其实指的就是dpr。若像素密度描述符直接命中的话,就不考虑sizes和w描述符了,但是建议一般所有字符串仅用其中一个 如果没有指定描述符,那它会被指定为默认的 1x。