• 前端优化


    /前端优化
    内容部分 css javascript cookie 图片 服务器 移动应用
    内容部分
    尽量减少http请求
    1,合并文件是通过把所有的脚本放到一个文件中来减少http请求,如把所有的css都合并到一个样式表
    2,css sprites技术合并图片
    3,图片地图:紧挨在一起才可以使用,不具有可读性
    <img usemap='#mymap' src="" alt="" />
    <map name="mymap">
    <area shape="" coords="映射的方向" href="" alt="" />

    </map>
    4,内联图像:将图像加载到样式表中,增大了页面的大小,主流浏览器还没有支持
    5减少dns查找查找次数:解析服务器会返回这个域名对应的ip地址,需要花的时间
    当客户端的dns缓存为空时,减少主机名的数量,减少了并行下载,增加了响应时间
    6避免跳转:跳转是使用301和302代码实现的:跳转会降低用户体验,开发者忽略的细节,url没有加、会返回一个包含301的挑战
    7,可缓存的ajax
    8推迟加载内容 onload分成二部分:一部分是马上可以加载的,另一部分是稍后加载的
    9,预加载:使用onload提前加载 css sprite
    10,减少dom的操作,使标签更加语义化
    11,减少iframe的数量:即使为空,加载也需要时间,会阻止页面的加载
    12,避免使用404,找到
    避免跳转有用的部分当作javascript代码来执行
    缓存ajax
    推迟加载
    提前加载
    减少dom元素数量
    用域名划分页面内容
    使frame数量最少
    避免404错误
    二 css的部分
    1、把样式置于顶部:在head加载你的样式表,会终止内容的有序呈现
    2、避免使用css表达式(express):会在页面计算成千上万次,会对页面性能产生影响。
    3,使用link不应该使用@import
    4,每个元素他都会运行一次,增加内存开支,png8可以可以完全避免使用滤镜
    javascript部分
    1,把脚本置于页面底部

    2,使用外部javascript和css:请求浏览器可以有缓存,写在内置的文档增加了文档,减少了http
    3,削减javascript和css
    去除不必要的空格和注释(YUI Compressor)
    4,削减重复脚本
    在ie中可以,在ff中不会有额外的http请求
    5,减少dom访问:避免使用JavaScript来修改页面布局
    6,开发智能事件处理程序
    image部分
    1,优化图像:压缩图片,保存jpg图像,色彩的少,滤镜问题使用png8
    2,优化css sprite
    在sprite中水平排列你的图片,颜色较近的组合在一起,降低颜色数,降低256色以便使用png8格式,图像之间留有很大的间隙。
    3,不要再html中缩放图像
    html页面加载和解析流程
    1,用户输入网址,浏览器向服务器发出请求,返回html文件
    2,浏览器开始载入html代码,发现head标签内有一个link标签引入外部css文件
    3,浏览器又发出css文件的请求,服务器返回这个css文件
    4,浏览器继续载入html中body的代码,并且css已经拿到手,可以开始渲染页面了一个img标签引用了一张图片,向服务器发送请求,此时浏览器不会等到页面下载完,而是继续渲染后面的代码
    5,服务器返回图片文件,由于图拍呢占用了我一定的面积,影响了后面段落的排布,因此浏览器需要重新渲染这部分的代码
    6,浏览器发现了一个包含一行javascript代码的scriptt标签,赶快运行它
    7,javascript脚本执行了这条语句,命令浏览器必须要隐藏掉代码中的某个style,少了一个元素,浏览器重新渲染这部分的代码

  • 相关阅读:
    C指针详解(经典,非常详细)
    PL/SQL错误提示 database character set(AL32UTF8) and Client character set(ZHS16GBK) are different
    安装Oracle报错,全部为未知!
    Oracle 支持在具有 DHCP 分配的 IP 地址的系统上进行安装
    Asp.Net页面生命周期
    oracle 导库建立测试库
    宝塔安装建站教程
    SEM理论
    SEM小总结
    SEM大致操作梳理
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/4401771.html
Copyright © 2020-2023  润新知