• 奥一新源科技 面试总结


    1:跨域?跨域有啥好处?

    JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。

    • 什么是跨域?

    简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象

    image

    • 跨域的方式
    1. JSONP跨域
    2. 通过修改document.domain来跨子域
    3. 使用window.name来进行跨域
    4. 使用HTML5中新引进的window.postMessage方法来跨域传送数据
    • 跨域有什么好处?

    解决跨域访问限制问题

    2:性能优化?

    一、尽量减少 HTTP 请求

    有几种常见的方法能切实减少 HTTP 请求:

    1、 合并脚本跟样式文件,如可以把多个 CSS 文件合成一个,把多个 JS 文件合成一个。

    2、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。

     

    二、使用浏览器缓存

    在用户浏览网站的不同页面时,很多内容是重复的,比如相同的JS、CSS、图片等。如果我们能够建议

    甚至强制浏览器在本地缓存这些文件,将大大降低页面产生的流量,从而降低页面载入时间。

    根据服务器端的响应header,一个文件对浏览器而言,有几级不同的缓存状态。

    1、服务器端告诉浏览器不要缓存此文件,每次都到服务器上更新文件。

    2、服务器端没有给浏览器任何指示。

    3、在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数

    据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本

    地版本,否则下载新版本。一般来说,有且只有静态文件,服务器端才会给出这些数据。

    4、服务器强制要求浏览器缓存文件,并设置了过期时间。在缓存未到期之前,浏览器将直接使用本地缓

    存文件,不会与服务器端产生任何通信。

    我们要做的是尽量强制浏览器到第四种状态,特别是对于JS、CSS、图片等变动较少的文件。

     

    三、使用压缩组件

    IE和Firefox浏览器都支持客户端GZIP,传输之前,先使用GZIP压缩再传输给客户端,客户端接收之后

    由浏览器解压,这样虽然稍微占用了一些服务器和客户端的CPU,但是换来的是更高的带宽利用率。对

    于纯文本来讲,压缩率是相当可观的。如果每个用户节约50%的带宽,那么租用来的那点带宽就可以服

    务多一倍的客户,并且缩短了数据的传输时间。

     

    四、图片、JS的预载入

    预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象,然后将需要载入的图像的 U

    RL 作为参数传入。

    function preLoadImg(url) {

    var img = new Image();

    img.src = url;

    }

    可以在登录页面预载入JS和图片

     

    五、将脚本放在底部

    脚本放在顶部带来的问题,

    1、 使用脚本时,对于位于脚本以下的内容,逐步呈现将被阻塞

    2、 在下载脚本时会阻塞并行下载

    放在底部可能会出现JS错误问题,当脚本没加载进来,用户就触发脚本事件。

    要综合考虑情况。

     

    六、将样式文件放在页面顶部

    如果样式表任在加载,构建呈现树就是一种浪费,样式文件放在页面底部可能会出现两种情况:

    1、 白屏

    2、 无样式内容的闪烁

    七、使用外部的JS和CSS

    将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。

     

    八、切分组件到多个域

    主要的目的是提高页面组件并行下载能力。但不要跨太多域名,建议采用2个子域名。

     

    九、精简JS

    可以做到两个级别

    1、精简:从代码中移除不必要的字符以减少其大小,

    2、混淆:在精简的同时,还会改写代码,函数、变量名被转换成更短的字符串

    可以使用ShrinkSafe来精简JS http://shrinksafe.dojotoolkit.org/

     

    十、精简CSS

    从代码中移除不必要的字符以减少其大小,

    可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /

     

    十一、 精简图片、Flash

    对大图片、Flash,要在效果和大小之间做出平衡。

     

    3.用户体验优化

    • 舒适的字体设计
    • 提高加载速度
    • 合理的结构设计
  • 相关阅读:
    20175215 2018-2019-2 第十周java课程学习总结
    2018-2019-2 20175215 实验三《敏捷开发与XP实践》实验报告
    MyCP(课下作业,必做)
    2018-2019-1 20175234 《信息安全系统设计基础》有关系统调用的部分学习
    2018-2019-1 20175234 《信息安全系统设计基础》第2周学习总结
    一个想要拥有正常的F1~F12的联想小新潮
    2018-2019-1 20175234 《信息安全系统设计基础》第1周学习总结
    Visual C++ 6.0精简绿色版下载及简单使用教程
    20175234 2018-2019-2 实验五 网络编程与安全
    20175234 2018-2019-2 实验四 Android程序设计
  • 原文地址:https://www.cnblogs.com/yinzf/p/5916691.html
Copyright © 2020-2023  润新知