5 运行环境

系列文章目录

---

目录

系列文章目录

前言

一、网页是如何加载渲染

二、性能优化

总结

---

前言

---

一、网页是如何加载渲染

加载过程

• DNS解析：域名->IP地址
• 浏览器根据IP地址向服务器发起http请求
• 服务器处理http请求，并返回给浏览器

渲染过程

• 根据HTML代码生成DOM Tree
• 根据CSS代码生成CSSOM
• 将DOM Tree和CSSOM整合形成 Render Tree(渲染树)
• 根据Render Tree渲染页面
• 遇到<script>则暂停渲染，优先加载并执JS代码，完成再继续
• 直至把Render Tree渲染完成

// 页面全部资源加载完才会执行，包括图片、视频等
window.addEventLister('load', function(){})

// DOM 渲染完成即可执行，此时图片、视频可能还没加载完
document.addEventLister('DOMContentLoaded', function(){})

二、性能优化

性能优化原则

• 多使用内存、缓存或其他方法
• 减少CPU计算量，减少网络加载耗时
• (适用于所有编程的性能优化-空间换时间)

加载更快

• 减少资源体积：压缩代码
• 减少访问次数：合并代码，SSR服务器端渲染，缓存
• 适用更快的网络：CDN

渲染更快

• CSS放在head，JS放在body最下面
• 尽早开始执行JS，用DOMContentLoaded触发
• 懒加载（图片懒加载，上滑加载更多）
• 对DOM查询进行缓存
• 频繁DOM操作，合并到一起插入DOM结构
• 节流 throttle 防抖 debounce

缓存

• 静态资源加hash后缀，根据文件内容计算hash
• 文件内容不变，则hash不变，则url不变
• url和文件不变，则会自动触发http缓存机制，返回304

//contenthash
module.exports = {
    mode: 'prodiction',
    entry: path.join(__dirname,'src','index'),
    output: {
        filename: 'bundle.[contenthash].js',
        path: path.join(__dirname,'dist')
    },
}

// 打包出文件名
bundle.abcd7788iwuyu0.js

SSR

• 服务器端渲染：将网页和数据一起加载，一起渲染
• 非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据

---

总结