JS运行环境知识点解析

js运行环境

知识点

页面加载过程

性能优化

安全性

1. 页面加载

题目

从输入url到得到html的详细过程

window.onload 和 domcontentloaded 的区别

页面加载知识点

加载资源的形式 

输入url（或跳转页面）加载html

加载html中的静态资源

加载一个资源的过程 

根据dns服务器得到域名的ip地址

向这个ip的及其发送 http 请求

服务器收到、处理并返回http请求

浏览器得到返回内容

浏览器渲染页面的过程 

根据html结构生成 dom tree

根据 css 生成后 cssom

将 dom和cssom 整合形成 rendertree

根据rendertree开始渲染和展示

遇到 < script >时，会执行并阻塞渲染

解答

从输入url到得到html的详细过程 

浏览器根据dns服务器得到域名的ip地址

向这个ip的及其发送 http 请求

服务器收到、处理并返回http请求

浏览器得到返回内容

window.onload 和 domcontentloaded 的区别 

window.onload 页面的全部资源加载完才会执行，包括图片、视频等

dom 渲染完即可执行，此时图片、视频还没加载完

性能优化

这是一个综合性的问题

原则

多使用内存、缓存或者其他方法

减少 cpu 计算、减少网络请求

入手点

加载页面和静态资源

页面渲染

加载资源优化

静态资源的压缩合并

<script src="a.js"></script>

<script src="b.js"></script>

<script src="c.js"></script>

<script src="abc.js"></script>

静态资源缓存

通过链接名称控制缓存，< script >标签只要内容不变，链接名称才变

使用cdn 让资源加载更快 

https://www.bootcdn.cn/

使用ssr 后端渲染，数据直接输出到html中 

现在 vue react 提出了这样的概念

其实 php 都属于后端渲染

渲染优化

css放前面，js放后面

懒加载（图片懒加载、下拉加载更多）

<!-- 先显示小图片，必要时显示real图片 -->

<img id="img1" src="preview.png" data-realsrc="abc.png">

<script>

var img1 = document.getelementbyid('img1')

img1.src = img.getattribute('data-realsrc')

</script>

减少dom查询，对dom查询做缓存

// 未缓存 dom 查询

var i

for (i = 0; i < document.getelementsbytagname('p'.length; i++) {

// todo

})

// 缓存了dom 查询

var plist = document.getelementsbytagname('p')

var i

for (i = 0; i< plist.length; i++) {

//todo

}

减少dom操作，多个操作尽量合并在一起执行

var listnode = document.getelementbyid('list')

// 要插入 10 个 li 标签

// 先定义片段，对片段进行插入

var frag = document.createdocumentfragment();

var x, li;

for(x = 0; x < 10; x++) {

li = document.createelement("li");

li.innerhtml = "list item " + x;

frag.appendchild(li);

}

listnode.appendchild(frag);

事件节流

var textarea = document.getelementbyid('text')

var timeoutid

textarea.addevemtlistener('keyup', function () {

if (timeoutid) {

  cleartimeout(timeoutid)

}

timeoutid = settimeout(function () {

  // 触发 change 事件

}, 100)

})

尽早执行操作（如domcontentloaded）

安全性

安全性知识点

xss 跨站请求攻击

xsrf 跨站请求伪造

xss

在新浪博客写一篇文章，同时偷偷插入一段< script >

攻击代码中，获取cookie，发送到自己的服务器

解决方法

前端替换关键字，例如替换 < 为 & lt;

后端替换

xsrf

你已登录一个购物网站，正在浏览商品

该网站付费接口是 xxx.com/pay?id=100 但是没有任何验证

然后你收到一封邮件，隐藏着< img src= xxx.com/pay?100>

你查看邮件的时候，就已经悄悄的付费购买了

解决方法

增加验证流程，如输入指纹、密码、短信验证码