前端性能优化

思维导图获取 基础的 Web 技术层面的优化 Web服务器优化 开启 gzip 压缩 HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术,web 服务器和客户端(浏览器)必须共同支持 gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如 Apache,Nginx, »

元芳 元芳

从输入URL到页面渲染出来的过程(详细)

思维导图获取 一、 URL 解析 1. 输入内容合成地址 用户输入URL,浏览器会根据用户输入的信息判断是搜索还是网址。 如果是搜索内容,就将搜索内容(会对内容进行字符编码等操作)+ 默认搜索引擎合成新的URL; 如果用户输入的内容符合URL规则,浏览器就会根据URL协议,在这段内容上加上协议合成合法的 2. HSTS(HTTP Strict Transport Security) 因为 http 存在安全隐患(比如:明文传输, »

元芳 元芳

HTTP 1.x 与 HTTP 2.0 的区别

HTTP 2.0 相比 HTTP 1.x 大幅提高了web性能,减少了网络延迟。接来下详细探索下 HTTP 2.0 是如何提高性能的。 先来看个 http/1.1 与 http/2 同时请求 379 张图片,所花费时间的对比。https: »

元芳 元芳

为什么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 »

元芳 元芳