前端面试必考知识点梳理-性能优化

问题:从输入url到生成页面的详细过程


页面渲染

1.浏览器根据DNS服务器得到域名的IP地址

2.向这个IP的机器发送HTTP请求

3.服务器处理并返回请求

4.浏览器得到返回内容

5.浏览器根据HTMl结构生成DOM Tree

6.根据css生成CSSOM

7.将DOM 和  CSSOM整合成RenderTree(渲染树)

8.根据RenderTree 开始渲染

9.遇到script标签会立即执行,并阻塞渲染


问题:为什么css文件要放在head中?JS文件要放在body下边?

因为css可以先定义dom的样式规则,然后渲染。如果放在dom后边,dom会先按默认的样式渲染一遍,然后在按照css在渲染一遍。

JS文件会先执行,阻塞渲染。JS执行完再继续渲染下边的dom。而且js代码也有可能操作下边的dom,报错。


性能优化

加载页面和静态资源入手:

1.静态资源合并压缩(例如js文件)

2.静态资源缓存

3.使用CDN让资源加载更快(CDN会就近获取资源)

4.使用SSR后端渲染

页面渲染入手:

1.CSS放前边,JS放后边

2.懒加载(图片懒加载,下拉更多)

3.减少dom查询和操作。缓存dom

4.事件节流

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容