JS基础知识(九)运行环境

题目：

1. 从输入url得到html的详细过程
2. Window.onload和DOMContentLoaded的区别

 

知识点：

1.加载资源的形式
  （1）输入url（或跳转页面）加载html
    Http://www.baidu.com
  （2）加载html中静态资源
   <script src=”/static/js/jquery.js”></script>
   Js.css.img...
2.加载一个资源的过程
    I.浏览器根据DNS服务器得到域名的IP地址
   II.向这个IP的机器发送http请求
   III.服务器收到，处理，并返回http请求
   IV.浏览器得到返回内容
3.浏览器渲染页面的过程
（I-III）结构，样式，整合
   I.根据HTML结构生成DOM Tree(没样式)
   II.根据CSS生成CSSOM
   III.将DOM和CSSOM整合形成RenderTree(有样式)
   IV.根据RenderTree开始渲染和展示
   V.遇到<script>时，会执行并阻塞渲染

script里面有JS,JS会阻塞渲染，JS可以改变DOM结构，是一个冲突的过程

几个示例：

没有CSS样式，就直接渲染P标签。。

Url,html代码加载
再渲染过程，一步步分析，HEAD里面有CSS，就下载CSS，浏览器知道了这个CSS规则
然后在DIV时候已经知道了规则，然后会渲染他CSS

示例三：

首先输入URL，12行代码加载出来，浏览器解析，到HEAD没问题，到BODY开始渲染，第八行渲染一个DIV,内容DEFAULT，SCRIPT，然后阻塞，执行这个JS，等着执行完成，把这个DIV内容改变，再渲染P

实例四：

先HTML内容加载，开始渲染，第八行，第九行，第十行，IMG是异步请求，

如果P渲染完0.1S，这个图片要2S加载完。那WINODW.ONDLOAD就2S后执行，然后DOMCONTENTLOAD就是O.1S后执行。

思考：
（1）为什么要把CSS放在HEAD中？

   先渲染成默认，过了一会儿（看网络情况。。。），再重新渲染成WIDTH:100PX
   用户体验差，性能差，一次干的事情两次干
（2）为什么要把JS放在BODY最下面？

不会阻塞之前HTML结构渲染，页面更快出来，script此时能拿到所有标签。

2.性能优化
1.这本身就是一个综合性的问题
2.没有标准答案，如果要非常全面，能写一本书。。
3.只关注核心点，针对面试

原则：
1.多使用内存，缓存或者其他方法
2.减少CPU计算，减少网络请求，减少IO操作

从哪里入手：
1.加载页面和静态资源
2.页面渲染

1.加载资源优化
I.静态资源的压缩合并
II.静态资源缓存
III.使用CDN让资源加载更快（。。）
IV.使用SSR后端渲染，数据直接输出到HTML中。（SSR服务端渲染）

2.渲染优化
I.CSS放前面，JS放后面
II.懒加载（图片懒加载，下拉加载更多）
III.减少DOM查询，对DOM查询做缓存
IV.减少DOM操作，多个操作尽量合并在一起执行
V.事件节流
VI.尽早执行操作（如DOMContentLoaded）

几个示例：
1.资源合并

commond.js合并。。
2.缓存
是通过链接名称控制缓存
<script src=”abc_1.js”></script>
只有内容改变的时候，链接名称才会改变
<script src=”abc_2.js”></script>

CDN

使用SSR后端渲染：

现在VUE,REACT提出了这样的概念
其实jsp,php,asp,都属于后端渲染
数据直接输入到HTML中，浏览器直接拿到直接渲染
没必要AJAX再一遍

懒加载：

属性名data-realsrc 真正图片
一开始显示很小的图，要用到再用真正的图

缓存DOM查询：

第一个每一次都要一次DOM查询
第二个一次DOM查询

合并DOM插入：

定义片段，十个LI依次拆入到片段中，最后再把片段插入，
这样就是一次插入

关键是使用createDocumentFragment() 这个不会触发DOM操作

事件节流：

尽早操作：

3.安全性
后端做一些数据库的一些操作，服务端等层面讲
综合性的问题：场景的前端安全问题有哪些

知识点：
1.XSS跨站请求攻击
在新浪博客写一篇文章，同时偷偷插入<script>
就是当别人浏览时，插入的代码就执行。
攻击代码中，获得cookie，发送自己的服务器。
cookie有帐号信息
发布博客，有人查看博客内容
会把查看者的cookie发送到攻击者的服务器。

预防：
前端替换关键字，例如替换<为&lt,>为&gt;JS执行效率低，只有一个浏览器
后端替换，建议

2.XSRF跨站请求伪造
你已经登录一个购物网站，正在浏览器商品
该网站付费接口是xx.com/pay?id=100但是没有任何验证
然后你收到一个邮件，隐藏着<img src=xxx.com/pay?id=100>
你查看邮件的时候，就已经悄悄的付费购买了

解决方案：
增加验证流程，如输入指纹，密码，短信验证码。
前端配合的角色。