首先来看一下前端性能优化所涉及的层面有如下四个：网络层面，构建层面，浏览器渲染层面，服务端层面 具体的优化点有：资源合并与压缩，图片编码原理和类型的选择，浏览器的渲染机制，懒加载与预加载，浏览器存储，缓存机制，PWA，Vue-SSR等等 首先来了解一下web前端的本质 web前端的本质是一种GUI软 ...
分类：
其他好文 时间：
2019-03-25 01:21:16
阅读次数：
252
浏览器渲染一个页面有两条线程：一条是渲染js脚本，一条是渲染css脚本。但是两条线程是互斥的。 回流：当render tree的一部分或者全部元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，回流就产生了。 重绘：当一个元素自身的宽高，布局，及显示或 ...
分类：
其他好文 时间：
2019-03-18 11:40:00
阅读次数：
921
大概有以下几步： DNS解析（浏览器缓存→系统缓存→路由器缓存→ISP DNS缓存→从根域名服务器递归搜索） 建立TCP链接（TCP的三次握手） 浏览器向服务器发送HTTP请求 服务器返回结果给浏览器 浏览器渲染页面（解析HTML，构建DOM树，解析CSS，构建渲染树，浏览器进行渲染绘制） 断开与服 ...
分类：
Web程序 时间：
2019-03-12 10:43:43
阅读次数：
235
1、浏览器渲染页面过程 （浏览器渲染引擎的渲染流程） 1.1、关键渲染路径 关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程。 所以浏览器的渲染过程主要包括以下几步： 2、JS操作真实DOM的 ...
分类：
其他好文 时间：
2019-03-11 00:51:58
阅读次数：
384
静态网页： 1、在静态Web程序中，客户端使用Web浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的请求交给Web服务器，之后WEB服务器根据用户的需要，从文件系统（存放了所有静态页面的 ...
分类：
Web程序 时间：
2019-03-10 20:38:43
阅读次数：
204
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程 ...
分类：
其他好文 时间：
2019-02-28 22:56:50
阅读次数：
204
1) 在客户端浏览器中输入网址URL。 2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。 3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。 4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。 5) WEB服务器响应请求，返回指定的 ...
分类：
其他好文 时间：
2019-02-27 20:42:59
阅读次数：
230
浏览器就可以通过访问链接来得到页面的内容，通过绘制和渲染，显示出页面的最终的样子 知识点：页面加载过程、性能优化、安全性 1、页面加载过程 知识点：加载资源的形式、加载一个资源的过程、浏览器渲染页面的过程 （1）、加载资源的形式 输入url(或跳转页面)加载html http://www.baidu ...
分类：
其他好文 时间：
2019-02-17 23:50:47
阅读次数：
215
研习 react hooks 文档后，一些个人认为值得理解和关注的内容。 ...
分类：
其他好文 时间：
2019-01-28 17:39:22
阅读次数：
256
内容目录 HTML介绍 HTML常用标签 HTML介绍 Web服务本质 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 HTML是什么？ 超文本标记语言（Hypertext Markup Lang ...
分类：
Web程序 时间：
2019-01-26 21:37:19
阅读次数：
198
