项目一问题杂记（1）

最新推荐文章于 2024-08-01 17:38:21 发布

Pro_皮皮骑士

最新推荐文章于 2024-08-01 17:38:21 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/weixin_42413651/article/details/81173426

版权

1.获取本地路径
var lcal= location.href;
lcal=substring(0,lcal.lastIndexOf("\"));

2.BOM内含属性：
      navigator：提供浏览器窗口信息；
      location：提供浏览器所加载的详细信息，可对当前页面的URL进行操作；
      screen：提供用户显示器分辨率的详细信息；
      window（顶层对象）：表示浏览器打开的窗口；
      history：可对当前的浏览历史进行操作；

3.跳转网页五点：
1 html的实现
<head>

<meta http-equiv="refresh" content="10">

<meta http-equiv="refresh" content="5;url=hello.html">
</head>

优点：简单；
缺点：Struts Tiles中无法使用；

2) javascript的实现

优点：灵活，可以结合更多的其他功能
缺点：受到不同浏览器的影响

3) 结合了倒数的javascript实现（IE）
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
   var second = totalSecond.innerText;
   setInterval("redirect()", 1000);
   function redirect(){
   totalSecond.innerText=--second;
   if(second<0) location.href='hello.html';
   }
</script>

优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）

3') 结合了倒数的javascript实现（firefox）
<script language="javascript" type="text/javascript">
   var second = document.getElementById('totalSecond').textContent;
   setInterval("redirect()", 1000);
   function redirect()
   {
   document.getElementById('totalSecond').textContent = --second;
   if (second < 0) location.href = 'hello.html';
   }
</script>

4) 解决Firefox不支持innerText的问题
   <span id="totalSecond">5</span>
   <script language="javascript" type="text/javascript">
   if(navigator.appName.indexOf("Explorer") > -1){
   document.getElementById('totalSecond').innerText = "my text innerText";
   } else{
   document.getElementById('totalSecond').textContent = "my text textContent";
    }
   </script>
5) 整合3)和3')
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1) {
    second = document.getElementById('totalSecond').innerText;
} else {
    second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
    location.href = 'hello.html';
} else {
    if (navigator.appName.indexOf("Explorer") > -1) {
        document.getElementById('totalSecond').innerText = second--;
    } else {
        document.getElementById('totalSecond').textContent = second--;
    }
}
}
</script>

4.页面优化：

第一步：加载优化：
减少HTTP请求。
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript；b) 合并小图片，使用雪碧图（CSS SPRITE）；

缓存。

压缩HTML、CSS、JavaScript。

          确保无阻塞。
          写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载

          使用首屏加载。
          首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。

按需加载。

预加载。

          压缩图片。
          减少Cookie、避免重定向以及异步加载第三方资源。

第二步：脚本执行优化

          CSS写在头部，JavaScript写在尾部或异步。

          避免图片和iFrame等的空Src。

          尽量避免重设图片大小。

          图片尽量避免使用DataURL。

第三步：css优化
尽量避免写在HTML标签中写Style属性。
不滥用Float。
不滥用Web字体。

第四步：JavaScript执行优化
减少重绘和回流。
缓存Dom选择与计算。
缓存列表.length。
尽量使用事件代理，避免批量绑定事件
尽量使用ID选择器。

第五步：渲染优化
减少Dom节点。
动画优化。
高频事件优化。
GPU加速。

5.什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

1.渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

2.优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，
而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。