前端面试题-运行环境

本文主要包括以下3部分：
1、网页加载过程
2、性能优化
3、安全

网页加载过程

1. 从输入url到渲染出页面的整个过程

主要分为两个过程，分别为下载资源和渲染页面。

• 下载资源：各个资源类型，下载过程
• 渲染页面：结合html、css、javascript、图片等

加载资源的形式：HTML代码，媒体文件，如图片、视频等，JavaScrip，css

加载资源的过程：

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

渲染页面的过程

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

为什么把CSS放到head里
为何把JS放到body最后 会导致页面渲染较长，尽量先显示出内容，之后再进行修改

2、window.onload DOMContentLoaded 区别

• window.onload 资源全部加载完才能执行，包括图片
• DOMContentLoaded DOM渲染完成即可，图片可能尚未下载

性能优化

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

从何入手：

让加载更快

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

让渲染更快

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

安全

常见的WEB前端攻击方式有哪些？

XSS跨站请求攻击

• 一个博客网站，我发表一篇博客，其中嵌入<script>脚本
• 脚本内容：获取cookie，发送到我的服务器（服务器配合跨域）
• 发布这篇博客，有人查看它，我轻松收割访问者的cookie

XSS攻击预防

• 替换特殊字符，如 < 变为 < > 变为 >
• <script> 变为 <script> ，会直接显示，而不会作为脚本执行
• 前端要替换，后端也要替换

CSRF跨站请求伪造

CSRF预防

• 使用post接口
• 增加验证，例如密码、短信验证码、指纹等