前端性能优化

最新推荐文章于 2022-10-06 20:16:08 发布

昵給硪鐙誒

最新推荐文章于 2022-10-06 20:16:08 发布

阅读量176

点赞数

分类专栏：前端性能优化前端文章标签：前端性能优化

本文链接：https://blog.csdn.net/g291976422/article/details/88047260

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端性能优化

1 篇文章 0 订阅

订阅专栏

yahoo前端性能团队总结的35条黄金定律:

http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html#expires

1. 规避javascript多人开发函数重名问题

命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化

2. 请说出三种减低页面加载时间的方法

压缩css、js文件
合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作

3. 你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

4. web前端开发，如何提高页面性能优化？

内容方面：
1.减少 HTTP 请求 (Make Fewer HTTP Requests)

2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS：
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4.避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript ：

脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
精简 JavaScript 与 CSS (Minify JavaScript and CSS)
移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image)：
1.优化图片

2 不要在 HTML 中使用缩放图片

3 使用恰当的图片格式

4 使用 CSS Sprites 技巧对图片优化

5. 前端开发中，如何优化图像？图像格式的区别？

优化图像：
1、不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别：
矢量图：图标字体，如 font-awesome；svg

位图：gif,jpg(jpeg),png

区别：

1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。

2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。

3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

6. 如何进行网站性能优化

JavaScript 压缩和模块打包
按需加载资源
在使用 DOM 操作库时用上 array-ids
缓存
启用 HTTP/2
应用性能分析
使用负载均衡方案
为了更快的启动时间考虑一下同构
使用索引加速数据库查询
使用更快的转译方案
避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
用于未来的一个建议：使用 service workers + 流
图片编码优化

7. 为什么利用多个域名来提供网站资源会更有效？

1.CDN缓存更方便
2.突破浏览器并发限制（一般每个域名建立的链接不超过6个）
3.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢
4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。
PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。

8. 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left…)
4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6.减少http请求（合并文件，合并图片）。

9. 你如何对网站的文件和资源进行优化？

期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用（多个域名来提供缓存）其他。

10. 你都使用哪些工具来测试代码的性能？

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。

11. 什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

FOUC(Flash Of Unstyled Content)–文档样式闪烁

12. 控制资源文件加载优先级

浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。

一般情况下都是 CSS 在头部，JS 在底部。

13. 利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

14. 减少重排（Reflow）

基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。

减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用增加 class 属性，而不是通过 style 操作样式。

15. 高频执行事件/方法的防抖

通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。

这就是为什么我们要引入防抖。

这里涉及到的知识点是高阶函数，感兴趣的朋友可以移步到我的另一篇博文全面理解Javascript的面向对象(一)，里面的函数节流部分就是实现高频执行事件/方法的防抖。
防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例：

Javascript代码 

function debounce(func, wait, immediate) {  
    var timeout;  
    return function() {  
        var context = this, args = arguments;  
        var later = function() {  
            timeout = null;  
            if (!immediate) func.apply(context, args);  
        };  
        var callNow = immediate && !timeout;  
        clearTimeout(timeout);  
        timeout = setTimeout(later, wait);  
        if (callNow) func.apply(context, args);  
    };  
  }

添加resize的回调函数，但是只允许它每300毫秒执行一次

window.addEventListener('resize', debounce(function(event) {  

    // 这里写resize过程  

}, 300));

debounce方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！

16. 使用Data URI代替图片SRC

提升页面大小的效率，不仅仅是取决于使用精灵或是压缩代码，给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快，而其中一种减少页面请求的方法就是用Data URI代替图片的src属性：

Javascript代码 

<!-- 以前的写法 -->  
<img src="/images/logo.png" />  

<!-- 使用data URI的写法 -->  
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />

<-- 范例: http://davidwalsh.name/demo/data-uri-php.php -->
当然页面大小会增加（如果你的服务器使用适当的gzip内容，这个增加会很小），但是你减少了潜在的请求，同时也在过程中减少了服务器请求的数量。现在大多数浏览器都支持Data URI，在CSS中的背景骨片也可以使用Data URI，因此这个策略现在已经可以在应用层级，广泛应用。

17. 使用媒体查询加载指定大小的背景图片

直到CSS @supports被广泛支持，CSS媒体查询的使用接近于CSS中写逻辑控制。我们经常用CSS媒体查询来根据设备调整CSS属性（通常根据屏幕宽度调整CSS属性），例如根据不同的屏幕宽度来设置不同的元素宽度或者是悬浮位置。那么我们为什么不用这种方式来改变背景图片呢？

Javascript代码 

/* 默认是为桌面应用加载图片 */  
.someElement { background-image: url(sunset.jpg); }  

@media only screen and (max-width : 1024px) {  
    .someElement { background-image: url(sunset-small.jpg); }  
}

上面的代码片段是为手机设备或是类似的移动设备加载一个较小尺寸的图片，特别是需要一个特别小的图片时（例如图片的大小几乎不可视）。

18. 使用索引对象

这一篇，我们将讲讲使用索引对象检索代替遍历数组，提高遍历速度。

AJAX和JSON一个最常见的使用案例是接收包含一组对象的数组，然后从这组数组中根据给定的值搜索对象。让我们看一个简单的例子，下面这个例子中，你从用户接收一个数组，然后你可以根据username的值来搜索用户对象：

Javascript代码 

function getUser(desiredUsername) {  
    var searchResult = ajaxResult.users.filter(function(user) {  
        return user.username == desiredUsername;  
    });  

    return searchResult.length ? searchResult[0] : false;  
}  

// 根据用户名获取用户  
var davidwalsh = getUser("davidwalsh");  

// 根据用户名获取另一个用户.  
var techpro = getuser("tech-pro");

上面这段代码可以运行，但是并不是很有效，当我们想要获取一个用户时，我们就要遍历一次数组。那么更好的方法是创建一个新的对象，对每一个唯一的值建立一个索引，在上面这个例子中，用username作为索引，这个数组对象可以写成：

Javascript代码 

var userStore = {};  
ajaxResult.users.forEach(function(user) {  
    userStore[user.username] = user;  
});
现在当你想要找一个用户对象时，我们可以直接通过索引找到这个对象：

Javascript代码 

var davidwalsh = userStore.davidwalsh;  
var techpro = userStore["tech-pro"];

这样的代码写起来更好一些，也很简便，通过索引搜索比起遍历整个数组更加快捷。

19. 控制DOM大小

这一篇中，我们要说如何控制DOM的大小，来优化前端性能。

DOM很慢是众所周知的，使得网站变慢的罪魁祸首是大量的DOM。想象一下，假如你有一个有着上千节点的DOM，在想象一下，使用querySelectorAll或者getElementByTagName，或者是其他以DOM为中心的搜索方式来搜索一个节点，即使是使用内置方法，这也将是一个非常费力的过程。你要知道，多余的DOM节点会使其他的实用程序也变慢的。

我见过的一种情况，DOM的大小悄然增加，是在一个AJAX网站，它将所有的页面都存在了DOM中，当一个新的页面通过AJAX被加载时，旧的页面就会被存入隐藏的DOM节点。对于DOM的速度，将有灾难性的降低，特别是当一个页面是动态加载的。所以你需要一种更好的方法。

在这种情况下，当页面是通过AJAX加载的，并且以前的页面是存储在客户端的，最好的方法就是将内容通过String HTML存储（将内容从DOM中移除），然后使用事件委托来避免特定元素事件。这么做的同时，当在客户端缓存内容的时候，可以避免大量的DOM生成。

通常控制DOM大小的技巧包括：

使用:before和:after伪元素
延迟加载和呈现内容
使用事件委托，更简便的将节点转换成字符串存储
简单一句话：尽量使你的DOM越小越好。

20. js的节流和防抖

http://www.cnblogs.com/coco1s/p/5499469.html

昵給硪鐙誒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化

1. 规避javascript多人开发函数重名问题命名空间封闭空间js模块化mvc（数据层、表现层、控制层）seajs变量转换成对象的属性对象化2. 请说出三种减低页面加载时间的方法压缩css、js文件合并js、css文件，减少http请求外部js、css文件放在最底下减少dom操作，尽可能用变量替代不必要的dom操作3. 你所了解到的Web攻击技术（1）XSS（Cros...
复制链接

扫一扫