一、前端性能优化：
- 内容部分：尽量减少HTTP请求、减少DNS查找、避免跳转、缓存Ajax、预加载、减少DOM 元素数量、减少页面层级嵌套、用域名划分页面内容、使frame数量最少、避免404错误、减少Cookie体积；
- 服务器部分：使用内容分发网络、使用Gzip、避免空图片、文件地址等；
- CSS部分：文件合并、放顶部、避免使用import、避免使用滤镜、避免使用表达式；
- JS部分：文件合并、放底部、封装代码去除重复的、减少DOM操作；
- Image部分：合并小图标、不要在HTML缩放图片、延迟加载图片、图片预加载。
二、前端安全防护：
- XSS攻击：在前端方面可以理解为JS注入。防范：将前端数据转义、保护好cookie。
- CSRF攻击：ajax的get、post提交数据时候发生。防范：提交时候带上session、token之类的验证。
- 网络劫持攻击：访问的时候，数据被中间代理劫持者所获。防范：建议使用HTTPS加密。
- 控制台注入代码：诱惑用户去控制台粘贴东西。防范：控制台加上提示警告。
- 钓鱼攻击：对网站的伪造。超出前端范围了
开发时候注意事项：
- 用户信息进行严格检测
- 用户输入信息进行过滤或转义
- 重要内容加密再传输
- 检查、验证请求来源
- 使用黑名单、白名单
三、从输入URL到页面加载发生了什么？
- DNS解析：查找URL对应的IP地址
- TCP连接：发送HTTP请求建立连接
- 服务器处理请求并返回数据
- 浏览器解析并渲染页面：
- 由上到下开始解析HTML
- 当解析到头部的css文件时候，同步下载
- 接着解析body部分，边解析边生成DOM树
- css下载完后就同步生成对应的DOM节点和CSS渲染树
- 渲染树有了结构模型，就开始渲染节点的布局位置
- 渲染中遇到图片，就会去下载，并返回到相应的图片位置
- 渲染中遇到JS调整DOM，可能从渲染DOM那里重新来过。