8. 你知道有哪些优化性能的方法吗？
具体方法如下。
（1）减少HTTP请求次数，控制CSSSprite、JavaScript和CSS源代码、图片的大小，使用网页Gzip、CDN托管、数据缓存、图片服务器
（2）通过后端模板JavaScript和数据，减少HTML标签造成的带宽浪费，后端使用变量保存Ajax请求结果，每次操作本地变量时都保存请求，减少请求次数。
（3）用innerhTML替换DOM操作，减少DOM操作次数，优化JavaScript性能。
(4)当需要设置的样式较多时，设置className而不是直接操作Style。
(5) 较少使用全局变量，缓存DOM节点查找结果，减少I/O读操作
(6)防止使用CSS表达式，也称为动态属性，
(7) 预加载图像，将样式表放在底部，将脚本放在顶部，并添加时间戳。
(8) 避免在页面的主要布局中使用表格。 表格中的内容下载完毕后才会显示，显示速度比DIV+CSS布局慢。
9.列出你知道的Web性能优化方法。
具体优化方法如下。
（1）压缩源代码和图片（JavaScript采用混淆压缩，CSS进行普通压缩，JPG图片根据具体质量压缩到50%~70%，PNG图片从24色压缩到8色去除部分PNG格式信息等）。
（2）选择合适的图像格式（颜色数多采用JPG格式，很少使用PNG格式，如果浏览器通过服务器端支持WebP，则使用WebP或SVG格式）。
（3）合并静态资源（减少HTTP请求）
(4) 将多个CSS合并为一个CSS，将图片合并为Sprite图像。
（5）在服务器端启用Gzip压缩（对于文本资源非常有效）。
（6）使用CDN（公共图书馆共享缓存）。
(7)延长静态资源的缓存时间。
（8）将CSS放在页面后面，将JavaScript代码放在页面顶部（这样可以防止页面长时间被阻塞，页面空白）
10.您通常如何优化代码的性能？
借助性能分析工具检测性能，包括静态分析工具和运行时分析工具（单击 Xcode 工具栏中的 Product→Profile 启动）。 比如测试程序的运行时间，当点击TimeProfiler项时，应用程序开始运行，然后才能得到整个应用程序运行所消耗时间的分布和比例。 为了保证相同使用场景下数据分析的真实性，必须使用真机，因为此时模拟器运行在Mac上，而Mac上的CPU往往比iOS设备更快。
11. 如何优化CSS性能？
具体优化方法如下。
(1)正确使用显示属性。 display属性会影响页面的渲染，所以要注意以下几个方面。 width、height、margin、padding 和 float 不应在 display:inline 之后使用。 float 不应在 display:inline-block 之后使用。 垂直对齐不应该在display:block之后使用。 在display:table-*之后，不应使用margin或float。
(2)不要滥用浮动。
(3)不要声明太多的font-size。
(4) 值为 0 时无需单位。
（五）规范各类浏览器前缀，重点关注以下几个方面。
(6) 防止选择器看起来像正则表达式。 中间选择器很难理解并且需要很长时间来执行。
（7）尽量使用id和class选择器设置样式（防止使用样式属性设置内联样式）
(8)尝试使用CSS3动画。
(9)减少重绘和回流焊。
12. 如何优化HTML的性能？
具体方法如下。
(1) 对于资源加载，有按需加载和异步加载
（2）首次加载的资源不要超过1024KB，即越小越好。
(3) 压缩HTML、CSS、JavaScript文件。
(4)降低DOM节点。
（5）避免空src（空src在某些浏览器中会导致无效请求）。
(6)防止30*、40*、50*请求错误
（7）添加Favicon.ico，如果不设置图标ico，默认图标会导致发送404或500请求。
13.如何优化JavaScript的性能？
具体方法如下。
(1)缓存DOM选择和估计。
（2）尽量使用风暴委托模式，防止批量绑定风暴。
(3)使用touchstart和touchend代替click。
(4)合理使用requestAnimationFrame动画代替setTimeOut。
(5)适当使用canvas动画。
（6）尽量避免在高频风暴（如TouchMove、Scroll风暴）中改变视图，这会导致多次渲染。
14、服务器端如何优化？
具体方法如下。
(1) 启用Gzip 压缩。
（2）延长资源缓存时间，合理设置资源的过期时间，对一些常年不更新的静态资源设置过期时间。
(3)减小cookie头信息的大小，头信息越大，资源传输速率越慢。
(4)图像或CSS和JavaScript文件可以通过CDN加速。
15、如何优化服务器端socket？
具体方法如下。
(1) Socket合并：如果一个页面需要请求两个以上的数据Socket，建议合并为一个css3 图片预加载，以减少HTTP请求次数。
(2)减少数据量：从socket返回的数据中去除不必要的数据。
(3) 缓存数据：第一次请求加载后，数据被缓存； 对于非首次请求，优先使用之前请求的数据，这样可以提高非首次请求的响应率。
16.如何优化脚本执行？
脚本处理不当会阻塞页面加载和渲染，因此使用它们时要小心。
（1）在页面后面编写CSS，在页面末尾或异步操作中编写JavaScript程序。
（2）防止图片、iFrame等出现空src。空src会重新加载当前页面，影响速度和效率。
(3)尽量避免重置图片大小。重置图片大小是指在页面、CSS、JavaScript文件等中多次重置图片大小。多次重置图片大小会导致图片被多次重绘，影响性能
(4)图片尽量避免使用DataURL。 DataURL图片没有使用图片压缩算法，文件会变大，而且需要解码后渲染，所以加载速度慢，耗时较长。
17.如何优化渲染？
具体方法如下。 通过在HTML中设置Viewport元标记，Viewport可以加快页面的渲染速度，如下代码所示。
<meta name="viewport" content="width=device=width,initial-scale=1">
(2)减少DOM节点数量。 过多的DOM节点会影响页面的渲染。 应尽可能减少 DOM 节点的数量。
（3）尽可能使用CSS3动画，合理使用requestAnimationFrame动画代替setTimeout，适当使用canvas动画（5个元素以下使用CSS动画，5个以上元素使用canvas动画（iOS8中可以使用webGL） ）。
（4）优化Touchmove高频风暴，滚动风暴会导致多次渲染。 使用requestAnimationFrame来监听帧变化，方便在正确的时间渲染，减少响应变化的时间间隔，减少重绘次数。 使用节流模式（基于动作的节流，或者基于时间的节流）来减少触发次数。
（5）提高GPU的速度，并使用CSS属性（CSS3transitions、CSS33Dtransforms、Opacity、Canvas、WebGL、Video）触发GPU渲染。
18.如何设置DNS缓存？
在浏览器地址栏中输入URL后，浏览器首先需要查询该域名（主机名）对应的服务器的IP地址，通常需要20~120ms。 在DNS查询完成之前，浏览器很难识别服务器IP，因此不会下载任何数据。 基于性能的考虑，ISP运营商、局域网路由器、操作系统、客户端（浏览器）都会有相应的DNS缓存机制。
(1)IE缓存30分钟，可以通过注册表中的DnsCacheTimeout项设置。
（2）Firefox混合存储1min，通过network.dnsCacheExpiration配置。
（3）在Chrome中，依次点击“设置”→“选项”→“高级选项”，勾选“使用预取DNS提高网页加载速度”选项，配置缓存时间。
19、什么时候资源访问会失败？
开发过程中发现很多开发者没有设置图标，服务器根目录也没有存放默认的Favicon.ico，导致出现404请求。 一般在App的webview中打开Favicon.ico是不会加载这个Favicon.ico的，而且很多页面是可以共享的。 如果用户在浏览器中打开Favicon.ico，将无法读取它。 通常尽量保证图标默认存在，文件尽可能小，并设置较长的缓存过期时间。 另外，因缓存过期导致请求失败的资源应及时清除。
20.如何优化jQuery性能？
优化方法如下。
(1) 使用最新版本的jQuery Generics。 每个新版本的 jQuery 泛型都会对之前的版本进行 bug 修复和一些优化，同时也会包含一些创新，因此建议使用最新版本的 jQuery 泛型来提高性能。 不过需要注意的是，更改版本后，不要忘记测试代码，尽管有时并不完全向后兼容。
(2) 使用合适的选择器。 jQuery提供了特别丰富的选择器，这是开发者最常用的功能，而使用不同的选择器也会带来性能问题。 建议使用简单的选择器，比如i选择器、类选择器、不要嵌套i选择器。
(3) 在链表方法中使用jQuery对象。 使用 jQuery 选择器获得的结果是一个 jQuery 对象。 然而，jQuery 泛型会让您认为您正在使用定义了索引和厚度的字段。 在性能方面，建议使用简单的 for 或 while 循环而不是 $.each()，这样可以使代码更快。
(4)每次JavaScript干扰(如点击、鼠标悬停等)都会冒泡到父节点。 当需要为多个元素绑定相同的反弹函数时，建议使用storm delegate模式。
(5) 使用join()连接字符串。 使用 join() 来连接长字符串而不是“+”来连接字符串，这有助于性能优化，尤其是在处理长字符串时。
(6)合理利用HTML5中的data属性。 HTML5中的data属性有助于插入数据，特别是对于前端和后端数据交换； jQuery的data()方法可以有效地利用HTML5属性来手动获取数据。
21、有哪些方法可以提升联通CSS3动画体验？
（1）尽可能使用硬件能力，比如使用3D变体来启用GPU加速css3 图片预加载，如下面的代码。
-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将元素向右移动500倍的动画流畅度会明显优于使用left属性实现的动画流畅度。 原因是CSS动画属性会触发整个页面重新排列、重绘、重组。 绘制通常是性能最密集的，因此尽量避免使用触发绘制的 CSS 动画属性。 如果动画执行过程中出现闪烁（一般发生在动画开始时），可以通过以下方法处理。
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;
(2) 尽量少使用box-shadows和gradients，它们往往会严重影响页面的性能，特别是当它们同时在一个元素中使用时。 (3) 尽可能让动画元素脱离文档流，以减少重新排列，如下代码所示。
position:fixed；
position:absolute;
本文结束~
推荐阅读：
编程技巧 · 行业秘闻 · 技术动向
发表评论