JavaScript 页面渲染
1. 从输入url到得到html的详细过程
1.1 加载资源的形式
输入 URL 或跳转页面 加载 html
1.2 加载一个资源的过程
浏览器根据DNS服务器得到域名的IP地址
向这个IP的机器发送http请求
服务器收到后 处理并返回 http请求
浏览器得到返回内容
1.3 浏览器渲染页面的过程
根据 HTML 结构生成 DOM Tree
根据 CSS 生成 CSSOM
将 DOM 和 CSSOM 整合形成 RenderTree 渲染树
浏览器根据 渲染树 开始渲染
遇到 <script> 时 会执行并阻塞渲染 因为js有权利改变 dom 结构 所以要等着js脚本执行
2. window.onload 和 DOMContentLoaded 的区别
window.onload : 页面的全部资源加载完才会执行,包括图片视频;
DOM 渲染完即可执行 此时图片 视频还没有加载完
3 前端性能优化
3.1 加载资源优化
1 静态资源的压缩合并
2 静态资源缓存
3 使用CDN让资源加载更快
4 使用SSR后端渲染,数据直接输入到HTML中
3.2 渲染优化
1 css在前 js放后面
2 懒加载 (图片懒加载,下拉加载更多)
3 减少DOM查询,对DOM查询做缓存
4 减少 DOM 操作,多个操作尽量合并在一起执行
5 事件节流
6尽早执行操作 如 DOMCotentLoaded
例子:6.1 资源合并
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<!--资源合并-->
<script src="abc.js"></script>
6.2 缓存
通过连接名称控制缓存
<script src="abc_1.js"></script>
只有内容改变的时候,连接名称才会改变
<script src="abc_2.js"></script>
6.3 使用CDN
比如一些常用的js文件使用放在CDN上的,例如:bootstrap,zepto.min.js
7. 图片懒加载,src的占位图片 可以缓存,可以在加载完页面之后,在执行真正的图片的替换。
<img id="img1" src="preview.png" data-realsrc="abc.png"> <script type="text/javascript">
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc');
</script>
8 缓存 DOM 查询
9 合并 DOM 插入
10。事件节流
如果输入很快,第一次生成的timeoutId都会被下一次的 keyup事件,清空。 但是一旦停下输入,最后一次的keyup事件 将会保存下来,100ms 后 执行 change事件。
JavaScript 页面渲染的更多相关文章
- "Javascript高性能动画与页面渲染"笔记
前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 加载 CSS 时不影响页面渲染
转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...
- 前端高性能滚动 scroll 及页面渲染优化
前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...
- 多进程浏览器、多线程页面渲染与js的单线程
线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...
- JS学习笔记:(一)浏览器页面渲染机制
浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...
- 渲染引擎 & 页面渲染流程 & 阻塞
文档对象模型(Document Object Model,简称DOM) 浏览器渲染引擎 一个渲染引擎 主要模块: HTML 解析器 解释 HTML 文档的解析器,将 HTML 文本 解析成 DOM 树 ...
随机推荐
- Tengine编译安装+lua+sticky模块
一.两个依赖包 有yum的直接 yum yum –y install openssl openssl-devel prce prce-devel zlib zlib-devel 没有yum环境的, ...
- mvp设计模式
一.设计模式的简单介绍 MVP的 V 层是由UIViewController 和UIView 共同组成view 将委托presenter 对它自己的操作,(简单来说就是presenter发命令来控制v ...
- Java与计算机常识
DB2 IBM公司的数据库 Oracle Orcle的数据库 Mysql 数据库(免费) 1. jetty 小型服务器(类似于tomcat) Jetty 是一个开源的servlet ...
- 笔试2019-GRANDSTREAM
程序阅读 随机,因为局部变量在栈中,值随机. 上面那个题在x86上都是12因为x86是大端模式 但是在ARM架构的处理器,因为它们是小端模式,则输出x078 判断回文 int hui(const ch ...
- GC(Garbage Collection)
GC(Garbage Collection) GC背景 创建对象会消耗内存,如果不回收对象占用的内存,内存使用率会越来越高,最终出现OutOfMemoryError(OOM) 在C++中专 ...
- 剑指offer57:二叉树的下一个结点
1 题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 2 思路和方法 中序遍历,下一个结点有两种情况 a ...
- Java+Tomcat 环境部署
Java+Tomcat 环境部署 下面在Centos7进行安装Java+Tomcat,网上的很多文章,我在部署中都有些问题,下面是我自己总结的一个安装过程! 安装Java环境 首先,我们先到Java官 ...
- docker&git&gitlab-安装/部署/新建
--安装gcc yum -y install gcc --安装g++ yum -y install gcc-c++ --安装编译所需的包 yum -y install curl-devel expat ...
- pandas之聚合运算
通过聚合运算可以得到我们比较感兴趣的数据以方便处理 import pandas as pd import numpy as np # 先创建一组数据表DataFrame df = pd.DataFra ...
- Core使用SAP Web Service
.Net Core在使用SAP的Web Service会遭遇到一些错误,貌似目前并不支持SAP中的Web Service,我们需要曲线实现下调用过程: 经测试,不再需要Framework项目中转,Sy ...