发表于： 2017-05-27 23:16:02
1 989
今天完成的事情：
仔细了解了一下网页的渲染过程
看angulars视频，继续学习。
明天计划的事情：
通过视频案例学习ng-route的实现方法。
学习angular。
遇到的问题：
暂无
收获：
A,网页的加载过程：
主要有加载，解析，渲染三个过程。
渲染会被script脚本阻塞
下图为webkit引擎（chrome）的渲染流程：
示意代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="text.css">
<title>test</title>
</head>
<body>
<p>nihao</p>
<script src="test.js"></script>
<img src="photo.png">
</body>
</html>
1，输入网址后，浏览器向DNS服务器（域名解析系统）发送请求解析域名为ip。返回ip地址后，浏览器向对应的ip服务器发送http请求，服务器返回html文件。
2，html下载完毕后，开始加载html，遇到link中的css文件，则发送请求获取css文件，遇到图片资源也发送请求获取。遇到外部script脚本，则暂停加载。
3，加载html的同时会解析html文件，并并构建DOM树。然后在head中遇到了link中的css文件，等待下载css文件。
4，在下载css文件时，解析器继续向下解析。
5，解析器向下解析遇到script标签，若是引入的脚本文件，等待script下载。若此时css文件仍未下载完毕，会阻塞script脚本的执行，进而
阻塞解析器，此时加载解析全都暂停。
6，css文件下载并加载完毕，css解析器先解析css文件，然后渲染树也构建完毕，由于解析器此时被阻塞，此时渲染树会开始
绘制渲染，浏览器上显示绘制出的界面。然后暂停渲染。
7，若此时script脚本加载完毕，脚本则立即运行，若script脚本改变了DOM树，则渲染器重新渲染。脚本运行完毕后，继续加载和解析。
8，若渲染器经过时，图片仍未下载完毕，渲染器会继续解析，不会停止。
10，图片加载完毕后，渲染器重新渲染此部分代码。
现代浏览器一般都会有预加载的功能，提前下载好资源。
B,angularJs是一种MVC框架：
M-Model ->ng-model
V-View ->{{}}
C-Controller ->1.业务逻辑 2.angularJS与原生JS桥梁 3.$scope
C,angularJs的核心概念：
Module：模块组件，一个页面中只有一个，不要与MVC中的module混淆了。
Service：它主要完成逻辑功能，如发送http请求，获取http返回的结果，服务有内置服务，也有自己自定义的服务。
$Scope：这里是作用范围，一个controller有它作用的范围，在这个范围内，它能取到它的值，包含控件和方法。
双向绑定：页面的变化能引起M的变化，一般有两种方式实现：一是ng-bind,另一个是表达式{{}}。
路由：当请求一个url时，根据路由配置匹配这个url，然后请求模板片段，并插入到ng-view中去。
Directive：自定义指令。
返回列表
评论