web前端性能优化

2019-12-17  本文已影响0人  雨中晨星

什么是渐进增强和优雅降级?
渐进增强(progressive enhancement):针对低版本的浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。(从被所有浏览器支持的基本功能开始,逐步添加那些只有新式浏览器才支持的功能,向页面添加无害于基础浏览器的额外样式和功能,当浏览器支持时,它们会自动呈现出来并发挥作用)。

优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。(web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。)
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要。

什么是页面的回流和重绘?
回流是指当页面的结构或者标签的尺寸发生变化的时候,浏览器需要对页面进行重排,并重新渲染;
重绘是指当页面上的标签的外观(比如字体颜色,或背景颜色)发生改变的时候,浏览器需要重新对页面进行渲染。
所以回流一定会引起页面的重绘,但重绘不一定会引起回流。
要提高页面性能,就要尽可能的减少页面的回流和重绘。

针对页面性能优化,你有哪些优化方案?
资源加载方面:
减少http请求次数,具体方案,代码合并(合并css,js),使用精灵图;
减少http请求数据量,代码压缩(css,js,html),合理设置缓存;
启用CDN加速服务;
代码层面:
避免滥用全局变量,减少作用域查找(能用局部变量就不要声明全局变量),不要滥用闭包;
减少DOM操作,操作DOM的时候已经查找到的DOM对象进行缓存,避免重复查找;
使用图片懒加载,避免单次加载图片数量过多导致页面卡顿;
将script标签写在页面底部,因为js的加载会阻塞页面的渲染;
不要在本地写大量cookie,因为cookie会伴随每一次http请求;

什么是CDN加速?
CDN(Content Delivery Network)全称内容分发网络,是运营商所提供的一项增值服务,花钱就可以拥有这项加速服务。CDN主要是对网站的静态资源进行加速,CDN在全国会有很多节点服务器,当第二次有人访问的时候,那么服务器就会从就近的CDN节点服务器上获取网站所需的静态资源,由于CDN服务器的性能比较高,并且距离客户端的物理距离比较近,所以就可以实现加速。启用CDN服务只需要在运营提供商提供的后台进行配置(配置要对那个域名启用CDN服务),不需要对代码做任何修改。

什么是SEO?
SEO(Search Engine Optimizing)搜索引擎优化,就是让搜索引擎去抓取我们的网页,为了让搜索引擎抓取我们的网页,我们可以在书写代码的时候做一些工作,比如合理设置网页title(标题),keywords(关键词),description(描述);因为搜索引擎在抓取网页以后首先回去分析这几个关键信息。

为什么利用多个域名来存储网站静态资源会更有效?
因为浏览器请求静态资源文件有一个并发数量限制,每次只能请求同一个域名下的若干个资源文件(根据浏览器的不同会有差异),如果把资源文件存放在多个不同的域名下面就会突破浏览器的限制;其次,启用多个静态资源服务器,可以减轻主服务器的压力。

移动端点击事件会有多少秒的延迟?什么原因造成的?如何解决?
移动端的点击事件会有300ms的延时;
是因为浏览器为了保留双击缩放的功能所造成的,早期浏览器都有一个双击缩放功能,在用户点击一次以后,浏览器会等待第二次点击,如果用户在300ms内进行了第二次点击,那么浏览器就会执行缩放的功能,如果300ms内没有再次点击,则会当作单击事件处理;
解决方案:
使用touch触摸事件来模拟点击事件;使用fastclick插件来解决;静止页面缩放

你了解的网站攻击方式有哪些?
xss(跨站脚本攻击),csrf(跨站请求伪造)

谈谈js中的垃圾回收机制
1,标记清除(mark and sweep);
大部分浏览器以此方式进行垃圾回收,当变量进入执行环境(函数中声明变量)的时候,垃圾回收期将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”,在离开环境之后还有的变量则是需要被删除的变量。标记方式不定,可以是某个特殊位的反转或维护一个列表等。垃圾收集器给内存中的所有变量都加上标记,然后去掉环境中的变量以及被环境中的变量引用的变量的标记。在此之后再被加上的标记的变量即为需要回收的变量,因为环境中的变量已经无法访问到这些变量。
2,引用计数(reference counting);
这种方式常常会引起内存泄漏,低版本的IE使用这种方式。机制就是跟踪一个值的引用次数,当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1,当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。

JS是单线程还是多线程?
单线程,单位时间内只能处理一个进程。

JS是如何实现异步操作的?
JS虽然是单线程,但是浏览器是多线程的,JS中的异步操作基本都是由浏览器提供的子线程来完成的。

分别介绍下MVC,MVVM,MVP这三种设计模式?
MVC是后端语言的一种设计模式,主要是实现对代码分层,M(model)数据模型层,主要负责操作数据库;V(view)视图层,主要负责进行界面展示,可以认为前端的html,css,js充当的就是视图层;C(controller)业务控制层,主要负责控制具体的业务逻辑,负责将model数据层的数据交给view视图层进行展示。

MVVM是前端的一种设计模式,vue就是基于这种模式来设计的,是MVC演变过来的。M(model)数据层,主要负责数据和方法的初始化;V(view)视图层,可以认为html,css充当的就是视图层的角色;VM(view model)视图模型层,负责链接数据层和视图层,将数据层的数据交给视图层,将视图层的行为传递给数据层。

MVP也是从后端的MVC设置模式中演化过来的,主要应用与安卓开发中。M(model)数据层,V(view) UI逻辑,P(Presenter)业务逻辑

上一篇下一篇

猜你喜欢

热点阅读