页面优化与安全

页面加载

• 题目

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

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

2. window.onload 和 DOMConentLoaded 的区别

   • window.onload 在全部资源加载完后才会执行，包括图片、视频
   • DOMConentLoaded 在 DOM 渲染完即可执行，即使图片、视频还没有加载完

3. 为何要将 css 放入 header 中?

   • 提升性能，提升用户体验

4. 为何要将<script>放在 body 最下面？

   • 防止阻塞，提升性能

• 知识点

1. 加载资源的形式

   • 输入 URL（或跳转页面）加载 HTML
   • 加载 HTML 中的静态资源（外部引入 JS 等）

2. 浏览器渲染页面的过程

   • 根据 HTML 结构生成 DOM Tree
   • 根据 CSS 生成 CSSOM
   • 将 DOM 和 CSSOM 整合形成 RenderTree
   • 根据 RenderTree 开始渲染和展示
   • 遇到<script>时，会执行并阻塞渲染，因为 JS 可以改变 DOM 结构

性能优化

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

1. 加载资源优化

   • 静态资源的压缩合并

     <script src="a.js"></script>
     <script src="b.js"></script>
     <script src="b.js"></script>
     //合并为以下文件
     <script src="abc.js"></script>
     

   • 静态资源缓存

     //通过连接名称控制缓存
     <script src="a_1.js"></script>
     //内容改变时，才改变链接名称
     <script src="a.js"></script>
     

   • 使用 CDN 让资源加载更快
   • 使用 SSR 后端渲染，数据直接输出到 HTML 中

2. 渲染优化

   • CSS 放前面，JS 放后面

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

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

     //缓存查询
     //未缓存
     var i
     for (i = 0; i < document.getElementByTagName('p').length; i++) {
       //todo
     }
     //以缓存
     var i
     var pList = document.getElementByTagName('p')
     for (i = 0; i < pList.length; i++) {
       //todo
     }
     

     //合并DOM
     var listNode = document.getElementById('list')
     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.addEventListener('keyup', function() {
       if (timeoutId) {
         clearTimeout(timeoutId)
       }
       timeoutId = setTimeout(function() {
         //todo
       }, 200)
     })
     

   • 尽早执行操作（如：DOMContentLoaded）

     window.addEventListener('load', function() {
       //todo
     })
     document.addEventListener('DOMContentLoaded', function() {
       //todo
     })
     

安全性

• 知识点

1. XSS 跨站请求攻击

   • 威胁：博客网站写文章时，插入<script>，攻击代码获取 cookie，发送到自己的服务器
   • 预防：前端替换关键字，例如替换<为< , >为>；后端替换。

2. SXRF 跨站请求伪造

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