前端性能优化（摘录汇总）

2017-11-06  本文已影响0人  姒沝無痕

PC浏览器前端优化策略

pc端优化的策略很多，如Slow(YSlow时Yahoo发布的一款Firefox插件，现Chrome也可以安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议。)或者Chrome自带的Audits等，总结起来包括网络加载类，也买你渲染类，CSS优化类，javaScript执行类、缓存类、图片类、架构协议类等几类。

网络加载类

在 HTML 文件中引用外部资源可以有效利用浏览器的静态资源缓存，但有时候在移动端页面 CSS 或 JavaScript 比较简单的情况下为了减少请求，也会将 CSS 或 JavaScript 直接写到 HTML 里面，具体要根据 CSS 或 JavaScript 文件的大小和业务的场景来分析。如果 CSS 或 JavaScript 文件内容较多，业务逻辑较复杂，建议放到外部文件引入。

<meta http-equiv="Cache-Control" content="max-age=7200">
<meta http-equiv="Expires" content="Mon,20Jul201623:00:00GMT">

// 注意时间格式：必须使用GMT的时间格式

<meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">

详情请查看meta标签属性汇总

<link rel="stylesheet" href="//cdn1.domain.com/path/main.css" >
...
<script src="//cdn2.domain.com/path/main.js"></script>

$.ajax({
    url : url,
    type : 'get',
    cache : true, //推荐使用缓存
    data : {},
    success (){//...},
    error (){//...}
});


$.ajax({
    url : url,
    type : 'get', //推荐使用get完成请求
    data : {},
    success (){//...},
    error(){//...}
});

<script src ="main .js" defer> </script>
<script src="main.js"  async></script>

使用async时加载和渲染后续文档的过程和main.js的加载时与执行是并行的。使用defer时，加载后续文档元素的过程和main.js的加载时并行的，但是main.js的执行要在页面所有元素解析完成以后才能开始执行。

<!--不推荐-->
 <style>
   @import "path/main.css"
</style>


<！--推荐如下写法-->
<link   rel= "styleSheet"    href = "//cdn1.domain.com/path/main.css"

页面渲染类

<!--不推荐-->
<div>
    <span>
        <a href="javascript:void(0);">
            <img src="./path/photo.jpg" alt="图片">
        </a>
    </span>
</div>

<!--推荐-->
<img src="./path/photo.jpg" alt="图片" >


.opacity{
    filter : progid : DXImageTransform.Microsoft.Alpha( opacity = 50 );
}

移动浏览器前端优化策略：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>样例</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
    /*必备的首屏CSS*/
    html,body{
        margin:0;
        padding:0;
        background-color:#ccc;
    }
    </style>
</head>
<body>
</body>
</html>

后续内容

HTTP压缩：

现代浏览器进行htttp请求时，普遍支持gzip压缩。在发出请求时，会在htttp头部显示Accept-Enconding: gzip,deflate （在请求头中设置） 即就是告诉服务器可以接受这两种雅俗格式。于是服务器就把请求的资源文件压缩，并设置Content-Encoding:gzip （在响应头中设置），浏览器看到着个头部设置，自动解压缩。这种压缩可以减少至少60%的体积。CDN资源库对返回的脚本进行了压缩传输，所以在开发中有些资源可以通过CDN静态资源库来引用。

上一篇 下一篇

猜你喜欢

热点阅读