为什么css要放头部,js放尾部以及async、defer该如何处理?

css要放头部,js放尾部 主要是为了将页面内容尽快的展示给用户,减少白屏时间。 接下来我们来分析下原因,但是在这之前要先清楚浏览器页面的渲染过程。 DOM的解析是一个从上到下的过程 所有外链资源(css,image,script)浏览器都会以接近并发的情况来发起请求(http 1.x 同域名下不是并发,详情看这里) 同一时间内的最大HTTP请求是有上限的(http 1.1浏览器会限制同一个域的同时请求数,Chrome是限制6个,总连接数是17个) 解析DOM获取DOM树,解析CSS获取CSSDOM树, »

元芳 元芳

JSBridge 原理以及各种方式的优缺点

在开发 web App 的时候,我们会用 JSBridge 来调用 Native 的一些功能,作为一名前端开发,JSBridge 实现这块不一定是我们开发的,但也要对 JSBridge 实现原理做到了解。 JS 调用 Native 1. 拦截 Url Schema(假请求) 2. 拦截 prompt »

元芳 元芳

使用 JSON.parse、JSON.stringify 深拷贝的缺陷

在用SON.parse、JSON.stringify做对象深拷贝时,发现会丢失对象中某些类型的值,所以我们来一探究竟,看看在转换过程中做了什么处理。 先看下MDN是怎么介绍 JSON.stringify 的 JSON.stringify(value[, replacer [, space]]) 参数 value 将要序列化成 一个JSON 字符串的值。 这是第一个参数,应该都不陌生,最常用的也是这个。其他两个基本用不到。 一般传入一个对象。 »

元芳 元芳

浏览器协商缓存中的ETag是怎么生成的?

上一篇浏览器的缓存机制 讲了整个的缓存流程,那么其中的ETag是怎么生成的呢? 其实在不同的Web服务器有不同的算法,今天,我们就以nginx为例,看一下是怎么生成的。 以这个资源文件的请求为例 可以看到Server是 nginx/1.14.0,那我们再去看看nginx的源码是怎么生成ETag的ngx_http_core_modules.c etag->value.len = ngx_sprintf(etag-> »

元芳 元芳

浏览器的缓存机制

场景 当我们浏览器使用久了,会发先他的占用空间越来越大,用清理软件扫描的时候,会发现有个缓存文件目录 这些文件都是经过16进制加密的,window上可以用ChromeCacheView查看,mac os 没找到查看的办法,所以我也没有验证缓存文件的内容。 不过据 ChromeCacheView 的截图来看,是可以看到存储文件原来的信息。 所以当我们首次浏览网页的时候,浏览器会从服务器获取所有数据和媒体并缓存到本地存储。 当再次访问同一站点时,浏览器仅从Web服务器检索HTML页面信息。 页面的所有静态部分(例如图像或JavaScript文件 )都将从现有的浏览器缓存中提取。由于第二次从远程Web服务器传输到浏览器的数据量很小,因此页面加载速度更快。 前端性能优化之缓存优化 既然访问网站的时候可以对一些文件进行缓存, »

元芳 元芳