运行环境
- 浏览器可以通过访问链接来得到页面的内容
- 通过绘制和渲染，显示出页面最终的样子
- 整个过程中，我们需要考虑什么问题
- 页面加载过程
- 性能优化
- 安全性
- 从输入url到得到html的详细过程
-
- DNS解析得到IP地址
-
- 向IP地址服务器发送HTTP请求
-
- 服务器收到处理并返回HTTP请求，浏览器收到html
- window.onload和DOMContentLoaded的区别
- window.onload页面的全部资源加载完才会执行，包括图片、视频等
- DOM渲染完即可执行，此时图片视频可能没有加载完
1、加载资源的形式
- 输入url（页面跳转）加载html
- 加载html中的静态资源
2、加载一个资源的过程 - 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP对应的服务器发送http请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回的内容
3、浏览器渲染页面的过程 - 根据HTML生成DOM Tree
- 根据CSS生成CSSOM
- 将DOM和CSSOM整合形成Render Tree
- 根据Render Tree开始渲染跟展示
- 遇到
- 减少DOM查询，对DOM查询做缓存
//未缓存DOM查询 var i for (i=0; i
- 减少DOM操作，多个操作尽量合并在一起执行
var listNode = document.getElementById('list'); //要插入10个li标签 var frag = document.createDocumentFragment(); //记住这个API~ var x, li; for(x = 0; x<10; x++){ li = document.createElement("li"); li.innerHTML = "List item " + x; frag.appendChild(li); //这里其实并不会执行DOM操作 } listNode.appenChild(frag);
- 事件节流xxx修正为防抖
var textarea = document.getElementById('text'); var timeoutId; textarea.addEventListener('keyup', function(){ if(timeoutId){ clearTimeout(timeoutId); } timeoutId = setTimeout(function(){ //todo }, 100); })
- 尽早执行操作
window.addEventListener('load', function(){ //页面的全部资源加载完才会执行，包括图片、视频等 }); window.addEventListener('DOMContentLoaded', function(){ //DOM渲染完即可执行，此时图片视频可能没有加载完 });
推荐阅读
- 人生感悟记＃环境仪器宋庆国成长记＃072
- 六步搭建ES6语法环境
- 操作系统|[译]从内部了解现代浏览器(1)
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- iOS，打Framework静态库
- win10环境|win10环境 python3.6安装pycrypto-2.6.1的问题
- Python|Win10下 Python开发环境搭建(PyCharm + Anaconda) && 环境变量配置 && 常用工具安装配置
- 为Google|为Google Cloud配置深度学习环境（CUDA、cuDNN、Tensorflow2、VScode远程ssh等）
- 读《12条生活规则》，在噪杂混乱的环境里找到生活的目的和意义
- linux环境变量相关操作
