*知识点
（一）基础
1.加载资源的形式
- 输入url（或跳转页面）加载html
- 加载html中的静态资源
2.加载一个资源的过程
- 浏览器根据DNS服务器得到域名IP地址
- 向这个IP机器发送http请求
- 服务器收到，处理并返回http请求
- 浏览器得到返回内容
3.浏览器渲染页面的过程
- 根据html结构生成DOMTree
- 根据css生成CSSOM
- 将DOM和CSSOM整合成RenderTree
- 根据RenderTree开始渲染和展示
- 遇到<script>时，会执行并阻塞渲染
（二）问题
1.window.onload和DOMContentLoaded区别
- window.addEventListener('load',function( ){...})//页面所有资源全部加载完才执行
- document.addEventListener('DOMContentLoaded',function( ){...})//DOM渲染完即可执行，此时图片视频可能没加载完
2.性能优化
- 原则
- 多用内存、缓存或其他方法
- 减少CPU计算，减少网络请求
- 两方面入手
- 加载页面和静态资源
- 静态资源压缩合并（没什么关联硬是合在一起；webpack）
- 静态资源缓存
- 用CDN
- 用SSR后端渲染，数据直接输出到html中
- 页面渲染
- css<link>在<head></head>中；script放在<body></body>中最底下
- 懒加载（图片懒加载；下拉加载更多）
- 减少DOM查询，对DOM查询做缓存（var hi = document.getElementById('hey');）
- 减少DOM操作，多个操作尽量合并在一起执行
- 事件节流（不要频繁触发）
- 尽早执行操作（DOMContentLoaded）
- 加载页面和静态资源
3.安全性
- XSS跨站请求攻击
- XSRF跨站请求伪造
5157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
