可做外链的网站,邢台网站建设开发,惠州市网站开发,免费网站空间怎么办面试题 1. 简述如何对网站的文件和资源进行优化?
参考回答#xff1a;
举列#xff1a;
1.文件合并#xff08;目的是减少http请求#xff09;#xff1a;使用css sprites合并图片#xff0c;一个网站经常使用小图标和小图片进行美化#xff0c;但是很遗憾这些小图片…面试题 1. 简述如何对网站的文件和资源进行优化?
参考回答
举列
1.文件合并目的是减少http请求使用css sprites合并图片一个网站经常使用小图标和小图片进行美化但是很遗憾这些小图片占用了大量的HTTP请求因此可以采用sprites的方式把所有的图片合并成一张图片 可以通过相关工具在线合并也可以在ps中合并。
2.使用CDN内容分发网络加速降低通信距离。
3.缓存的使用添加Expire/Cache-Control头。
4.启用Gzip压缩文件
5.将css放在页面最上面。
6.将script放在页面最下面。
7.避免在css中使用表达式。
8.将css, js都放在外部文件中。
9.减少DNS查询。
10.文件压缩最小化css, js减小文件体积。
11.避免重定向。
12.移除重复脚本。
13.配置实体标签ETag。14.使用AJAX缓存让网站内容分批加载局部更新。面试题 2. 哪些常见的前端Web性能优化的方法
参考回答
前端Web性能优化建议以下操作措施
1 减少http请求次数CSS Sprites, JS、CSS源码压缩、图片大小控制合适网页GzipCDN托管data缓存 图片服务器。
2前端模板 JS数据减少由于HTML标签导致的带宽浪费前端用变量保存AJAX请求结果每次操作本地变量不用请求减少请求次数
3 用innerHTML代替DOM操作减少DOM操作次数优化javascript性能。
4 当需要设置的样式很多时设置className而不是直接操作style。
5 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
6 避免使用CSS Expressioncss表达式)又称Dynamic properties(动态属性)。
7 图片预加载将样式表放在顶部将脚本放在底部 加上时间戳。
8 避免在页面的主体布局中使用tabletable要等其中的内容完全下载之后才会显示出来显示divcss布局慢。对普通的网站有一个统一的思路就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是在不影响功能和体验的情况下能在浏览器执行的不要在服务端执行能在缓存服务器上直接返回的不要到应用服务器程序能直接取得的结果不要到外部取得本机内能取得的数据不要到远程取内存能取到的不要到磁盘取缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成例如join查询减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分换语言是无法“优化”的。面试题 3. 哪些常见操作会前端造成内存泄漏
参考回答
1内存泄漏: 即为变量内容持续占用内存空间不释放垃圾回收机制也没有将该内存回收的情况
2内容泄露的原因:
1死循环
2定时器没有清除
3绑定的事件没有解除
4递归调用没有结束条件3主要存在内存泄漏的问题点: :
1BOM DOM对象泄漏
2scipt中存在对BOM DOM对象的引用
3javaScript对象泄漏
4闭包函数导致的泄漏 主要关注的代码点
DOM中的addEventLisner 函数及派生的事件监听 比如Jquery 中的on 函数 vue 组件实例的 $on 函数第三方库中的初始化函数
BOM对象的事件监听比如webSocket的监听事件避免不必要的函数引用如果是要render函数避免在html标签中DOM BOM事件面试题 4. 简述前端性能优化问题
参考回答
代码层面避免使用css表达式避免使用高级选择器通配选择器。
缓存利用缓存Ajax使用CDN使用外部js和css文件以便缓存添加Expires头服务端配置Etag减少DNS查找等
请求数量合并样式和脚本使用css图片精灵初始首屏之外的图片资源按需加载静态资源延迟加载。
请求带宽压缩文件开启GZIP面试题 5. 简述三种减少页面加载时间的方法
参考回答
1.优化图片
2.图像格式的选择GIF提供的颜色较少可用在一些对颜色要求不高的地方
3.优化CSS压缩合并css如margin-top,margin-left...)
4.网址后加斜杠如www.campr.com/目录会判断这个“目录是什么文件类型或者是目录。
5.标明高度和宽度如果浏览器没有找到这两个参数它需要一边下载图片一边计算大小如果图片很多浏览器需要不断地调整页面。这不但影响速度也影响浏览体验。当浏览器知道了高度和宽度参数后即使图片暂时无法显示页面上也会腾出图片的空位然后继续加载后面的内容。从而加载时间快了浏览体验也更好了。
6.减少http请求合并文件合并图片。面试题 6. 哪些工具来测试代码的性能
参考回答
Profiler
JSPerf
Dromaeo面试题 7. 请指出浏览器特性检测特性推断和浏览器UA字符串嗅探的区别
参考回答
特性检测为特定浏览器的特性进行测试并仅当特性存在时即可应用特性。User-Agent检测最早的浏览器嗅探即用户代理检测服务端以及后来的客户端根据UA字符串屏蔽某些特定的浏览器查看网站内容。特性推断尝试使用多个特性但仅验证了其中之一。根据一个特性的存在推断另一个特性是否存在。问题是推断是假设并非事实而且可能导致可维护性的问题。面试题 8. 如何进行响应式测试
参考回答
响应式测试特别简单通过改变视窗大小也就是缩放浏览器即可测试。当然当在CSS中设置 Media Queries判断条件时要使用max- width才行如果使用max- device- width则会根据设备的屏幕尺寸来判断。面试题 9. 简述对于前端系统重构的理解
参考回答
网站重构是指在不改变外部行为的前提下简化结构、添加可读性且在网站前端保持一致的行为。也就是说在不改变UI的情况下对网站进行优化在扩展的同时保持一致的UI。
对于传统的网站来说重构通常包括以下方面。
把表格 table布局改为DVCSS。
使网站前端兼容现代浏览器。
对移动平台进行优化。
针对搜索引擎进行优化。
深层次的网站重构应该考虑以下方面。
减少代码间的耦合
让代码保持弹性。
严格按规范编写代码。
设计可扩展的API。
代替旧的框架、语言如VB
增强用户体验。
对速度进行优化。
压缩 JavaScript、CSS、 image等前端资源通常由服务器来解决。
优化程序的性能如数据读写。
采用CDN来加速资源加载。
优化 JavaScript DOM。
缓存HTTP服务器的文件。面试题 10. 简述移动端性能如何优化
参考回答
优化方式如下。
尽量使用CSS3动画开启硬件加速。
适当使用 touch事件代替 click事件。
避免使用CSS3渐变阴影效果。
可以用 transform:translateZ0来开启硬件加速。
不滥用 Float, Float在渲染时计算量比较大尽量少使用。
不滥用Web字体Web字体需要下载、解析、重绘当前页面尽量少使用。
合理使用requestAnimation Frame动画代替 setTimeout。
合理使用CSS中的属性CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video触发GPU渲染。过度使用会使手机耗电量増加。面试题 11. 请说出几种缩短页面加载时间的方法
参考回答
具体方法如下。
1优化图片
2选择图像存储格式比如GIF提供的颜色较少可用在一些对颜色要求不高的地方
3优化CSS压缩、合并CSS
4在网址后加斜杠
5为图片标明高度和宽度如果浏览器没有找到这两个参数它需要一边下载图片一边计算大小。如果图片很多浏览器需要不断地调整页面。这不但影响速度而且影响浏览体验。当浏览器知道高度和宽度参数后即使图片暂时无法显示页面上也会腾出图片的空位然后继续加载后面的内容从而优化加载时间提升浏览体验面试题 12. 简述哪些方法可以提升网站前端性能?
参考回答
一、HTTP请求优化。主要分为减少HTTP请求次数、减小请求数据量和缓存三个方面。减少HTTP请求次数可以通过以下方法实现合并JS、CSS文件使用CSS Sprites技术合并图片压缩图片大小避免使用多个域名。
减小请求的数据量来降低网络带宽消耗提高页面加载速度。实现方式包括压缩JavaScript、CSS文件使用Gzip压缩响应数据精简HTML代码。
在浏览器缓存中缓存静态资源则可以大大减少HTTP请求次数提高页面加载速度。可以通过设置Expires头信息设置Cache-Control头信息使用ETag头信息等方式来实现强缓存或协商缓存具体根据网站优化需求去使用即可。二、资源加载优化。主要分为异步加载JS文件、延迟加载图片、使用CDN三种方法。异步加载JavaScript文件即采用诸如async、defer等方式将JS文件异步加载避免JavaScript阻塞页面渲染的情况提高页面加载速度。
延迟加载图片。避免在页面加载时同时请求大量图片降低网络带宽消耗提高页面加载速度期间可以采用骨架屏等方式来提高用户体验。
使用CDN加速。即利用CDN将资源分发到离用户更近的服务器上提高资源加载速度。三、页面渲染优化。主要包括减少DOM操作次数、避免table布局、采用CSS动画等。减少DOM操作次数。可以减轻浏览器的负担提高页面渲染速度主要通过缓存DOM元素和一次性对DOM元素进行修改来实现。
避免使用table布局table布局牵一发而动全身修改一个小标签会使得页面渲染速度变慢建议使用divCSS布局或者flex布局。
使用CSS动画代替JavaScript动画。CSS动画可以减少JS操作DOM的次数提高页面渲染速度。四、代码优化。主要分为避免使用全局变量、优化重复执行代码两个方面。
避免使用全局变量。过多的全局变量会占用过多的内存空间影响页面性能为此我们使用命名空间避免全局变量污染或者将全局变量封装在闭包中。
将重复执行的代码进行优化。将重复执行的代码进行优化可以减少代码运行时间提高页面渲染速度通过缓存DOM元素、事件委托等形式都可以实现。综上前端性能优化是提高用户体验的重要手段。本文从HTTP请求优化、资源加载优化、页面渲染优化和代码优化四个方面介绍了常见的前端性能优化方法。在日常学习工作中我们应该根据具体的项目需求选择合适的优化手段从而提高页面加载速度和渲染速度。面试题 13. 简述列举你知道的Web性能优化方法
参考回答
具体优化方法如下。
1压缩源码和图片 JavaScript采用混淆压缩CSS进行普通压缩JPG图片根据具体质量压缩为50%~70%把PNG图片从24色压缩成8色以去掉一些PNG格式信息等。
2选择合适的图片格式颜色数多用JPG格式而很少使用PNG格式如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式。
3合并静态资源减少HTTP请求
4把多个CSS合并为一个CSS把图片组合成雪碧图。
5开启服务器端的Gzip压缩对文本资源非常有效。
6使用CDN对公开库共享缓存。
7延长静态资源缓存时间。
8把CSS放在页面头部把 JavaScript代码放在页面底部这样避免阻塞页面渲染而使页面出现长时间的空白面试题 14. 简述如何分析并对代码进行性能优化
参考回答
利用性能分析工具监测性能包括静态 Analyze工具和运行时的 Profile工具在Xcode工具栏中依次单击 Product→ Profile项可以启动。比如测试程序的运行时间当单击 Time Profiler项时应用程序开始运行这就能获取到运行整个应用程序所消耗时间的分布和百分比。为了保证数据分析在同一使用场景下的真实性一定要使用真机因为此时模拟器在Mac上运行而Mac上的CPU往往比iOS设备要快面试题 15. 简述CSS如何优化性能
参考回答
1正确使用 display属性 display属性会影响页面的渲染因此要注意以下几方面。
display:inline后不应该再使用 width、 height、 margin、 padding和float 。
display:inline- block后不应该再使用 float。
display:block后不应该再使用 vertical-align。
display:table-*后不应该再使用 margin或者float。
2不滥用 float。
3不声明过多的font-size。
4当值为0时不需要单位。
5标准化各种浏览器前缀并注意以下几方面。
浏览器无前缀应放在最后。
CSS动画只用 -webkit-无前缀两种即可。
其他前缀包括 -webkit-、-moz-、-ms-、无前缀 Opera浏览器改用 blink内核所以-0-被淘汰
6避免让选择符看起来像是正则表达式。高级选择器不容易读懂执行时间也长。
7尽量使用id、 class选择器设置样式避免使用 style属性设置行内样式
8尽量使用CSS3动画。
9减少重绘和回流。面试题 16. 针对HTML如何优化性能
参考回答
1对于资源加载按需加载和异步加载
2首次加载的资源不超过1024KB即越小越好。
3压缩HTML、CSS、 JavaScript文件。
4减少DOM节点。
5避免空src空src在部分浏览器中会导致无效请求。
6避免30*、40*、50*请求错误
7添加 Favicon.ico如果没有设置图标ico则默认的图标会导致发送一个404或者500请求。面试题 17. 简述JavaScript如何优化性能
参考回答
1缓存DOM的选择和计算。
2尽量使用事件委托模式避免批量绑定事件。
3使用 touchstart、 touchend代替 click。
4合理使用 requestAnimationFrame动画代替 setTimeOut。
5适当使用 canvas动画。
6尽量避免在高频事件如 TouchMove、 Scroll事件中修改视图这会导致多次渲染。面试题 18. 简述如何优化服务器端的接口通讯链接方面
参考回答
1接口合并如果一个页面需要请求两部分以上的数据接口则建议合并成一个以减少HTTP请求数
2减少数据量去掉接口返回的数据中不需要的数据
3缓存数据首次加载请求后缓存数据对于非首次请求优先使用上次请求的数据这样可以提升非首次请求的响应速度。面试题 19. 简述前端如何优化脚本的执行
参考回答
脚本处理不当会阻塞页面加载、渲染因此在使用时需注意。
1把CSS写在页面头部把 JavaScript程序写在页面尾部或异步操作中。
2避免图片和 iFrame等的空src空src会重新加载当前页面影响速度和效率。
3尽量避免重设图片大小。重设图片大小是指在页面、CSS、 JavaScript文件等中多次重置图片大小多次重设图片大小会引发图片的多次重绘影响性能
4图片尽量避免使用 DataURL。DataURL图片没有使用图片的压缩算法文件会变大并且要在解码后再渲染加载慢耗时长面试题 20. 简述前端如何优化渲染
参考回答
具体方法如下。
通过HTML设置 Viewport元标签 Viewport可以加速页面的渲染如以下代码所示。2减少DOM节点数量DOM节点太多会影响页面的渲染应尽量减少DOM节点数量。
3尽量使用CSS3动画合理使用 requestAnimationFrame动画代替 setTimeout适当使用 canvas动画5个元素以内使用CSS动画5个元素以上使用 canvas动画iOS 8中可使用 webGL。
4对于高频事件优化 Touchmove, Scroll事件可导致多次渲染。
使用 requestAnimationFrame监听帧变化以便在正确的时间进行渲染增加响应变化的时间间隔减少重绘次数。
使用节流模式基于操作节流或者基于时间节流减少触发次数。
5提升GPU的速度用CSS中的属性CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video来触发GPU渲染.面试题 21. 简述如何合理设置DNS缓存
参考回答
在浏览器地址栏中输入URL以后浏览器首先要查询域名 hostname对应服务器的IP地址一般需要耗费20~120ms的时间。
DNS查询完成之前浏览器无法识别服务器IP因此不下载任何数据。基于性能考虑ISP运营商、局域网路由、操作系统、客户端浏览器均会有相应的DNS缓存机制。
1正IE缓存30min可以通过注册表中 DnsCacheTimeout项设置。
2 Firefox混存1 min通过 network.dnsCacheExpiration配置。
3在 Chrome中通过依次单击“设置”→“选项”→“高级选项”并勾选“用预提取DNS提高网页载入速度”选项来配置缓存时间。面试题 22. 简述jQuery性能优化如何做
参考回答
1使用最新版本的 jQuery类库。
JQuery类库每一个新的版本都会对上一个版本进行Bug修复和一些优化同时也会包含一些创新所以建议使用最新版本的 jQuery类库提高性能。不过需要注意的是在更换版本之后不要忘记测试代码毕竟有时候不是完全向后兼容的。
2使用合适的选择器。
jQuery提供非常丰富的选择器选择器是开发人员最常使用的功能但是使用不同选择器也会带来性能问题。建议使用简凖选择器如i选择器、类选择器不要将i选择器嵌套等。
3以数组方式使用 jQuery对象。
使用 jQuery选择器获取的结果是一个 jQuery对象。然而 jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面建议使用简单的for或者 while循环来处理而不是$. each()这样能使代码更快。
4每一个 JavaScript事件例如 click、 mouseover等都会冒泡到父级节点。当需要给多个元素绑定相同的回调函数时建议使用事件委托模式。
5使用join( )来拼接字符串。
使用 join( )拼接长字符串而不要使用“”拼接字符串这有助于性能优化特别是处理长字符串的时候。
6合理利用HTML5中的data属性。
HTML5中的data属性有助于插入数据特别是前、后端的数据交换jQuery的 data( )方法能够有效地利用HTML5的属性来自动获取数据。面试题 23. 哪些方法能提升移动端CSS3动画体验
参考回答
1尽可能多地利用硬件能力如使用3D变形来开启GPU加速例如以下代码。-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)
一个元素通过 translate3d右移500X的动画流畅度会明显优于使用left属性实现的动画移动原因是CSS动画属性会触发整个页面重排、重绘、重组。paint通常是最耗性能的尽可能避免使用触发 paint的CSS动画属性。如果动画执行过程中有闪烁通常发生在动画开始的时候可以通过如下方式处理。-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden
-ms-backface-visibility:hidden ;
backface-visibility:hidden
-webkit-perspective1000
-moz-perspective1000
-ms-perspective1000
perspective1000;
2尽可能少使用box- shadows和 gradients它们往往严重影响页面的性能尤其是在一个元素中同时都使用时。3尽可能让动画元素脱离文档流以减少重排如以下代码所示。position:fixed
position:absolute;面试题 24. 简述浏览器缓存机制
参考回答
浏览器缓存是比较常见的问题我会从浏览器缓存的方式缓存的实现 缓存在哪里这几个点来说明
缓存方式
我们经常说的浏览器缓存有两种一种是强制缓存一种是协商缓存因为下面有具体实现讲解所以这里就说一下概念
协商缓存协商缓存意思是文件已经被缓存了但是否从缓存中读取是需要和服务器进行协商具体如何协商要看请求头/响应头的字段设置下面会说到。需要注意的是协商缓存还是发了请求的
强制缓存强制缓存就是文件直接从缓存中获取不需要发送请求
缓存实现
强制缓存
强制缓存在 http1.0 的时候用的是 Expires是响应头里面的一个字段表示的是文件过期时间。是一个绝对时间正因为是绝对时间所以在某些情况下服务器的时区和浏览器时区不一致的时候就会导致缓存失效。为了解决这个问题HTPP1.1 引入了一个新的响应头 cache-control 它的可选值如下
cache-control
max-age: 缓存过期时间是一个相对时间
public: 表示客户端和代理服务器都会缓存
private: 表示只在客户端缓存
no-cache: 协商缓存标识符表示文件会被缓存但是需要和服务器协商
no-store: 表示文件不会被缓存
HTTP1.1 利用的就是 max-age:600 来强制缓存因为是相对时间所以不会出现 Expires 问题
协商缓存协商缓存是利用 Last-Modified/if-Modified-Since,Etag/if-None-Match 这两对请求、响应头。Last-Modified/if-Modified-SinceEtag/If-None-Match由于 Last-Modified 的时间粒度是秒有的文件在 1s 内可能被改动多次。这种方式在这种特殊情况下还是会失效所以HTTP1.1又引入了 Etag 字段。这个字段是根据文件内容生成一个标记符比如W/5f9583bd-10a8然后再和 If-None-Match 进行对比就能更准确的知道文件有没有被改动过
浏览器第一次发送请求获取文件缓存下来服务器响应头返回一个 if-Modified-Since记录被改动的时间
浏览器第二次发送请求的时候会带上一个 Last-Modified 请求头时间就是 if-Modified-Since 返回的值。然后服务器拿到这个字段和自己内部设置的时间进行对比时间相同表示没有修改就直接返回 304 从缓存里面获取文件
缓存在哪里
知道了缓存方式和实现再来说一下缓存存在哪个地方我们打开掘金可以看到如下的信息 。缓存的来源有两个地方 from dist cache,from memeory cache
form memory cache
这个是缓存在内存里面优点是快速但是具有时效性当关闭 tab 时候缓存就会失效。
from dist cache
这个是缓存在磁盘里面虽然慢但是还是比请求快优点是缓存可以一直被保留即使关闭 tab 页也会一直存在
何时缓存在memory,合适缓存在dist
这个问题网上很少找的到标准答案大家一致的说法是js,图片文件浏览器会自动保存在memory中css文件因为不常修改保存在dist里面我们可以打开掘金网站很大一部分文件都是按照这个规则来的但是也有少数js文件也是缓存在dist里面。所以他的存放机制到底是什么样了我带着这个疑问查了好多文章虽然最后没有确切找到答案但是一个知乎的回答可以给我们提供思路下面引用一个知乎回答者一段话
第一个现象(以图片为例)访问- 200 - 退出浏览器再进来- 200(from disk cache) - 刷新 - 200(from memory cache)。总结: 会不会是chrome很聪明的判断既然已经从disk拿来了 第二次就内存拿吧 快。笑哭)
第二个现象(以图片为例)只要图片是base64 我看都是from memroy cache。总结: 解析渲染图片这么费劲的事情还是做一次然后放到内存吧。用的时候直接拿
第三个现象(以js css为例)个人在做静态测试的发现大型的js css文件都是直接disk cache。结: chrome会不会说 我去 你这么大太占地方了。你就去硬盘里呆着吧。慢就慢点吧。
第四个现象隐私模式下几乎都是 from memroy cache。总结: 隐私模式 是吧。我不能暴露你东西还是放到内存吧。你关我死。
上面几点是虽然很幽默但是却可以从中找到一部分答案但是我觉得另一个知乎回答我更赞同
浏览器运行的时候也是由几个进程协作的所以操作系统为了节省内存会把一部分内存里的资源交换回磁盘的交换区当然交换是有策略的比如最常用的就是LRU。
什么时候存dist什么时候存memoey都是在浏览器控制下的memory不够了可能就会考虑去存dist了所以经过上面所说我自己总结结果如下
大一点的文件会缓存在dist里面因为内存也是有限的磁盘的空间更大
小一点文件js,图片存的是memory
css文件一般存在dist
特殊情况memory大小是有限制的浏览器也会根据自己的内置算法把一部分js文件存到dist里面面试题 25. 简述Weinre调试工具
参考回答
Weinre是一个简单、好用的调试工具。它会在本地创建一个监听服务器并提供一个 JavaScript程序你只用在需要测试的页面中加载这段 JavaScript程序就可以被Weinre监听到在 Inspect面板中调试这个页面面试题 26. 如何对IE浏览器进行网页调试
参考回答
可以通过以下工具进行调试。
SuperPreview主要用于HTML代码、CSS代码的调试和各个浏览器目前只能针对IE6~IE8的页面呈现测试。
Internet Explorer Collection主要用于 Internet Explorer浏览器IEl~IE8各个版本的页面呈现测试。
Developer Toolbar主要用于HTML代码、CSS代码和 JavaScript代码的调试。
IE WebDeveloper主要用于HTML代码、CSS代码和 JavaScript代码的调试。
IE Web Developer可以让你检查和编辑 HTML DOM显示错误信息、日志信息显网站源代码监视DHTML事件和HTTP流量。它的功能可以和火狐中的Firebug相媲美甚至有些功能还强于 Firebug。
IETester主要用于 Internet Explorer浏览器各个版本的页面呈现测试。
VS2008主要用于 JavaScript代码的调试。
DebugBar主要用于HTML代码、CSS代码和 JavaScript代码的调试面试题 27. 简述原生JavaScript脚本优化
参考回答
1、减少重绘和回流
避免不必要的DOM操作
避免使用document.write
减少drawImage
尽量改变class而不是style使用classList代替
className
2、缓存DOM选择与计算每次DOM选择都要计算和缓存
3、缓存.length的值每次.length计算用一个变量保存值
4、尽量使用事件代理避免批量绑定事件
5、尽量使用id选择器id选择器选择元素是最快的
6、touch事件优化使用tap(touchstart和touchend)代替click(注意touch响应过快易引发误操作)面试题 28. 简述如何进行前端渲染优化
参考回答
1、设置viewport:HTML的viewport可加速页面的渲染2、减少DOM节点DOM节点太多影响页面的渲染尽量减少DOM节点。3、优化动画
1尽量使用css3动画
2合理使用requestAnimationFrame动画代替setTimeout.
3适当使用canvas动画5个元素以内使用css动画5个元素使用canvas动画iOS8可使用WebGL动画。4、优化高频事件scroll、touchmove等事件可导致多次渲染。
1函数节流
2函数防抖
3使用requestAnimationFrame监听帧变化使得在正确的时间进行渲染
4增加响应变化的时间间隔减少重绘次数5、GPU加速:使用某些html5标签和css3属性触发GPU渲染请合理使用(过渡使用会引发手机耗电量增加)。
1html标签video,canvaswebgl
2css属性opacity,transformtransition
