性能优化

网络请求优化

DNS Lookup，减少重定向，避免 JS、CSS 阻塞，并行请求，代码压缩，缓存，按需加载，前端模块化

前端渲染的优化

在改变文档根元素的字体颜色等视觉性信息时，会触发整个文档的重绘，而改变某元素的字体颜色则只触发特定元素的重绘；改变元素的位置信息会同时触发此元素（可能还包括其兄弟元素或子级元素）的布局和重绘。某些重大改变，如更改文档根元素的字体尺寸，则会触发整个文档的重新布局和重绘，据此及上文所述，推荐以下优化和实践：

• HTML文档结构层次尽量少，最好不深于六层；
• 脚本尽量后放，放在前即可；
• 少量首屏样式内联放在标签内；
• 样式结构层次尽量简单；
• 在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；
• 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；
• 动画尽量使用在绝对定位或固定定位的元素上；
• 隐藏在屏幕外，或在页面滚动时，尽量停止动画；
• 尽量缓存DOM查找，查找器尽量简洁；
• 涉及多域名的网站，可以开启域名预解析

浏览器渲染主要流程

参考链接

浏览器渲染页面过程与页面优化
Web 性能优化-页面重绘和回流（重排）
16毫秒的优化

MD基本常用用法

从用户输入浏览器输入url到页面最后呈现 有哪些过程？

• 用户输入URL地址
• 浏览器解析URL解析出主机名
• 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）
• 浏览器将端口号从URL中解析出来
• 浏览器建立一条与目标Web服务器的TCP连接（三次握手）
• 浏览器向服务器发送一条HTTP请求报文
• 服务器向浏览器返回一条HTTP响应报文
• 关闭连接 浏览器解析文档
• 如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕