8-1 介绍
一、问题
- 浏览器就可以通过访问链接来得到页面的内容
- 通过绘制和渲染，显示出页面最终的样子
- 整个过程，我们需要考虑什么问题
二、知识点
- 页面加载过程
- 性能优化
- 安全性
8-2 页面加载过程
题目
- 从输入url得到html的详细过程
- window.load 和 DOMContentLoaded 的区别
知识点
- 加载资源的形式
输入url（或者跳转页面）加载html
http://coding.m.imooc.com
加载 html 中的静态资源
<script src="/static/js/jquery.js"></script>
- 加载一个资源的过程
浏览器根据dns服务器得到域名的ip地址
向这个ip的机器发送http请求
浏览器收到、处理并返回http请求
浏览器得到返回内容
- 浏览器渲染页面的过程
跟进html结构生成dom tree
根据css 生成 cssom
将dom 和cssom 整合形成 RenderTree
根据RenderTree 开始渲染和展示
遇到<script>时，会执行并阻塞渲染
- windwo.onload 和 DOMContentLoaded
window.addEventListener('load', function(){
// 页面的全部资源加载完才会执行，包括图片、视频等
})
windw.addEventListener('DOMContentLoaded', function(){
// DOM 渲染完成即可执行，此时图片、视频还可能没有加载完
})
8-3 性能优化
原则
- 多使用内存、缓存或者其他方法
- 减少cpu计算，较少网络
从哪里入手
1.加载页面和静态资源
- 静态资源的压缩合并
- 静态资源缓存
- 使用cdn让资源加载更快
- 使用ssr后端渲染，数据直接输出到html中
2. 页面渲染
- css放前面，js放后面
- 懒加载（图片懒加载，下拉加载更多）
- 减少dom查询，对dom查询做缓存
- 减少dom操作，多个操作尽量合并在一起
- 事件节流
- 尽早执行操作（如 DOMContentLoaded）
例子
1.资源合并
<script src="a.js"></sceript>
<script src="b.js"></sceript>
<script src="c.js"></sceript>
<script src="abc.js"></sceript>
2.缓存
// 通过链接名称控制缓存
<script src="abc_1.js">
// 只有内容改变的时候，链接名称才会改变
<script src="abc_2.js">
3.使用ssr后端渲染
现在vue react 提出这样的概念
其实jsp php asp 都属于后端渲染
好处是直接渲染数据，不用ajax 请求数据
4.懒加载
<img id = "img1" src="preview.png" data-realsrc="abc.png">
<script type="text/javascript">
var img1 = docuemnt.getElemntById('img1')
img1.src = img1.getAttribute('data-realsrc')
</script>
5.缓存dom查询
// 未缓存 dom 查询
var i
for(i=0; i< docuemnt.getElementsByTagName('p').length, i++){
// todo
}
// 缓存了dom查询的
var plist = docuemnt.getElementsByTagName('p')
var i
for(i=0; i<plist.length; i++){
// todo
}
6.合并dom插入
//要插入的10个li标签
var frag = docuemnt.createDocumentFragment();
var x, li;
for(x=0; x<10; x++){
li = docuemnt.createElement("li")
li.innerHTML = "list item" + x;
frag.appendchild(li);
}
listNode.appendChild(frag);
7.事件节流
var textarea = docuemnt.getElementById('text')
var timeoutId
textarea.addEventLister('keyup', function(){
if(timeoutId){
clearTime(timeoutId)
}
timeoutId = setTimeout(function(){
// 触发change事件
},100)
})
8.尽早操作
window.addEventListener('load', function(){
// 页面的全部资源加载完才会执行，包括图片、视频等
})
windw.addEventListener('DOMContentLoaded', function(){
// DOM 渲染完成即可执行，此时图片、视频还可能没有加载完
})
8-4 安全性
知识点
- xss 跨站请求攻击
- xsrf 跨站请求伪造
xss
1.在新浪微博写一篇文章，同时偷偷插入一锻<script>
2.攻击代码中，获取cookie，发送自己的服务器
3.发布博客，有人查看博客内容
4.会把查看者的cookie发送到攻击者的服务器
解决
前端替换关键词，例如替换 < 为 < >为 >
后端替换
xsrf
- 你已登录一个购物网站，正在浏览商品
- 该网站付费接口为 xx.com/pay?id=100 但是没有任何验证
- 然后呢收到一封邮件，隐藏着<img src=xx.com/pay?id=100>
- 你查看邮件的时候，就已经悄悄的付费购买了
解决
增加验证流程，如输入指纹，密码、短信验证码
