前端之实际问题

在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？

输入 URL 后，找到域名服务器 IP ,浏览器首先会寻找缓存，查看缓存记录。如果没有则查询DNS服务器，得到服务器IP地址后，发送http请求，并将这个 http 请求建立 TCP 链接，服务器解析请求返回html给浏览器，客户端解析HTML生成DOM树，然后解析CSS生成Render渲染树，最后构建布局树，含有元素的定位和几何信息。然后进行异步请求下载相应资源。最后GPU渲染画面。用户看到相应页面。

 

重构回流

重构：指的是改变元素的外观时所触发的浏览器行为，比如颜色、背景。不会引发页面的重新布局，不一定伴随着回流。

回流：浏览器为了重新渲染页面需要重新计算元素布局，开销大，回流可以理解为进行计算，避免元素的回流-->最好使其脱离文档流，就不会引起回流，比如设置position：absolute，或者display：none。

 

 

 

首页白屏

1、css文件加载需要一些时间，在加载的过程中页面是空白的。 解决：可以考虑将css代码前置和内联。

2、等待异步加载数据再渲染页面导致白屏。 解决：在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html。

3、首屏内联js的执行会阻塞页面的渲染。 解决：尽量不在首屏html代码中放置内联脚本。

首页白屏解决方案

1减少文件加载体积，如html压缩，js压缩

2加快js执行速度 比如常见的无限滚动的页面，可以使用js先渲染一个屏幕范围内的东西

3提供一些友好的交互，比如提供一些假的滚动条

4使用本地存储处理静态文件。

 

 

 

优化策略

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7）图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳