前端面试总结

来源：天津达内IT培训学校时间：2021/12/15 14:40:22

　　浏览器渲染页面的过程：

　　根据html结构生成DomTree;

　　根据css 生成CssOm;

　　根据DomTree和CssOm 生成RenderTree;

　　浏览器会根据生成的RenderTree 进行渲染和展示整个页面。

　　遇到 script 标签会阻塞【js有权力改变Dom的结构】

　　RenderTree 和DomTree 的区别：

　　RenderTree： 有样式和结构。

　　Dom Tree：仅有html结构。

　　2window.onload 与 window.DomContentLoaded 的区别：

　　onload ： 是指页面的全部资源都加载完了才执行，包括图片，视频等。

　　DomContentLoaded：Dom全部渲染完成就会执行js，此时的img 或者视频文件可能没有加载完【这种方法性能更好】【jquery 和 zepto 都是用这种方法来加载数据】

　　3前端性能优化：

　　原则：

　　减少cpu 的计算，减少网络请求

　　多使用内存，缓存

　　2.前端需要做的优化性能：

　　css 在页面前面，js放在dom 的后面。

　　真实项目中，我们较好把CSS或者JS文件进行合并压缩;尤其是在移动端开发的时候，如果CSS或者JS内容不是很多，我们可以采取内嵌式，以此减少HTTP请求的次数，加快页面加载速度;

　　图片使用懒加载，下拉加载更多的方式;

　　采用图片懒加载技术，在页面开始加载的时候，不请求真实的图片地址，而是用默认图占位，当页面加载完成后，在根据相关的条件依次加载真实图片(减少页面加载HTTP请求的次数)

　　真实项目中，我们开始图片都不加载，页面加载完成，先把屏幕中可以看见的图片进行加载，随着页面滚动，在把下面区域中能够呈现出来的图片进行加载

　　根据图片懒加载技术，我们还可以扩充出，数据的懒加载1)开始加载页面的时候，我们只把首屏或者前两屏的数据从服务器端进行请求(有些网站首屏数据是后台渲染好，整体返回给客户端呈现的)

　　2)当页面下拉，滚动到哪个区域，在把这个区域需要的数据进行请求(请求回来做数据绑定以及图片延迟加载等)

　　3)分页展示技术采用的也是数据的懒加载思想实现的：如果我们请求获取的数据是很多的数据，我们较好分批请求，开始只请求页的数据，当用户点击第二页(微博是下拉到一定距离后，再请求第二页数据...)的时候在请求第二页数据...

　　减少dom 的查询，对dom查询做缓存

　　减少dom操作，对多个dom操作合并一起执行

　　用事件节流

　　用DomContentLoaded 来代替onload

　　使用字体图标代替一些页面中的位图(图片)，这样不仅做适配的时候方便，而且更加轻量级，而且减少了HTTP请求次数(类似于雪碧图)

　　在客户端和服务器端进行数据通信的时候，我们尽量采用JSON格式进行数据传输

　　[优势]

　　1)JSON格式的数据，能够清晰明了的展示出数据结构，而且也方便我们获取和操作

　　2)相对于很早以前的XML格式传输，JSON格式的数据更加轻量级

　　3)客户端和服务器端都支持JSON格式数据的处理，处理起来非常的方便

　　真实项目中，并不是所有的数据都要基于JSON，我们尽可能这样做，但是对于某些特殊需求(例如：文件流的传输或者文档传输)，使用JSON就不合适了

　　采用CDN加速 CDN：分布式(地域分布式)

　　CSS选择器优化

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/2346/news/456129/违者必究！ 以上就是天津达内IT培训学校 小编为您整理 前端面试总结的全部内容。