运行环境

标签：10个   .com   其他   输出   append   概念   view   length   结构   

• 浏览器就可以通过访问链接来得到页面的内容，通过绘制和渲染，显示出页面的最终的样子
• 知识点：页面加载过程、性能优化、安全性

1、页面加载过程

• 知识点：加载资源的形式、加载一个资源的过程、浏览器渲染页面的过程

（1）、加载资源的形式

• 输入url(或跳转页面)加载html
• http://www.baidu.com
• 加载html的静态资源
• <script src="./jquery.js"></script>

(2)、加载资源的过程

• 浏览器根据DWS服务器得到域名的iP地址，向这个IP的机器发送http请求，服务器收到，处理并返回http请求，浏览器得到返回内容

（3）、浏览器渲染页面的过程

• 根据HTML结构生成DOM Tree
• 根据css生成cssOM
• 将DOM和cssOM 整合形成RenderTree(渲染树)
• 根据RenderTree开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染

window.onload和DOMContentLoaded

window.addEventListener(‘load‘,function(){
//页面的全部资源加载完才执行，包括图片视频等
})
document.addEventListener(‘DOMContentLoaded‘,function(){
//DOM渲染完即可，此时图片、视频还可能没有加载完
})

2、性能优化

（1）、原则

• 多使用内存，缓存或者其他方法
• 减少CDN计算，减少网络

（2）、从哪入手

• 加载资源和静态资源
• 页面渲染

（3）、加载资源优化

• 静态资源的压缩合并
• 静态资源缓存
• 使用CDN让资源加载更快
• 使用SSR后端渲染，数据直接输出到HTML中

（4）、渲染优化

• css方前面，js方后面
• 懒加载（图片懒加载，下拉加载更多）
• 减少DOM查询，对DOM查询做缓存
• 减少DOM操作，多个操作尽量合并在一起执行
• 事件节流
• 今早执行操作（如DOMContentLoaded)

(5)、缓存

• 通过连接名称控制缓存 <script src="abc_1.js"></script>
• 只有内容改变的时候，链接名称才会改变<script src="abc_2.js"></script>

(6)、使用SSR后端渲染

• 现在vue、React提出了这样的概念
• 其实jsp、php、asp都属于后端渲染

（6）、懒加载

 <img id="img1" src="preview.png" data-realsrc="abc.png" />//data-realsrc随便写的名字
var img1 = document.getElementById(‘img1‘);
img1.src=img1.getAttribute(‘data-realsrc")

(7)、缓存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
}

(8)、事件节流

var textarea =document.getElementById(‘text‘);
var timeoutId;
textarea.addEventListener(‘keyup‘,function(){
    if(timeoutId){
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(function(){
        //触发change事件
    },100)
})

（9）、合并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);

3、安全性

• 知识点：xss跨域请求攻击、XSRF跨站请求伪造

（1）、XSS

• 在新浪博客写一篇文章，同时偷偷插入一段<script>攻击代码中获取cookie，发送自己的服务里发布博客，有人查看博客内容会把查看者的cookie发送至攻击者的服务器
• 遇防？
• 前端替换关键字，例如替换<&lt>为>
• 后端替换

（2）、XSRF

• 你已登录一个购物网站，正在浏览商品，该网站付费接口是xxx.com/pay?id=100但是没有任何验证
• 然后你收到一封邮件，隐藏着<img src="xxx.com/pay?id=100>
• 你查看邮件的时候，就已经悄悄的付费购买了，
• 解决方案
• 增加验证流程如输入指纹，密码，短信验证码

运行环境

标签：10个   .com   其他   输出   append   概念   view   length   结构   

原文地址：https://www.cnblogs.com/DCL1314/p/10393142.html